cypress-cucumber-preprocessor 不解析功能文件

Question

我一直在尝试使用 cypress-cucumber-preprocessor 和 cypress 来添加 BDD 的功能。

我已按照此链接中提到的安装步骤进行操作，但在运行测试时出现以下错误。 它不解析功能文件。

Error: Webpack Compilation Error

./cypress/e2e/login.feature 1:15 模块解析失败：意外令牌 (1:15) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。 见https://webpack.js.org/concepts#loaders

Answer 1

我遇到了同样的问题，这是因为我安装了旧版本的软件包。 这是您需要做的：

# if you have the old version installed
npm uninstall cypress-cucumber-preprocessor

npm install @badeball/cypress-cucumber-preprocessor

您可以在包的存储库中找到快速入门文档。 我正在尝试将 Vue3 与 Webpack 一起使用，因此我遵循了提供的 webpack 特定示例，该示例让我安装了 Cypress Webpack 预处理器：

npm install @cypress/webpack-preprocessor

这是我必须做一些不同的事情的地方。 此存储库在 Typescript 中，但我当前的存储库不是。 所以我将TypeScript cypress.config.ts 文件转换为 vanilla JavaScript 配置。 这最终为我工作：

// ./cypress.config.js
const { defineConfig } = require('cypress');
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');

async function setupNodeEvents(on, config) {
  await addCucumberPreprocessorPlugin(on, config);

  const options = {
    webpackOptions: {
      module: {
        rules: [
          {
            test: /\.feature$/,
            use: [
              {
                loader: '@badeball/cypress-cucumber-preprocessor/webpack',
                options: config,
              },
            ],
          },
        ],
      },
    },

  };

  on('file:preprocessor', webpackPreprocessor(options));

  return config;
}

module.exports = {
  default: defineConfig({
    e2e: {
      specPattern: '**/*.feature',
      supportFile: false,
      setupNodeEvents,
    },
  }),
  setupNodeEvents,
};

祝你好运——让我知道这是否需要澄清。