Tuto — tester des composants Angular zoneless avec Vitest

super-dev ✓

il y a 3 mois • 6 min de lecture • 1,4k lectures

Une app Angular zoneless n'a plus zone.js pour savoir quand la vue est stable — et c'est tant mieux pour les tests. Fini les fakeAsync / tick ésotériques : on attend explicitement que le rendu se stabilise. Voici comment tester un composant zoneless avec Vitest .

Configurer Vitest

Depuis Angular 21, le builder @angular/build:unit-test lance Vitest sans config séparée : tout vit dans angular.json . Le fichier de providers de test active le mode zoneless une fois pour toutes :

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

Piloter les inputs signal

Avec les input() signal, on ne réaffecte plus une propriété : on passe par componentRef.setInput() , puis on attend la stabilisation :

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

Remplacer fakeAsync par whenStable

Sans zone, fakeAsync / tick() n'ont plus de sens. La règle est simple : toute attente asynchrone se résout par await fixture.whenStable() , qui rend la main quand le change detection s'est stabilisé. C'est plus lisible et plus proche du vrai cycle de vie.

› avant : tick(); fixture.detectChanges();
› après : await fixture.whenStable();

Tester sans TestBed

Un computed() ou une fonction pure n'a pas besoin de TestBed du tout : on l'appelle directement, et le test est instantané. On réserve TestBed au rendu réel du template. Le guide de test Angular couvre les deux approches.

Le zoneless simplifie les tests : on n'attend plus une magie invisible, on attend une stabilité explicite . Un test qui passe veut alors dire ce qu'il prétend dire.

• super-dev — portfolio.app

// Continuer dans TUTO

⌥

Tuto — maîtriser le rebase interactif

5 min • 4,3k lectures

super-dev — full-stack

Configurer Vitest

Piloter les inputs signal

Remplacer fakeAsync par whenStable

Tester sans TestBed