Cypress 10 config file with Cucumber

Question

After I migrated Cypress to version 10, Cucumber preprocessor stopped to work. I have found some solutions that I implemented and I also installed the latest @badeball/cypress-cucumber-preprocessor.

Now I am stuck how to set up the cypress.config.js file, as the original plugins folder is deprecated.

In old index.js under plugin folder I had:

const cucumber = require("cypress-cucumber-preprocessor").default;

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on("file:preprocessor", cucumber());
...

Now the plugin setup should be in cypress-config.js:

 e2e: {
    baseUrl: 'http://localhost:4200',
    specPattern: 'cypress/e2e/features',
    setupNodeEvents(on, config) {

const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;

      on('file:preprocessor',   addCucumberPreprocessorPlugin(on, config));
    }

  },

but now I have an error in on('file:preprocessor', addCucumberPreprocessorPlugin()); that addCucumberPreprocessorPlugin is not a function. I know it is not, but how to correctly configure this section for cucumber? I did not find any info about this.

If I just remove the on('file:preprocessor', addCucumberPreprocessorPlugin(on, config));, after I execute the feature test file, I have this error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Answer 1

The pattern I'm using is

import { defineConfig } from "cypress";
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");

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

  // webpack config goes here if required
 
  return config;
}

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

You may need some webpack config as well, the repository has some examples here

---

Here's another config that's working for me

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");

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

  on(
    "file:preprocessor",
    createBundler({
      plugins: [createEsbuildPlugin.default(config)],
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

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

Answer 2

You can try this:

1. Install two dependencies @bahmutov/cypress-esbuild-preprocessor and @esbuild-plugins/node-modules-polyfill using:

npm install -D @bahmutov/cypress-esbuild-preprocessor
npm install -D @esbuild-plugins/node-modules-polyfill

2. In your cypress/plugin/index.js, remove:

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber()) //For cypress cucumber preprocessor
}

and Add,

//For Cucumber Integration
const createEsbuildPlugin =
  require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const nodePolyfills =
  require('@esbuild-plugins/node-modules-polyfill').NodeModulesPolyfillPlugin

const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin

module.exports = async (on, config) => {
  await addCucumberPreprocessorPlugin(on, config) // to allow json to be produced
  // To use esBuild for the bundler when preprocessing
  on(
    'file:preprocessor',
    createBundler({
      plugins: [nodePolyfills(), createEsbuildPlugin(config)],
    })
  )
  return config
}

3. In your package.json, add:

"cypress-cucumber-preprocessor": {
  "stepDefinitions": "cypress/e2e/path-to-step-definition/**/*.{js,ts}"
}

4. Next, in the step definition file replace import { Given, When, Then } from ‘cypress-cucumber-preprocessor/steps’ with import { Given, When, Then, And } from “@badeball/cypress-cucumber-preprocessor”.

5. For your feature files to be recognised by the cypress test runner, update the specPattern in cypress.config.js file to [“**/*.feature”, “cypress/e2e/**/*.cy.{js,jsx,ts,tsx}”].