Getting "Step implementation missing" issue in cypress-cumber-preprocessor (cypress version - 13.1.0 and cucumber preprocessor - 4.3.1)

Question

I have installed cucumber preprocessor by using :- npm install --save-dev cypress-cucumber-preprocessor.

Cypress Version :- 13.1.0 Cucumber Preprocessor Version :- 4.3.1

Below is my folder Structure :-

cypress.config.js

const cucumber = require('cypress-cucumber-preprocessor').default
const { defineConfig } = require("cypress")

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      on('file:preprocessor', cucumber())
    },
    specPattern: "cypress/e2e/*.feature",
  },
});

package.json

{
  "name": "cypress_cucumber_bdd",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cypress open"
  },
  "author": "sudeep mahato",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^13.1.0",
    "cypress-iframe": "^1.0.1"
  },
  "chromeWebSecurity": false,
  "dependencies": {
    "axios": "^1.5.0",
    "cypress-cucumber-preprocessor": "^4.3.1"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "step-definations": "cypress/e2e/hubspot",
    "cucumberJson": {
      "generate": "true",
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber"
  }
  }
}

hubspot.feature

Feature: Hubspot user interaction

want to see the demo

    Scenario: User should be able to browse the application
    Given context
    When event
    Then outcome



  hubspotSteps.js

import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
            
            Given("context", ()=>{
                cy.visit('https://www.hubspot.com');
            });
            
            When("event", ()=>{
                cy.get('#hs-eu-confirmation-button').click();
            });
            
            Then("outcome", ()=>{
                cy.get('.hsg-nav__link').eq(3).click();
            });

Config file and folder stracture

JSON file

Feature file

Steps

Error

Answer 1

The general pattern for step definition matching would be

{
  "stepDefinitions": [
    "cypress/e2e/[filepath]/**/*.{js,ts}",
    "cypress/e2e/[filepath].{js,ts}",
    "cypress/support/step_definitions/**/*.{js,ts}",
  ]
}

The hubspot part of the feature filename will be substituted into the pattern where the [filepath] placeholder is.

You can change up the pattern, but it should include the extension js in your case, and wildcards make it easier when you get larger test suites.