First Coverage Data

Installation

Babel is essential for modern frontend engineering and modular development. For Babel projects, you only need to install two Babel plugins to get started quickly.

npm install babel-plugin-istanbul babel-plugin-canyon -D

pnpm add babel-plugin-istanbul babel-plugin-canyon -D

yarn add babel-plugin-istanbul babel-plugin-canyon --dev

bun add babel-plugin-istanbul babel-plugin-canyon --dev

Add the istanbul and canyon plugins to your Babel configuration file :

module.exports = {
  plugins: [
    'istanbul',
    'canyon'
    // Note: The canyon plugin should come after the istanbul plugin
    ],
};

Check

After configuration, start your project and print window.__coverage__ in the console. If the output matches the image below, it means code instrumentation was successful.

Configure CI Environment Variables

In the CI environment, we need to configure some environment variables to report coverage data.

1. DSN and REPORTER

• DSN: Coverage data reporting service address, {{url}/coverage/client, where {{url}} is your Canyon service address.
• REPORTER: User token, available in the Canyon user settings page.

2. Configure CI Platform Variables

Update Babel Plugin Activation Conditions

In the CI stage, we need to control when plugins are active to prevent instrumentation on production branches.

module.exports = {
  plugins: (process.env.CI &&
            process.env.CI_COMMIT_REF_NAME !== 'release')
            ? [
              'canyon',
              'istanbul'
            ]:[],
};

Report Coverage Data

After CI completes, the page is deployed to the testing environment.

At this point, coverage data is stored in the browser. As users interact with the application or UI automation tests run, the window.coverage_ data will accumulate.

Reporting this data accurately to the Canyon server enables real-time display of coverage data.

Here are several ways to report coverage data: