This guide will walk you through configuring an angular project to generate code coverage reports while executing the Cypress component tests. We will add the Cypress schematic to our angular project, configure Cypress to instrument our code while running component tests, and add the Cypress code coverage plugin to generate code coverage reports. This approach can also be applied to generate code coverage with Cypress e2e tests.
Prerequisites
1. Generate our app using Angular CLI.
npm install -g @angular/cli ng new my-awesome-app cd my-awesome-app
2. Add Cypress Angular Schematic to get up and running with Cypress.
ng add @cypress/schematic --e2e --component
Instrument the code
We have to insert additional counters into our source code before building it while statements are executed by our Cypress tests to compute code coverage. This process is called instrumenting. Cypress does not instrument our code. We will use the built-in Istanbul.js and its command-line client nyc.
1. Add Webpack config
We need to provide webpack with a custom build configuration to instrument our code. Create a new file cypress/coverage.webpack.ts and add the following code.
export default { module: { rules: [ { test: /\.(ts)$/, use: { loader: 'babel-loader', options: { plugins: ['babel-plugin-istanbul'] } }, enforce: 'post', include: require('path').join(__dirname, '..', 'src'), exclude: [ /node_modules/, /cypress/, /(ngfactory|ngstyle)\.js/] }, ], }, };
To avoid type warnings add “node” to the types array in the cypress/tsconfig.json file.
"types": ["cypress","node"]
2. Import the webpack configuration we added in the coverage.webpack.ts file in the cypress.config.ts file.
import coverageWebpack from './cypress/coverage.webpack'
3. Add webpackConfig to the cypress devserver configuration for the component test to the cypress.config.ts file.
component: { devServer: { framework: 'angular', bundler: 'webpack', webpackConfig:coverageWebpack } }
4. Configure the coverage folder for component tests by adding the following script to package.json.
"nyc": { "report-dir": "coverage-component" }
Install and configure the Cypress code coverage plugin
1. Install Cypress code coverage plugin.
npm install -D @cypress/code-coverage
2. Add setupNodeEvents functions to the cypress configuration for component test in the cypress.config.ts file.
component: { devServer: { framework: 'angular', bundler: 'webpack', webpackConfig:coverageWebpack }, specPattern: '**/*.cy.ts', setupNodeEvents(on, config) { require('@cypress/code-coverage/task')(on, config) return config }, }
3. Open the cypress/support/component.ts file and add the following code.
import '@cypress/code-coverage/support'
We are all set with the configuration and ready to start testing. Add a component to your project and add cypress component tests. Let’s follow Cypress documentation for creating a component and adding component tests for demonstration. First added one test as follows.
it('mounts', () => { cy.mount(StepperComponent) })
To run cypress component tests with coverage run the following script in the CLI.
cypress run --component --env coverage=true
When tests have completed executing you can find the coverage report in the coverage-component/lcov-report/index.html file. At this point, it looks like this.
Add more tests and rerun the tests. You will see the updated coverage report.
References
Implementing code coverage with Angular and Cypress
Angular – Add Code Coverage to Your Cypress Tests
Configuring Cypress code coverage (Angular + Docker + Azure DevOps)
Component Code Coverage in Cypress v10
Great job Sabitha!