CRA+TypeScript项目配置Cypress代码覆盖遇插件注册报错求助

问题根源 #

你遇到的Code coverage tasks were not registered by the plugins file警告，核心原因是Cypress 10+已废弃旧版plugins/index.js的配置方式，转而使用Cypress.config.ts中的setupNodeEvents作为插件任务的唯一注册入口，你的旧配置未被Cypress加载，导致代码覆盖任务未完成注册。

解决方案 #

1. 调整Cypress.config.ts核心配置 #

将代码覆盖任务直接注册到e2e和component的setupNodeEvents中，同时完善组件测试的webpack配置：

import { defineConfig } from "cypress";
// 导入代码覆盖任务
import codeCoverageTask from "@cypress/code-coverage/task";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 注册E2E测试的代码覆盖任务
      codeCoverageTask(on, config);
      return config;
    },
  },
  component: {
    supportFile: "cypress/support/index.js",
    supportFolder: "cypress/support",
    fixturesFolder: "cypress/fixtures",
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
      // 引入CRA原生webpack配置，确保代码被正确插桩
      webpackConfig: require("./node_modules/react-scripts/config/webpack.config.js"),
    },
    setupNodeEvents(on, config) {
      // 注册组件测试的代码覆盖任务
      codeCoverageTask(on, config);
      return config;
    },
  },
});

2. 清理旧插件文件 #

直接删除root/cypress/plugins/index.js文件——Cypress 10+不会再自动加载该文件，留着只会造成混淆。

3. 保留支持文件配置 #

cypress/support/index.js的现有配置无需修改，继续保留即可：

import "@cypress/code-coverage/support";

4. 确认脚本配置有效性 #

你的package.json脚本已正确使用@cypress/instrument-cra为CRA代码插桩，无需调整：

"cypress:start:app": "SET BROWSER=NONE&& react-scripts -r @cypress/instrument-cra start"

验证步骤 #

1. 运行npm run cypress:open启动Cypress
2. 执行任意组件或E2E测试用例
3. 测试完成后，查看Cypress左侧菜单栏的Coverage标签，或项目根目录生成的coverage文件夹，确认代码覆盖数据正常生成

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