赛普拉斯代码覆盖率：将 E2E 和组件测试合并到同一个覆盖率报告中

Question

我已经在我的 React 应用程序上配置了 Cypress，并且正在使用 E2E 和组件测试。使用 istanbul 和 @cypress/code-coverage 在两个测试中设置代码覆盖率。

正在为各个测试生成报告。当我在另一个测试类型之后运行一次测试类型时，就会出现问题。 例如，如果我运行 E2E 测试，则会生成覆盖率报告。然后，当我运行组件测试时，会生成一个新的覆盖率报告来替换以前的报告。

这是我的柏树配置，

赛普拉斯版本：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"]
}

是否有配置可以使 2 个报告合并而不是互相替换？

Answer 1

我建议使用 --report-dir 选项来设置报告的存放位置

    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/

这将在指定的目录中生成一个“coverage-final”文件。

然后您可以使用 istanbul-merge 将文件合并到一个名为“all-tests-coverage”的 json 报告文件中，如下所示

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

现在您可以从合并的 json 文件生成 html 报告

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