CODEWITHSUNDEEP
javascriptcypresscode-coverageistanbul
Adnan Arif Sait
Adnan Arif Sait

Reputation: 113

Cypress Code Coverage: Merge E2E and Component Testing into same coverage report

I have configured Cypress on my React Application and am using both E2E and Component Testing. Code Coverage is setup on both the tests using istanbul and @cypress/code-coverage.

The report is being generated for the individual tests. The issue comes up when I run once test type after the other. For example, if I run E2E test the coverage report is generated. Then when I run component test, a new coverage report is generated that replaces the previous report.

Here is my cypress configuration,

Cypress version: 12.17.2

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      // implement node event listeners here
      require("@cypress/code-coverage/task")(on, config);

      return config;
    },
  },

  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
      webpackConfig: {
        mode: "development",
        devtool: false,
        module: {
          rules: [
            // application and Cypress files are bundled like React components
            // and instrumented using the babel-plugin-istanbul
            // (we will filter the code coverage for non-application files later)
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"],
                  plugins: [
                    // we could optionally insert this plugin
                    // only if the code coverage flag is on
                    "istanbul",
                  ],
                },
              },
            },
          ],
        },
      },
    },
    setupNodeEvents(on, config) {
      require("@cypress/code-coverage/task")(on, config);

      return config;
    },
  },
});

cypress/support/e2e.js

import "./commands";
import "@cypress/code-coverage/support";

cypress/support/component.js

import "./commands";
import "@cypress/code-coverage/support";

.nycrc.json

{
  "all": true,
  "excludeAfterRemap": true,
  "include": ["src/**/*.js"],
  "exclude": ["cypress/**/*.js"]
}

Is there configuration that will make the 2 reports merge rather than replace each other?

Upvotes: 3

Views: 2645

Answers (1)

Tash
Tash

Reputation: 306

I would recommend using the --report-dir option to set where you want the report to go

    npm run e2e-test1
    npx nyc report --reporter=json --report-dir=./coverage/test1/
    
    npm run e2e-test2
    npx nyc report --reporter=json --report-dir=./coverage/test2/

That'll generate a 'coverage-final' file in the directories specified.

Then you can use istanbul-merge to merge the files into one json report file called 'all-tests-coverage' for example, like so

npx istanbul-merge --out ./coverage/all-tests-coverage.json ./coverage/test1/coverage-final.json ./coverage/test2/coverage-final.json

Now you can generate the html report from that merged json file

npx istanbul report --include ./coverage/all-tests-coverage.json --dir ./coverage/all-tests-report html

Upvotes: 2

Related Questions