Cypress is an end-to-end and component testing framework that runs tests in a real browser. Cypress component testing supports both Webpack and Vite as its dev server bundler.

This guide configures an existing Cypress component testing setup in an Angular project to use Cypress's Vite bundler support instead of Webpack.

Installing the Vite plugin

First, install @analogjs/vite-plugin-angular as a dev dependency so Vite can compile Angular components:

npm install @analogjs/vite-plugin-angular --save-dev

Enter fullscreen mode

Exit fullscreen mode

Configuring Cypress

Next, Update cypress.config.ts at the project root to use the Vite bundler:

import { defineConfig } from ' cypress ' ; import angular from ' @analogjs/vite-plugin-angular ' ;

export default defineConfig ({ component : { devServer : { bundler : ' vite ' , // @ts-expect-error Cypress's public types do not yet pair `bundler: 'vite'` // with `framework: 'angular'`.…