Cypress - 升级 cucumber 预处理器后无法运行测试

Question

在 package.json 中，我使用了这些版本的 cucumber 和 esbuild with cypress：

  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}"
  },
  "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^11.5.1",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
    "cypress": "^10.7.0"
  },

在cypress.config.js我有：

  e2e: {
    baseUrl: 'http://localhost:4200',
    specPattern: 'cypress/e2e/features',
    setupNodeEvents(on, config) {
      const createEsbuildPlugin =
      require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
      const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
      require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin

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

现在，这工作正常，没有问题。 但是在我将 cucumber 预处理器升级为：

"@badeball/cypress-cucumber-preprocessor": "^15.1.2",

和赛普拉斯版本到12.3.0

然后运行npm install并启动cypress test runner ，我无法运行任何测试。

启动测试运行程序后，我可以在那里看到我所有的测试，但是在我单击任何测试后，出现错误：赛普拉斯无法检测到此文件中的测试，并且：

Error: Build failed with 1 error:
node_modules/common-ancestor-path/index.js:17:37: ERROR: [plugin: feature] Reduce of empty array with no initial value
    at failureErrorWithLog (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1605:15)
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1251:28
    at runOnEndCallbacks (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1034:63)
    at buildResponseToResult (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1249:7)
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1358:14
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:666:9
    at handleIncomingPacket (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:763:9)
    at Socket.readFromStdout (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:632:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

当我降级 cucumber 预处理器和赛普拉斯时，它又开始工作了。 我应该在配置文件中更改什么或有什么问题吗？

Answer 1

我尝试了两个版本， "@badeball/cypress-cucumber-preprocessor": "^15.1.2"工作正常，但我确实必须根据 badeball 回购上的示例修改您的配置：

• 等待addCucumberPreprocessorPlugin()调用
• 传递on, config参数
• 在setupNodeEvents()结束时返回配置
• 将通配符放入specPattern （可以解释 test-not-found 错误）

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

module.exports = defineConfig({
  e2e: {
    // baseUrl: 'http://localhost:4200',
    specPattern: "**/*.feature",

    // prefix async
    async setupNodeEvents(on, config) {
      const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
      const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')

      // await here
      await require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(on, config)

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

      // return any mods to Cypress
      return config
    }
  },
});

Answer 2

因此，由于我在使用 esbuild 时仍然遇到问题，因此我将其替换为 browserify：

const { defineConfig } = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {

  await preprocessor.addCucumberPreprocessorPlugin(on, config);
  on("file:preprocessor", browserify.default(config));

  return config;
}

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
  
});

所以现在 package.json 看起来像：

"@badeball/cypress-cucumber-preprocessor": "^15.1.2",
"@cypress/browserify-preprocessor": "^3.0.2",
"cypress": "^12.3.0",

我还需要替换步骤定义 js 文件中的所有 AND 命令，例如：

前：

import { And, Then } from "@badeball/cypress-cucumber-preprocessor"
And("I select Checkbox", () => {}

现在：

import { When, Then } from "@badeball/cypress-cucumber-preprocessor"
When("I select Checkbox", () => {}

As And应该在特征文件中使用，并且仅在步骤定义中使用When, Then 。

使用此配置，最新的 cypress 可与最新的 cucumber 和 browserify 一起使用。