2

I have been trying to use cypress-cucumber-preprocessor with cypress to add feature of BDD.

I have followed the installation steps as mentioned in this link but while running the tests I am getting the below error. It does not parse the feature files.

Error: Webpack Compilation Error

./cypress/e2e/login.feature 1:15 Module parse failed: Unexpected token (1:15) 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

pratik nagariya
  • 574
  • 5
  • 21
  • https://github.com/badeball/cypress-cucumber-preprocessor/issues/722#issuecomment-1147591083 I'm trying to solve this as well, I found this GitHub issue. If I am able to solve it I will let you know – Austin R. Scott Jun 18 '22 at 21:32
  • Looks like badeball has published a fix here: https://github.com/badeball/cypress-cucumber-preprocessor/issues/722#issuecomment-1153256645 – Austin R. Scott Jun 18 '22 at 21:47

1 Answers1

4

I was having the same issue and it was because I had installed an old version of the package. Here's what you need to do:

# if you have the old version installed
npm uninstall cypress-cucumber-preprocessor

npm install @badeball/cypress-cucumber-preprocessor

You can find the quick start document at the repository for the package. I am trying to use Vue3 with Webpack, so I followed the webpack specific example provided which had me install the Cypress Webpack preprocessor:

npm install @cypress/webpack-preprocessor

This is where I had to do something differently. This repository is in Typescript but my current repository is not. So I converted the TypeScript cypress.config.ts file to a vanilla JavaScript configuration. This is what ended up working for me:

// ./cypress.config.js
const { defineConfig } = require('cypress');
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');

async function setupNodeEvents(on, config) {
  await addCucumberPreprocessorPlugin(on, config);

  const options = {
    webpackOptions: {
      module: {
        rules: [
          {
            test: /\.feature$/,
            use: [
              {
                loader: '@badeball/cypress-cucumber-preprocessor/webpack',
                options: config,
              },
            ],
          },
        ],
      },
    },

  };

  on('file:preprocessor', webpackPreprocessor(options));

  return config;
}

module.exports = {
  default: defineConfig({
    e2e: {
      specPattern: '**/*.feature',
      supportFile: false,
      setupNodeEvents,
    },
  }),
  setupNodeEvents,
};

Good luck—let me know if this needs clarification.

Austin R. Scott
  • 183
  • 8
  • R Scott Could you help with this issue >> https://stackoverflow.com/questions/74049214/migrating-cypress-test-from-old-version-to-latest-version-throws-error – soccerway Oct 14 '22 at 01:43