非CRA搭建的React项目配合Cypress无法生成代码覆盖率报告求助

修复步骤 #

前置依赖检查

确保已安装所有必要的开发依赖：

npm i -D babel-plugin-istanbul @cypress/code-coverage nyc

1. 修复.babelrc配置错误

你当前的.babelrc存在核心配置错误：@babel/preset-react被错误嵌套在@babel/preset-env的配置数组内，导致React语法解析和插桩逻辑异常。同时根级配置了istanbul插件会导致生产构建也被注入插桩代码，需调整如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "transform-class-properties"
  ],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    },
    "e2e": {
      "plugins": ["istanbul"]
    }
  }
}

2. 补充NYC覆盖率配置

在项目package.json中新增nyc配置，明确覆盖率统计的范围和输出格式：

{
  "nyc": {
    "include": ["src/**/*.{js,jsx}"],
    "exclude": [
      "src/**/*.test.{js,jsx}",
      "cypress/**/*"
    ],
    "reporter": ["text", "text-summary", "html"],
    "all": true
  }
}

3. 调整测试执行脚本

@cypress/code-coverage插件会自动完成覆盖率收集和报告生成，无需手动调用nyc report，同时需要指定运行时的babel环境为e2e，修改脚本如下：

"cy": "BABEL_ENV=e2e cypress run"

如果是Windows环境，需先安装cross-env后调整为：

"cy": "cross-env BABEL_ENV=e2e cypress run"

4. 验证结果

执行测试后可在项目根目录的.nyc_output文件夹看到收集到的覆盖率原始数据，coverage文件夹下会生成对应格式的报告，可直接打开coverage/index.html查看明细覆盖率。 #

内容的提问来源于stack exchange，提问作者Smackface