Tutorial — Zoneless Angular-Komponenten mit Vitest testen

super-dev ✓

vor 3 Monaten • 6 min Lesezeit • 1,4k Aufrufe

Eine zoneless Angular-App hat kein zone.js mehr, um zu wissen, wann die Ansicht stabil ist — und das ist gut so für die Tests. Schluss mit esoterischem fakeAsync / tick : man wartet explizit darauf, dass das Rendering sich stabilisiert. So testet man eine zoneless-Komponente mit Vitest .

Vitest konfigurieren

Ab Angular 21 startet der Builder @angular/build:unit-test Vitest ohne separate Konfiguration: alles lebt in angular.json . Die Test-Provider-Datei aktiviert den zoneless-Modus ein für allemal:

TypeScript
 1// src/test-providers.ts
 2import { provideZonelessChangeDetection } from '@angular/core';
 3
 4export const testProviders = [provideZonelessChangeDetection()];

Signal-Inputs steuern

Mit input() -Signalen weist man keine Eigenschaft mehr direkt zu: man verwendet componentRef.setInput() und wartet anschließend auf die Stabilisierung:

TypeScript
 1import { describe, expect, it } from 'vitest';
 2
 3it('rend le total', async () => {
 4  const fixture = TestBed.createComponent(CartComponent);
 5
 6  fixture.componentRef.setInput('items', [{ price: 10, quantity: 2 }]);
 7  await fixture.whenStable();
 8  expect(fixture.nativeElement.textContent).toContain('20');
 9});

fakeAsync durch whenStable ersetzen

Ohne Zone ergeben fakeAsync / tick() keinen Sinn mehr. Die Regel ist einfach: jedes asynchrone Warten wird durch await fixture.whenStable() aufgelöst, das die Kontrolle zurückgibt, sobald die Change Detection sich stabilisiert hat. Das ist lesbarer und näher am echten Lebenszyklus.

› vorher: tick(); fixture.detectChanges();
› nachher: await fixture.whenStable();

Ohne TestBed testen

Ein computed() oder eine reine Funktion benötigt überhaupt kein TestBed : man ruft sie direkt auf, und der Test ist sofort fertig. TestBed bleibt dem echten Template-Rendering vorbehalten. Der Angular-Testleitfaden behandelt beide Ansätze.

Zoneless vereinfacht Tests: Man wartet nicht mehr auf unsichtbare Magie, sondern auf eine explizite Stabilität . Ein bestandener Test bedeutet dann wirklich das, was er zu bedeuten vorgibt.

• super-dev — portfolio.app

// Weiter in TUTO

⌥

Tuto — Interaktives Rebase meistern

5 min • 4,3k Aufrufe

super-dev — full-stack

Vitest konfigurieren

Signal-Inputs steuern

fakeAsync durch whenStable ersetzen

Ohne TestBed testen