Cypress Cucumber tests fail to launch

No matter what I do, the test crashes. It’s worth to mention that this test actually won’t pass, but at this moment it won’t even attempt to run. Here is the error:

Step implementation missing for "I navigate to the website".

We tried searching for files containing step definitions using the following search pattern templates:

  - cypresse2efeatures/[filepath]/*/.{js,mjs,ts,tsx}

  - cypresse2efeatures/[filepath].{js,mjs,ts,tsx}

  - cypress/support/step_definitions/*/.{js,mjs,ts,tsx}

These templates resolved to the following search patterns:

  - cypresse2efeatureslogin*.{js,mjs,ts,tsx}

  - cypresse2efeatureslogin.{js,mjs,ts,tsx}

  - cypresssupportstep_definitions*.{js,mjs,ts,tsx}

These patterns matched no files containing step definitions. This almost certainly means that you have misconfigured stepDefinitions.

You can implement it using the suggestion(s) below.

  Given("I navigate to the website", function () {

    return "pending";

  });

login.feature in cypresse2efeatures

Feature: Test login

    I want to login into the website

    Scenario: Login as existing user
        Given I navigate to the website
        When I enter user name and password
        When User click on sign in button
        Then Validate the title after login

Test – website.js in cypresse2efeatures. Renaming that file or moving it around to different directories doesn’t fix the issue.

import { When, Then, Given } from "@badeball/cypress-cucumber-preprocessor";

Given("I naviagate to the website", () => {
    cy.visit("https://www.saucedemo.com/")
});

When("I enter user name and password", () => {
    cy.get("#username").type("standard_user");
    cy.get("#password").type("secret_sauce");
});

When("User click on sign in button", () => {
    cy.get("#SubmitLogin").click();
});

Then("Validate the title after login", () => {
    cy.title().should("eq", "My account - My Store")
});

Cypress.config.js

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) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  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: {
    setupNodeEvents,
    specPattern: "cypress/e2e/features/*.feature"
  },
});

Almost surely something is wrong with configuration. It’s quite baffling but almost all tutorials how to connect Cucumber to Cypress are incorrect, and ask you to access non existing files. I have managed to found one that actually is correct, but as you can see it doesn’t really work. I’m out of ideas, I don’t know how to use this framework, especially when there are no tutorials around.