cypress-cucumber-preprocessor does not parse feature files

Question

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

Answer 1

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.