Using Cypress Component Testing with Angular and Vite

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

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'`.
      framework: 'angular',
      viteConfig: {
        plugins: [angular({ tsconfig: 'tsconfig.cypress.json' })],
      },
    },
    specPattern: 'src/**/*.cy.ts',
    supportFile: 'cypress/support/component.ts',
    indexHtmlFile: 'cypress/support/component-index.html',
  },
});

Remove any existing Webpack-specific options from the component config.

Updating the support file

Next, update cypress/support/component.ts to import the matching mount adapter. For zoneless projects:

import '@angular/compiler';
import { mount } from 'cypress/angular-zoneless';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

For zone-based projects:

import 'zone.js';
import 'zone.js/testing';
import '@angular/compiler';
import { mount } from 'cypress/angular';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

For zoneless projects:

import '@angular/compiler';
import { mount } from 'cypress/angular';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

Configuring TypeScript

Ensure tsconfig.cypress.json at the project root matches the following:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/cypress",
    "target": "es2022",
    "types": ["cypress", "node"],
    "noPropertyAccessFromIndexSignature": false
  },
  "include": ["src/**/*.ts", "cypress/**/*.ts"],
  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts"]
}

Running tests

Your existing Cypress scripts work without changes:

npm run cypress:open
npm run cypress:run

The dev server now uses Vite, and your existing component specs run unchanged.

Conclusion

With Vite powering the dev server, your specs benefit from faster cold starts and HMR while keeping the Cypress features you rely on — real browser execution, time-travel debugging, automatic retries, cy.intercept network stubbing, and the interactive runner.

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and Brandon Roberts on Bluesky, and subscribe to my YouTube Channel for more content!

推荐订阅源

DEV Community