使用cypress-cucumber-preprocessor时遇Webpack编译错误求助

错误信息 #

Webpack Compilation Error
Module parse failed: Unexpected token (1:15)
您可能需要合适的loader来处理该文件类型，当前未配置任何loader来处理此文件。

背景配置 #

已执行操作与现有配置 #

1. 安装依赖：

   npm install --save-dev cypress-cucumber-preprocessor
   

2. 旧版插件配置（cypress/plugins/index.js）：

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

3. cypress.config.js原配置：

   {
     "baseUrl": "https://reqres.in/api",
     "e2e": {
       "specPattern": "**/*.feature"
     }
   }
   

4. 步骤定义文件（cypress/integration/step_definitions/users_steps.js）：

   import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
   
   Given('the API is available', () => {
     // Setup steps if needed
   });
   
   When('I request the first page of users', () => {
     cy.request('GET', '/users?page=1').as('getUsers');
   });
   
   When('I request user with ID 2', () => {
     cy.request('GET', '/users/2').as('getUser');
   });
   
   When('I submit a request to create a new user', () => {
     cy.request('POST', '/users', {
       name: 'John Doe',
       job: 'Software Developer'
     }).as('createUser');
   });
   
   Then('I should receive a 200 status code', () => {
     cy.get('@getUsers').its('status').should('eq', 200);
     cy.get('@getUser').its('status').should('eq', 200);
   });
   
   Then('I should receive a 201 status code', () => {
     cy.get('@createUser').its('status').should('eq', 201);
   });
   
   Then('the response should contain a list of users', () => {
     cy.get('@getUsers').its('body').should('have.property', 'data');
     cy.get('@getUsers').its('body.data').should('be.an', 'array');
   });
   
   Then('the response should contain the user\'s details', () => {
     cy.get('@getUser').its('body.data').should((user) => {
       expect(user).to.have.property('id', 2);
       expect(user).to.have.property('first_name');
       expect(user).to.have.property('last_name');
       expect(user).to.have.property('email');
     });
   });
   
   Then('the response should contain the user\'s ID', () => {
     cy.get('@createUser').its('body').should((user) => {
       expect(user).to.have.property('id');
       expect(user).to.have.property('createdAt');
     });
   });
   

5. Feature文件（cypress/integration/features/users.feature）：

   Feature: Users API
   
     Scenario: Retrieve first page of users
       Given the API is available
       When I request the first page of users
       Then I should receive a 200 status code
       And the response should contain a list of users
   
     Scenario: Retrieve a single user by ID
       Given the API is available
       When I request user with ID 2
       Then I should receive a 200 status code
       And the response should contain the user's details
   
     Scenario: Create a new user
       Given the API is available
       When I submit a request to create a new user
       Then I should receive a 201 status code
       And the response should contain the user's ID
   

6. package.json的devDependencies：

   {
     "devDependencies": {
       "cypress": "^13.12.0",
       "cypress-cucumber-preprocessor": "^4.3.1"
     }
   }
   

解决方案 #

问题根源是Cypress 10+版本已废弃旧的plugins/index.js配置方式，且cypress-cucumber-preprocessor需要配合正确的预处理器处理.feature文件，按以下步骤修复：

1. 更新cypress.config.js配置 #

替换原有JSON格式配置为JavaScript格式，集成cucumber预处理器：

const { defineConfig } = require('cypress');
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const { addCucumberPreprocessorPlugin } = require('cypress-cucumber-preprocessor');
const createEsbuildPlugin = require('cypress-cucumber-preprocessor/esbuild');

module.exports = defineConfig({
  baseUrl: "https://reqres.in/api",
  e2e: {
    specPattern: "**/*.feature",
    async setupNodeEvents(on, config) {
      await addCucumberPreprocessorPlugin(on, config);
      on(
        'file:preprocessor',
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );
      return config;
    },
    // 若步骤定义仍在旧的integration目录，添加此配置指定路径
    stepDefinitions: "cypress/integration/step_definitions/**/*.js"
  },
});

2. 安装必要依赖 #

安装esbuild相关预处理器包：

npm install --save-dev @bahmutov/cypress-esbuild-preprocessor esbuild

3. 删除旧插件文件 #

删除cypress/plugins/index.js，Cypress 10+不再使用该文件。

4. 验证目录结构（可选） #

Cypress 10+默认测试目录为e2e，若要保持原有integration目录，需确保stepDefinitions配置正确指向该路径；也可将integration目录下的内容迁移到e2e目录，适配新版本默认结构。

5. 可选：添加package.json配置 #

在package.json中添加cucumber预处理器的额外配置，明确步骤定义路径：

{
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "cypress/integration/step_definitions/"
  }
}

完成以上步骤后，重新运行Cypress即可解决Webpack编译错误。

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