运行Cypress Cucumber Feature文件时遇Webpack编译错误求助

问题重现 #

运行Cypress feature文件时触发Webpack编译错误，错误信息：

Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

现有配置与代码 #

目录结构 #

project-root/
├── cypress/
│   ├── e2e/
│   │   └── example.feature
│   ├── plugins/
│   │   └── index.js
│   ├── support/
│   │   └── step_definitions/
│   │       └── exampleSteps.js
│   └── cypress.config.js
├── package.json

cypress/plugins/index.js #

module.exports = (on, config) => {
  // 现有插件配置代码
};

cypress.config.js #

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 现有事件配置
    },
    specPattern: "cypress/e2e/**/*.feature"
  },
});

package.json #

{
  "name": "your-project",
  "dependencies": {},
  "devDependencies": {
    "cypress": "^13.0.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "webpack": "^5.88.0"
    // 其他项目依赖
  }
}

Feature 文件（example.feature） #

Feature: Example Feature
  Scenario: Test Login Flow
    Given I am on the homepage
    When I click the login button
    Then I should see the login form

Step Definitions（exampleSteps.js） #

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';

Given('I am on the homepage', () => {
  cy.visit('/');
});

When('I click the login button', () => {
  cy.get('#login-btn').click();
});

Then('I should see the login form', () => {
  cy.get('#login-form').should('be.visible');
});

解决方案 #

1. 安装必要依赖 #

先补全处理Gherkin文件和Webpack编译所需的依赖：

npm install --save-dev cypress-cucumber-preprocessor @cypress/webpack-preprocessor cucumber-loader babel-loader @babel/preset-env

2. 配置Webpack预处理器 #

修改cypress/plugins/index.js，添加Webpack规则处理.feature和.js文件：

const webpack = require('@cypress/webpack-preprocessor');
const path = require('path');

module.exports = (on, config) => {
  const webpackOptions = {
    resolve: {
      extensions: ['.js', '.feature'],
    },
    module: {
      rules: [
        {
          test: /\.feature$/,
          use: [
            {
              loader: 'cucumber-loader',
              options: {
                compiler: '@cypress/cucumber-preprocessor/lib/compiler',
              },
            },
          ],
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
      ],
    },
  };

  on('file:preprocessor', webpack({ webpackOptions }));
  return config;
};

3. 更新Cypress主配置 #

修改cypress.config.js，关联预处理器并明确配置项：

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor', cucumber());
      return config;
    },
    specPattern: "cypress/e2e/**/*.feature",
    supportFile: "cypress/support/index.js",
    stepDefinitions: "cypress/support/step_definitions/**/*.js"
  },
});

4. 修复VS Code识别问题 #

如果VS Code无法识别.feature文件：

• 在扩展市场安装Cucumber (Gherkin) Full Support插件
• 打开VS Code设置（快捷键Ctrl+,），添加以下配置：

{
  "files.associations": {
    "*.feature": "gherkin"
  }
}

5. 验证修复 #

1. 删除node_modules和package-lock.json，重新执行npm install
2. 重启Cypress，运行目标feature文件
3. 若仍报错，检查Webpack版本是否与@cypress/webpack-preprocessor兼容（推荐Webpack 5.x），或确认step definitions文件路径与配置一致

内容的提问来源于stack exchange，提问作者Matheus Santos Pereira