Cypress 10 配置Cucumber预处理器cypress.config.js报错咨询

你的配置报错、无法识别.feature文件，核心是两个认知偏差：

1. 新版@badeball/cypress-cucumber-preprocessor不再是旧版那种可直接传入file:preprocessor的处理函数，addCucumberPreprocessorPlugin是用来注册Cypress事件钩子的异步方法，不能作为preprocessor回调传入。
2. 该版本剥离了内置的文件转译能力，必须搭配打包器（esbuild/webpack）完成.feature文件到可执行JS的转译，缺失这层配置就会触发“无对应loader处理文件”的报错。

正确配置流程 #

1. 安装/清理依赖 #

首先卸载会冲突的旧版预处理器包，再安装新版必要依赖：

# 卸载旧版TheBrainFamily维护的cucumber预处理器，避免包冲突
npm uninstall cypress-cucumber-preprocessor -D

# 安装新版badeball维护的预处理器+esbuild打包器（官方推荐，转译速度最快）
npm install @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor -D

2. 编写cypress.config.js配置 #

注意setupNodeEvents需要声明为异步函数，按顺序注册插件、挂载带cucumber转译能力的打包器，最终返回修改后的config：

const { defineConfig } = require("cypress");
const createEsbuildBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const { addCucumberPreprocessorPlugin } = require("@badeball/cypress-cucumber-preprocessor");
const createCucumberEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:4200",
    // 注意要写glob规则匹配所有层级的feature文件，不要只写文件夹路径
    specPattern: "cypress/e2e/features/**/*.feature",
    async setupNodeEvents(on, config) {
      // 注册cucumber预处理器的内置事件钩子
      await addCucumberPreprocessorPlugin(on, config);

      // 给file:preprocessor挂载集成了cucumber转译能力的esbuild打包器
      on(
        "file:preprocessor",
        createEsbuildBundler({
          plugins: [createCucumberEsbuildPlugin.default(config)],
        })
      );

      // 必须return config，否则所有插件注入的配置不会被Cypress识别
      return config;
    },
  },
});

额外注意事项 #

• 配置修改完成后需要完全重启Cypress（关闭已打开的Cypress窗口，重新执行cypress open/cypress run），配置文件的node事件逻辑不会触发热重载。
• 如果你项目统一使用webpack作为打包器，可以替换esbuild相关依赖为@cypress/webpack-preprocessor，核心逻辑不变：先await注册cucumber插件，再给file:preprocessor传入挂载了cucumber loader的webpack打包实例即可。
• 不需要保留旧版的plugins文件夹及相关配置，所有插件逻辑收敛在cypress.config.js中即可。

配置完成后重新执行测试，就可以正常加载、运行.feature格式的Cucumber用例了。

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