Angular Code Coverage with Cypress Component Testing

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.