Cypress 测试 - Cucumber 功能文件给出错误 "You may need an appropriate loader to handle this file" 而 运行 打字稿中的 cypress 测试

Question

我正在 运行在柏树中制作黄瓜功能文件 运行ner。

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插件文件夹下的文件是

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，而是使用带有 typescript 的 browserify-preprocessor。 （也尝试了 webpack-preprocessor 但无济于事。）

当我在柏树 运行 中 运行 时，出现以下错误

当我从 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.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.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.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.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\visha\AppData\Local\Cypress\Cache.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.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.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\visha\AppData\Local\Cypress\Cache.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.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.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:464:33
    at C:\Users\visha\AppData\Local\Cypress\Cache.5.3\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\visha\AppData\Local\Cypress\Cache.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
    },
  })
};