Cypress 10 config file with Cucumber - cypress

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:
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
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
}
In your package.json, add:
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/e2e/path-to-step-definition/**/*.{js,ts}"
}
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”.
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}”].

Answer 3

In case anyone else gets to this solution but is using webpack and typescript I had to make a few tweaks to our existing tsconfig.json:
"esModuleInterop": false,
"noEmit": false,
Aside from that the Cypress 10 conversion tool and the examples from the #badeball/cypress-cucumber-preproccesor docs for webpack/ts were all I needed.