Cypress Test - Cucumber feature files giving error "You may need an appropriate loader to handl-CodePudding

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"
  }

CodePudding user response：

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