cypress-vite

Run Cypress specs using Vite

Introduction

The cypress-vite plugin is a Cypress preprocessor
that allows you to transform and run Cypress e2e specs using
Vite.

$3

- Vite is faster than webpack
- Using same configuration and environment both for development and testing
- Using Vite config for running e2e tests, no need for re-configuring aliases,
etc. for webpack
- Using vite specific features like plugins and virtual imports, import.meta,
etc. in e2e tests

$3

The official @cypress/vite-dev-server package is for
cypress component testing
that creates a vite dev server for mounting and testing React and Vue
components.

The cypress-vite is for compiling and running E2E specs. Neither replaces the
other, but you can combine them to use vite both for component and E2E testing.

Installation

Install the cypress-vite plugin:

``shell
npm install --save-dev cypress-vite

yarn add --dev cypress-vite

pnpm add --save-dev cypress-vite
`

Usage

For Cypress 10+, add the following to your cypress.config.ts file:

`typescript
import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
e2e: {
setupNodeEvents(on) {
on('file:preprocessor', vitePreprocessor())
},
},
})
`

For Cypress 9 and earlier, add the following to your cypress/plugins/index.js
file:

`typescript
const vitePreprocessor = require('cypress-vite')

/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
on('file:preprocessor', vitePreprocessor())
}
`

$3

You can pass a Vite config to the vitePreprocessor function:

`typescript
import path from 'path'
import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
e2e: {
setupNodeEvents(on) {
on(
'file:preprocessor',
vitePreprocessor({
configFile: path.resolve(__dirname, './vite.config.ts'),
mode: 'development',
}),
)
},
},
})
`

$3

Can speed up preprocessing by performing one overall Vite preprocessing build
before all specs are ran. (Does not work in watch mode)

`typescript
import { getVitePrebuilder } from 'cypress-vite'

const { vitePrebuild, vitePreprocessor } = getVitePrebuilder()

export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('before:run', (details) => vitePrebuild(details, config))
on('file:preprocessor', vitePreprocessor)
},
},
})
`

Debugging

Run your tests with the following environment variable to log the debugging
output:

`bash
DEBUG=cypress-vite
``

Credits

Thanks to
Adam Lynch
for inspiration and initial implementation.

License

Distributed under the MIT license.