Cypress v10如何正确注册code-coverage插件并生成覆盖率文件

当前配置仅完成了Node层的覆盖率任务注册，缺少浏览器侧的脚本引入，同时未覆盖组件测试场景（如有使用）的配置，导致覆盖率采集、重置、落盘的完整链路没有打通。你提到的插桩正常仅代表代码侧注入了coverage变量，不代表Cypress侧的采集逻辑生效。

• 修正cypress.config.ts配置，E2E和组件测试场景都需要注册task，参考如下配置：

import { defineConfig } from "cypress";

export default defineConfig({
  video: false,
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      // 必须return修改后的config，否则配置不会生效
      return config
    },
  },
  // 如使用Cypress组件测试，需同步添加以下配置
  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      return config
    },
  },
});

• 在对应测试类型的support文件顶部引入浏览器侧支持脚本，这是你当前缺失的核心配置：
  • E2E测试：在cypress/support/e2e.ts最顶部添加import '@cypress/code-coverage/support'
  • 组件测试：在cypress/support/component.ts最顶部添加上述引入语句
• 校验依赖版本：确认本地安装的@cypress/code-coverage版本≥3.10，不存在全局安装的Cypress导致的版本冲突问题。
• 验证配置有效性：运行测试时添加DEBUG=code-coverage环境变量，控制台将输出覆盖率采集、重置、合并、写入的全流程日志，可快速定位异常环节。

配置生效后，所有测试执行完成会自动在项目根目录生成.nyc_output临时覆盖率文件，执行npx nyc report即可生成可视化HTML覆盖率报告，默认存放于coverage目录下。

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