cypress-cucumber-preprocessor 的 Webpack 编译错误

Question

错误信息：Webpack编译错误 模块解析失败：意外的标记 (1:15) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders

背景： 我已经安装了黄瓜包（npm install --save-dev cypress-cucumber-preprocessor） 我已更新我的 cypress/plugins/index.js 文件以将 Cypress 配置为使用 cypress-cucumber-preprocessor。

const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  on('file:preprocessor', cucumber());
};

我还修改了我的 cypress.config.js 文件以正确指定 specPattern，以便 Cypress 查找并运行我的 .feature 文件。

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

我的代码文件目录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');
  });
});

我的功能文件目录cypress\integration eatures\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

Package.json

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

Answer 1

cucumber 版本已过时，与当前版本的 Cypress 不兼容。

要安装的正确版本是 https://github.com/badeball/[电子邮件受保护]。

较新的黄瓜包需要此处所示的配置之一。如果您不知道哪一个，cypress-cucumber-preprocessor/examples /webpack-cjs/ 可能是最好的尝试。

此外，由于您有

cypress/plugins/index.js

，看起来您已经从早期版本升级了 Cypress。

cypress.config.js

看起来只是

cypress.json

重命名，这不起作用，但您可以从上面提到的存储库复制 Badeball 的示例配置。