Cypress代码覆盖率：合并E2E与组件测试报告配置问询

要让Cypress的E2E测试和组件测试覆盖率报告合并而非互相覆盖，核心思路是让两类测试生成独立的覆盖率原始数据文件，再通过nyc工具合并数据并生成统一报告。以下是具体步骤：

1. 修改Cypress配置文件 #

更新cypress.config.js，为两类测试指定不同的覆盖率数据存储目录，避免互相覆盖：

const { defineConfig } = require("cypress");
const fs = require('fs-extra');

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      // 为E2E测试指定覆盖率数据目录
      const coverageDir = process.env.CYPRESS_COVERAGE_DIR || '.nyc_output/e2e';
      fs.ensureDirSync(coverageDir);
      
      config.env.coverage = {
        ...config.env.coverage,
        nyc: {
          ...config.env.coverage?.nyc,
          reportDir: coverageDir,
          tempDir: coverageDir,
          output: `${coverageDir}/out.json`
        }
      };

      require("@cypress/code-coverage/task")(on, config);
      return config;
    },
  },

  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
      webpackConfig: {
        mode: "development",
        devtool: false,
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"],
                  plugins: ["istanbul"],
                },
              },
            },
          ],
        },
      },
    },
    setupNodeEvents(on, config) {
      // 为组件测试指定覆盖率数据目录
      const coverageDir = process.env.CYPRESS_COVERAGE_DIR || '.nyc_output/component';
      fs.ensureDirSync(coverageDir);
      
      config.env.coverage = {
        ...config.env.coverage,
        nyc: {
          ...config.env.coverage?.nyc,
          reportDir: coverageDir,
          tempDir: coverageDir,
          output: `${coverageDir}/out.json`
        }
      };

      require("@cypress/code-coverage/task")(on, config);
      return config;
    },
  },
});

2. 添加npm脚本 #

在package.json中添加测试、合并、生成报告的脚本，实现一键执行全流程：

{
  "scripts": {
    "pretest:coverage": "rimraf .nyc_output coverage",
    "test:e2e:coverage": "CYPRESS_COVERAGE_DIR=.nyc_output/e2e cypress run --e2e",
    "test:component:coverage": "CYPRESS_COVERAGE_DIR=.nyc_output/component cypress run --component",
    "test:merge-coverage": "nyc merge .nyc_output .nyc_output/merged.json",
    "test:generate-report": "nyc report --reporter=lcov --reporter=html --temp-dir=.nyc_output",
    "test:coverage": "npm run test:e2e:coverage && npm run test:component:coverage && npm run test:merge-coverage && npm run test:generate-report"
  }
}

脚本说明： #

• pretest:coverage：每次执行前清空旧的覆盖率数据和报告目录，避免历史数据干扰。
• test:e2e:coverage：运行E2E测试并将覆盖率数据存入.nyc_output/e2e目录。
• test:component:coverage：运行组件测试并将覆盖率数据存入.nyc_output/component目录。
• test:merge-coverage：用nyc merge命令合并两个目录下的覆盖率数据，生成统一的merged.json文件。
• test:generate-report：基于合并后的数据生成HTML和LCOV格式的报告，默认输出到coverage目录。
• test:coverage：一键串联执行所有步骤，直接生成最终合并报告。

3. 安装必要依赖 #

如果项目中还未安装以下依赖，执行命令安装：

npm install nyc fs-extra rimraf --save-dev

4. 执行测试并生成合并报告 #

运行以下命令即可完成两类测试的覆盖率合并：

npm run test:coverage

执行完成后，打开coverage/index.html即可查看合并后的完整覆盖率报告。

内容的提问来源于stack exchange，提问作者Adnan Arif Sait