Cypress-Tests mit Angular und Vite: So beschleunigen Sie Komponententests

Die Kombination aus Cypress, Angular und Vite optimiert den Entwicklungsworkflow deutlich. Während Cypress bereits als zuverlässiges Testframework für End-to-End- und Komponententests gilt, ermöglicht die Integration von Vite als Bundler eine spürbare Performance-Steigerung. Besonders Entwickler, die mit Angular arbeiten, profitieren von schnelleren Cold Starts und Hot Module Replacement (HMR) – ohne auf die bewährten Cypress-Features wie Echtzeit-Browserausführung oder automatische Retries verzichten zu müssen.

Vite als Bundler für Cypress-Komponententests einrichten

Die Umstellung von Webpack auf Vite erfordert zunächst die Installation des offiziellen Angular-Plugins für Vite. Dieses Plugin übernimmt die Kompilierung der Angular-Komponenten und stellt sie dem Cypress-Testserver zur Verfügung. Die Installation erfolgt über die Befehlszeile:

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

Anschließend muss die Konfigurationsdatei cypress.config.ts im Projektstamm angepasst werden. Hier wird Vite explizit als Bundler für die Komponententests aktiviert und mit den notwendigen Angular-Plugins konfiguriert:

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

export default defineConfig({
  component: {
    devServer: {
      bundler: 'vite',
      framework: 'angular',
      viteConfig: {
        plugins: [
          angular({
            tsconfig: 'tsconfig.cypress.json'
          })
        ],
      },
    },
    specPattern: 'src/**/*.cy.ts',
    supportFile: 'cypress/support/component.ts',
    indexHtmlFile: 'cypress/support/component-index.html',
  },
});

Wichtig ist, dass alle Webpack-spezifischen Einstellungen aus der Konfiguration entfernt werden, um Konflikte zu vermeiden.

Unterstützung für zonale und zonlose Projekte konfigurieren

Je nach Projektkonfiguration – insbesondere bei der Verwendung von Angulars Zone.js – müssen die Unterstützungskomponenten in der Datei cypress/support/component.ts angepasst werden.

Für zonenlose Projekte lautet die Konfiguration:

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

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

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

Für zonenbasierte Projekte wird zusätzlich Zone.js eingebunden:

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);

Diese Anpassungen stellen sicher, dass die Komponententests sowohl in zonellen als auch in zonlosen Umgebungen korrekt ausgeführt werden.

TypeScript-Konfiguration für Cypress optimieren

Damit die Tests fehlerfrei ablaufen, muss die TypeScript-Konfiguration für Cypress (tsconfig.cypress.json) im Projektstamm folgende Einstellungen enthalten:

{
  "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"]
}

Diese Konfiguration stellt sicher, dass alle notwendigen Typen für Cypress-Tests verfügbar sind und die Kompilierung der Tests ohne Fehler erfolgt.

Tests ausführen und Performance testen

Nach der Umstellung auf Vite bleiben die bestehenden Cypress-Befehle unverändert. Die Ausführung der Tests erfolgt weiterhin mit:

• npm run cypress:open für den interaktiven Testmodus
• npm run cypress:run für die Ausführung im Terminal

Die Vorteile von Vite zeigen sich bereits beim ersten Start: Die Cold Starts der Tests werden deutlich beschleunigt, und Hot Module Replacement (HMR) ermöglicht ein nahtloses Aktualisieren der Tests während der Entwicklung. Gleichzeitig bleiben alle Cypress-Features wie Echtzeit-Browserausführung, Time-Travel-Debugging und automatische Retries vollständig erhalten.

Fazit: Schneller testen mit Angular und Vite

Die Integration von Vite in Cypress-Komponententests für Angular-Projekte ist ein Game-Changer für Entwickler, die Wert auf Performance und Effizienz legen. Durch die schnellere Ausführung der Tests und die nahtlose Integration in den Angular-Workflow können Teams ihre Entwicklungszyklen verkürzen, ohne Kompromisse bei der Testqualität einzugehen. Wer bisher auf Webpack gesetzt hat, sollte die Umstellung auf Vite in Betracht ziehen – besonders in Projekten mit vielen Komponententests.

Die Zukunft der Angular-Testautomatisierung scheint damit klarer: Schnelligkeit trifft auf Zuverlässigkeit, und das ohne zusätzliche Konfiguration. Probieren Sie es aus und erleben Sie selbst, wie viel Zeit Sie in Ihrem nächsten Projekt sparen können.