cypress-circleci-coverage

A Cypress plugin that generates coverage data for CircleCI's Smarter Testing.

Usage

This plugin uses Istanbul code coverage collected from the browser to map source files to test specs.

Install the plugin.

pnpm add -D @circleci/cypress-circleci-coverage

Add the plugin to your Cypress configuration:

Instrument your code with Istanbul (e.g. via babel-plugin-istanbul in a webpack preprocessor) so that window.__coverage__ is available in the browser during test execution.

// cypress.config.ts
import {defineConfig} from 'cypress';
import cypressCircleCICoverage from '@circleci/cypress-circleci-coverage/plugin';

export default defineConfig({
  e2e: {
    supportFile: './cypress/support/e2e.ts',
    setupNodeEvents(on, config) {
      const webpackOptions = {
        module: {
          rules: [
            {
              test: /\.ts$/,
              exclude: /node_modules/,
              use: {
                // instrument files with the istanbul plugin.
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-typescript'],
                  plugins: [['istanbul']],
                },
              },
            },
          ],
        },
      };

      on('file:preprocessor', webpackPreprocessor({webpackOptions}));

      return cypressCircleCICoverage(on, config);
    },
  },
});

Import the support file in your Cypress support file:

// cypress/support/e2e.ts
import '@circleci/cypress-circleci-coverage/support';

Set the CIRCLECI_COVERAGE environment variable when running tests to enable coverage collection.

CIRCLECI_COVERAGE=coverage.json cypress run

Development

Install dependencies with pnpm.

pnpm install

Install cypress.

pnpm cypress install

Build the plugin.

pnpm build

Run tests.

pnpm test