BDD with Cypress & Vite (Vue 3) & Cucumber

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 ...