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

Question

I am running a cucumber feature file in a cypress runner.

db.feature

Feature: DB

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

My step definitions are as follows

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;
});

my index.js file under plugins folder is

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
    },
  })
}

I have come across some solutions which use webpack-preprocessor but i am not using webpack-preprocessor but instead using browserify-preprocessor with typescript. (Gave the webpack-preprocessor a try as well but to no avail.)

When i run this in the cypress runner i get the following error

When i remove the config task, log, from the index.js file and comment out the cy.task call in the db.ts file the code works smoothly. Its only when i add a config task in the index.js file that i get the following error.

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)

This is my 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

I faced the same issue, but in my case the solution was to pass the content of the plugin/index.js into setupNodeEvents from cypress.config.ts file.

I'm using cypress 10.0.0 version and based on the oficial documentation , the plugins file was deprecated.

  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));
    },
   ...
  }

Answer 2

The fix was having the custom task under the same module.export as the browserify. Having two differed module.export in the index.js file caused issue.

This is my final index.js file

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