Run Cypress specs using Vite
The cypress-vite
plugin is a Cypress preprocessor
that allows you to transform and run Cypress e2e specs using
Vite.
- 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
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.
Install the cypress-vite
plugin:
npm install --save-dev cypress-vite
yarn add --dev cypress-vite
pnpm add --save-dev cypress-vite
For Cypress 10, add the following to your cypress.config.ts
file:
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:
const vitePreprocessor = require('cypress-vite')
/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
on('file:preprocessor', vitePreprocessor())
}
You can simply pass the vitePreprocessor
function the path to your Vite config
file:
import path from 'path'
import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'
export default defineConfig({
e2e: {
setupNodeEvents(on) {
on(
'file:preprocessor',
vitePreprocessor(path.resolve(__dirname, './vite.config.ts')),
)
},
},
})
Thanks to Adam Lynch for inspiration and initial implementation.
Distributed under the MIT license.