React项目配置Cypress Cucumber测试遇Webpack加载器错误求助

在现有React应用中配置Cypress+Cucumber测试时，持续触发以下错误：

Webpack Compilation Error
./cypress/e2e/googleSearch.feature 1:16
Module parse failed: Unexpected token (1:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Feature: Google Search

相关文件路径 #

• Feature文件：/Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/googleSearch.feature
• 步骤实现文件：/Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/spec/googleSearch.spec.js

现有配置内容 #

1. plugins/index.js

const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
    on('file:preprocessor', cucumber())
}

2. package.json依赖及配置

"devDependencies": {
    "cypress": "^12.11.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "@cypress/webpack-preprocessor": "^5.17.1",
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }

3. cypress.config.js

const {defineConfig} = require("cypress");

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            // implement node event listeners here
        },
        specPattern: "/Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/googleSearch.feature",

        // integrationFolder: "cypress/e2e",
        supportFile: "cypress/support/commands.js",
    },
});

4. 已尝试的webpack.config.js（项目根目录）

module.exports = {
    module: {
        rules: [
            {
                test: /\.feature$/,
                use: [
                    {
                        loader: 'cypress-cucumber-webpack-preprocessor/loader',
                    },
                ],
            },
        ],
    },
};

项目地址：https://github.com/francislainy/hello-talk-web/tree/cucumber

1. 迁移预处理器配置到Cypress 10+的新入口 #

Cypress 10+版本已废弃plugins/index.js，需将预处理器配置移至cypress.config.js的setupNodeEvents方法中：

const { defineConfig } = require("cypress");
const cucumber = require('cypress-cucumber-preprocessor').default;
const webpack = require('@cypress/webpack-preprocessor');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 加载webpack配置
      const webpackOptions = require('./webpack.config.js');
      on('file:preprocessor', webpack({ webpackOptions }));
      // 绑定cucumber预处理器
      on('file:preprocessor', cucumber());
    },
    specPattern: "cypress/e2e/**/*.feature", // 改用相对路径提升配置灵活性
    supportFile: "cypress/support/commands.js",
  },
});

2. 修正webpack的loader路径 #

不存在独立的cypress-cucumber-webpack-preprocessor包，正确的loader来自cypress-cucumber-preprocessor：

module.exports = {
  module: {
    rules: [
      {
        test: /\.feature$/,
        use: [{ loader: 'cypress-cucumber-preprocessor/loader' }],
      },
      // 若项目使用Babel，需添加JS文件处理loader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
};

3. 对齐步骤文件目录规则 #

开启nonGlobalStepDefinitions后，需确保步骤文件：

• 与对应feature文件同目录，或
• 放置在cypress/e2e/support/step_definitions目录下，让Cypress能自动识别绑定

4. 校验依赖兼容性 #

cypress-cucumber-preprocessor@4.3.1与Cypress 12.x版本存在适配问题，可尝试：

• 升级cypress-cucumber-preprocessor到最新稳定版
• 或降级Cypress到10.x版本测试

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