The proper way to install and configure @badeball/cypress-cucumber-preprocessor with TypeScript and Cypress 10+

Question

I am trying to implement cypress-cucumber-preprocessor for Cypress 11 with TypeScript, but I am unsure what I miss. Here are the steps that I do:

1. Install it with the following command:

npm install @badeball/cypress-cucumber-preprocessor

2. Here is my problem. I am unsure how to implement the plugin inside the "cypress.config.ts" file. The issue is that I am still using the workaround for old implemented plugins with 'return require('./cypress/plugins/index.js')(on, config)'. Is there a way to use both implementations (one for calling the 'index.js' file and the second for adding the cypress-cucumber-preprocessor plugin)? I am not sure how to process it.

import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";

export default defineConfig({
  projectId: '7emkc5',
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/report/mochawesome-report',
    overwrite: false,
    html: true,
    json: true,
    timestamp: 'dd-mm-yyyy_HH-MM-ss',
  },
  chromeWebSecurity: false,
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require('./cypress/plugins/index.js')(on, config)
    },
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
  },
})

I am using the last version of Cypress 11.1.0 and typescript.

Answer 1

Just follow the guide to install TS https://docs.cypress.io/guides/tooling/typescript-support#Install-TypeScript

then, paste this https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md in your cypress.config.ts

install bahmutov lib too:

npm i @bahmutov/cypress-esbuild-preprocessor    

this works for me... good luck!

Answer 2

Here is the clean flow to add the plugin to Cypress 10+ with TypeScript:

1. Install NodeJS (supported version from Cypress).
2. Install Cypress.
3. Install/add TypeScript support for Cypress .
4. Add @bahmutov/cypress-esbuild-preprocessor plugin to the project.
5. Add @badeball/cypress-cucumber-preprocessor plugin to the project.
6. Add the e xample setup to the cypress.config.ts class.

However, now I have a different problem. It seems that I am not able to add some plugins to the 'setupNodeEvents' method. I ask a new question here .