React项目中Cypress测试正常但覆盖率显示Unknown问题求助

1. 确认覆盖率依赖完整安装 #

确保已安装必要的覆盖率工具包：

npm install @cypress/code-coverage babel-plugin-istanbul --save-dev

或使用yarn：

yarn add @cypress/code-coverage babel-plugin-istanbul --dev

2. 配置Babel支持覆盖率收集 #

在项目根目录的.babelrc或babel.config.json中添加istanbul插件：

{
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

如果是Create React App项目，可直接在package.json中添加babel配置：

"babel": {
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

3. 配置Cypress加载覆盖率插件 #

• 在cypress/support/e2e.js（或旧版本的cypress/support/index.js）中导入插件：

  import '@cypress/code-coverage/support'
  

• 在cypress.config.js中配置任务：

  const { defineConfig } = require('cypress')
  
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        require('@cypress/code-coverage/task')(on, config)
        return config
      },
    },
  })
  

4. 确保测试运行在test环境 #

启动Cypress时设置NODE_ENV=test，可在package.json的scripts中配置快捷命令：

"scripts": {
  "cypress:run": "NODE_ENV=test cypress run",
  "cypress:open": "NODE_ENV=test cypress open"
}

5. 验证代码是否被正确instrument #

运行测试后，检查项目根目录是否生成.nyc_output文件夹，其中应有out.json文件。若未生成，说明代码未被instrument，需排查Babel配置是否生效，或是否有webpack等工具覆盖了Babel设置。

如果是Create React App，可借助react-app-rewired覆盖默认配置：

1. 安装依赖：npm install react-app-rewired customize-cra --save-dev
2. 创建config-overrides.js文件：

   const { override, addBabelPlugin } = require('customize-cra')
   
   module.exports = override(
     addBabelPlugin('istanbul')
   )
   

3. 修改启动脚本：

   "scripts": {
     "cypress:open": "NODE_ENV=test react-app-rewired start && cypress open"
   }
   

6. 手动生成覆盖率报告 #

若上述步骤完成后仍显示Unknown，可手动运行命令生成报告：

npx nyc report --reporter=html

打开coverage/index.html查看详细数据，确认覆盖率收集是否正常。

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