Cypress：您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。

Question

我是一名自动化工程师，试图在现有的React应用程序中配置Cypress测试，但我一直收到以下错误消息：

./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

我的功能文件位于： /Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/googleSearch.feature

我的步骤文件位于： /Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/spec/googleSearch.spec.js

我的插件/index.js 文件含有以下内容：

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

而我的 package.json 文件有这些版本：

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

我的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",
    },
});

这是我的Github项目链接: https://github.com/francislainy/hello-talk-web/tree/cucumber 谢谢。

更新

我在项目根目录下创建了 webpack.config.js 文件，但仍然出现相同的错误。

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

- Francislainy Campos

---

我有点迷糊，你是否在使用 https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md 上的 cypress-cucumber-preprocessor？ - Wandrille

要配置Cypress，我邀请您检查实现它的这个存储库https://github.com/wandri/chat-spring-kafka-angular-react-vue - Wandrille

使用npm install --save-dev cypress cypress-cucumber-preprocessor命令安装了Cypress Cucumber处理器。 - Francislainy Campos

我现在尝试了您建议的另一个预处理器，但是错误仍然相同。 - Francislainy Campos

cypress-cucumber-preprocessor 不再更新。该软件包已迁移到 github.com/badeball/cypress-cucumber-preprocessor。请使用它。 - Wandrille

我也遇到了同样的错误。 - Francislainy Campos

Answer 1

您有一个需要更新的“混合”系统，尽管我建议从头开始以使其更容易。

• plugins/index.js 这是 Cypress 9 设置中不再使用的内容。您可以使用它，但为什么要让生活变得困难呢？

• cypress-cucumber-preprocessor 已经过时，请删除并安装 github.com/badeball/cypress-cucumber-preprocessor

• github.com/badeball/cypress-cucumber-preprocessor 的配置在 cypress.config.js 中，并在文档中给出。我推荐 this one

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

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

  on(
    "file:preprocessor", createBundler({
      plugins: [createEsbuildPlugin.default(config)],
    })
  );

  return config;
}

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
})

• 添加依赖项@bahmutov/cypress-esbuild-preprocessor

- Ine Wilmann

---

顺便说一句，我也需要将我的步骤定义放在支持文件夹里。我在这里添加了所有的代码和示例，加载谷歌页面以备其他人可能会用到。https://github.com/francislainy/debug-cypress - Francislainy Campos