BDD with Cypress & Vite (Vue 3) & Cucumber

Question

I've currently managed to implement Cucumber BDD tests within a Vitejs + Vue 3 as follows:

I start and run the development server with:

$ yarn dev

And then in a separate window I run the Cypress test runner:

$ yarn cy:run

Which corresponds to:

  ...,
  "scripts": {
    ...
    "cy:run": "cypress run -q",
    ...
  },
  ...

In my package.json. The output of this, is 1 test passing.

So far, so good. I then came across the @cypress/vite-dev-server package, and implemented it with the cucumber preprocessor inside /cypress/plugins/index.ts as follows:

/// <reference types="cypress" />
const path = require('path')
const { startDevServer } = require('@cypress/vite-dev-server')
const browserify = require('@cypress/browserify-preprocessor')
const cucumber = require('cypress-cucumber-preprocessor').default

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  on('dev-server:start', options => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts')
      }
    })
  })

  const cucumberOptions = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript')
  }

  on('file:preprocessor', cucumber(cucumberOptions))

  return config
}

So, it looks like the @cypress/vite-dev-server package doesn't accept what I am trying to do with Cypress & Cucumber.

Has anyone managed to get Cypress & Cucumber BDD working with Vite in a seamless fashion?

I've also looked at the wait-on module, running the following:

yarn dev & wait-on http://localhost:8099

But it doesn't seem to be waiting, only the Vite server runs? So I can't then run the cypress command I need...

Answer 1

The @cypress/vite-dev-server is for component testing, not e2e testing. The cypress-cucumber-preprocessor on the other hand is for compiling e2e specs. In e2e testing, the app runs independently from tests, so you can use vite for running the dev server, but it has nothing to do with tests. If you want to use vite config for compiling tests you can use cypress-vite instead of cypress-cucumber-preprocessor .