How to get cypress-cucumber-preprocessor working with Quasar 2 (Vue 3) and Vite

I have set up a new project using Quasar 2 (Vue3) with Vite and Cypress 12.9.0. I am not using Typescript.

The default home.cy.js test supplied by the Quasar @quasar/testing-e2e-cypress@beta setup works correctly. :-)

I now want to add the @badeball/cypress-cucumber-preprocessor plugin so I have Cucumber BDD functionality.

In the @badeball/cypress-cucumber-preprocessor docs there are examples for various build platforms but none for Vite. Perhaps I am misunderstanding what I need?

This is the example cypress.config.js if I was using esbuild and I need to change that to use Vite. Of course this wont work, but is provided as an example starting point.

const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')

// FIX: This is the esbuild version, not Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');


module.exports = defineConfig({
  fixturesFolder: 'test/cypress/fixtures',
  screenshotsFolder: 'test/cypress/screenshots',
  videosFolder: 'test/cypress/videos',
  video: true,

  e2e: {
    async setupNodeEvents (on, config) {
      // 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",

        // FIX: This is the esbuild version, not Vite
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

      return config;
    },
    baseUrl: 'http://localhost:9000/',
    supportFile: 'test/cypress/support/e2e.js',
    specPattern: 'test/cypress/e2e/**/*.feature'
  }
});

Has anyone set this up with the Quasar Vite environment as described above?

Thanks! Murray

From here Why Vite

Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.

I ran up the sample Quasar app as you describe, the only difference was removing the braces for this import:

// cypress.config.js

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')

During install of either @badeball/cypress-cucumber-preprocessor or cypress-esbuild-preprocessor packages I had to install esbuild to overcome an error.

Converted home.cy.js to a feature:

// home.feature

Feature: quaser sample home
  Scenario: visiting the frontpage
    When I visit Quasar App
    Then I should see a search bar

// home.js

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

When("I visit Quasar App", () => {
  cy.visit("/");
});

Then("I should see a search bar", () => {
  cy.title().should("include", "Quasar");
})

which ran ok

I'm not sure about the Quasar-Cypress add-on, if that entails some other setup. But "Normal" cucumber in e2e mode seems to work ok.

There is an issue on @badeball/cypress-cucumber-preprocessor where he seems to say that Vite + component testing isn't possible. I haven't dived into that rabbit hole, as you seem to be aiming for e2e testing only.