mammadataeicypress-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.
Why?!
- 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
What about @cypress/vite-dev-server?!
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:
npm install --save-dev cypress-vite
yarn add --dev cypress-vite
pnpm add --save-dev cypress-viteUsage
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())
}Configuration
You can pass a Vite config to the vitePreprocessor function:
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',
}),
)
},
},
})Debugging
Run your tests with the following environment variable to log the debugging output:
DEBUG=cypress-viteCredits
Thanks to Adam Lynch for inspiration and initial implementation.
License
Distributed under the MIT license.