Cypress + Cucumber cannot detect stepDefinition

[BlackBearFTW]

Hi, I am trying to use cypress with @badeball/cypress-cucumber-preprocessor, I used the quickstart (using vite and react btw) but when I want to run an end to end test, it says no stepDefinition is found, even tho they are in the same folder:

├───e2e
│   └───duckduckgo
│           duckduckgo.feature
│           duckduckgo.ts
│
├───fixtures
│       example.json
│       users.json
│
├───screenshots
│   └───duckduckgo.feature
│           duckduckgo.com -- visiting the frontpage (failed).png
│
└───support
        commands.ts
        e2e.ts

duckduckgo.feature

Feature: duckduckgo.com
  Scenario: visiting the frontpage
    When I visit duckduckgo.com
    Then I should see a search bar

duckduckgo.ts

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

When("I visit duckduckgo.com", () => {
    cy.visit("https://www.duckduckgo.com");
});

Then("I should see a search bar", () => {
    cy.get("input").should(
        "have.attr",
        "placeholder",
        "Search the web without being tracked"
    );
});

config:

import { defineConfig } from "cypress";
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import { createEsbuildPlugin } from "@badeball/cypress-cucumber-preprocessor/esbuild";


export default defineConfig({
  experimentalStudio: true,
  e2e: {
    specPattern: "**/*.feature",
    baseUrl: 'http://localhost:5173',
    async setupNodeEvents(
        on: Cypress.PluginEvents,
        config: Cypress.PluginConfigOptions
    ): Promise<Cypress.PluginConfigOptions> {
      // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
      await addCucumberPreprocessorPlugin(on, config);


      on(
          "file:preprocessor",
          createBundler({
            // Typescript cannot match the esbuild inside the package with the official esbuild peer dependency.
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            plugins: [createEsbuildPlugin(config)],
          })
      );

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

tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@badeball/cypress-cucumber-preprocessor/*": ["./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"]
    }
  }
}

package.json

  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": [
      "cypress/e2e/[filepath]/**/*.{js,ts}",
      "cypress/e2e/[filepath].{js,ts}",
      "cypress/support/step_definitions/**/*.{js,ts}"
    ]
  },

[badeball]

It's difficult to say based on this information. Can you take a look at the esbuild-ts example (which works, tested in CI) and see if you're doing anything differently?

[BlackBearFTW]

You can look at my repository right here:

https://github.com/RM-DienstDuizend/DienstDuizend.SpaFrontend

[BlackBearFTW]

It's difficult to say based on this information. Can you take a look at the esbuild-ts example (which works, tested in CI) and see if you're doing anything differently?

I have checked it, I am doing the exact same thing

[badeball]

I have checked it, I am doing the exact same thing

Well, that's not exactly true. The config you've posted originally and the config I've referenced, doesn't match the config of your posted repository.

Let's get one thing straight and I believe this is relevant for you - just because you use Vite to build your frontend, that doesn't mean you need to use Vite to build Cypress' E2E tests. In fact, there's no E2E examples using Vite, so you can consider it to be unsupported. Use esbuild instead. Use the esbuild-ts example's cypress.config.ts.

I'm not going to execute your example repository locally - it would have to be more minimal and only contain the necessary modules to prove a point. I recommend to you, as I do with everybody, to take one of the example and modify it. That way, you have a minimal, reproducible example for me.

[BlackBearFTW]

I have found the issue, it was my machine, I was using [01] Web Project as a folder name in my project path, it didn't like that. I guess it doesn't handle special characters well.