Cypress 测试 - 在 typescript 中运行 cypress 测试时，Cucumber 功能文件给出错误“您可能需要适当的加载程序来处理此文件”

Question

我正在 cypress runner 中运行黄瓜功能文件。

db.feature

Feature: DB

    Scenario: db test
        When i try to connect to db
        Then i get the code

我的步骤定义如下

db.ts

import { Given, When, Then, Before } from "cypress-cucumber-preprocessor/steps";

When(/^i try to connect to db$/, () => {
  cy.task('log', 'This is the config task')

});

Then(/^i get the code$/, () => {
    return true;
});

我的 index.js plugins 文件夹下的文件是

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

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
};

module.exports = (on, config) => {
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
}

我遇到了一些使用 webpack-preprocessor 的解决方案，但我没有使用 webpack-preprocessor，而是使用 browserify-preprocessor 和 typescript。 （也尝试了 webpack-preprocessor，但无济于事。）

当我在 cypress runner 中运行它时，我收到以下错误

当我从index.js 文件中删除配置任务、记录并注释掉db.ts 文件中的cy.task 调用时，代码运行顺利。只有当我在index.js 文件中添加配置任务时，我才会收到以下错误。

Error: Webpack Compilation Error
./cypress/integration/db.feature 3:17
Module parse failed: Unexpected token (3:17)
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: DB
| 
>     Scenario: db test
|         When i try to connect to db
|         Then i get the code
    at Watching.handle [as handler] (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:464:33
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

这是我的 package.json

  "cypress-cucumber-preprocessor": {
    "cucumberJson": {
      "generate": true,
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber",
      "nonGlobalStepDefinitions": false,
      "nonGlobalStepBaseDir": "cypress/support/step_definitions"
    }
  },
  "dependencies": {
    "cosmiconfig": "^7.0.1"
  },
  "devDependencies": {
    "@cypress/browserify-preprocessor": "^3.0.2",
    "@cypress/webpack-preprocessor": "^5.11.1",
    "@types/cypress-cucumber-preprocessor": "^4.0.1",
    "cypress": "^9.5.3",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "typescript": "^4.6.3"
  }

Answer 1

修复是在与 browserify 相同的 module.export 下自定义任务。 index.js 文件中有两个不同的 module.export 导致问题。

这是我最后的index.js 文件

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

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
};

Answer 2

我遇到了同样的问题，但在我的情况下，解决方案是将 plugin/index.js 的内容从 cypress.config.ts 文件传递​​到 setupNodeEvents。

我使用的是 cypress 10.0.0 版本，基于官方 documentation，插件文件已被弃用。

  e2e: {
    setupNodeEvents(on, config) {
      const cucumber = require('cypress-cucumber-preprocessor').default
      const browserify = require('@cypress/browserify-preprocessor');
      const options = {
        ...browserify.defaultOptions,
        typescript: require.resolve('typescript'),
      };
      on('file:preprocessor', cucumber(options));
    },
   ...
  }