⚡️ Angular 20 : Vitest natif (zoneless) - remplacez Jasmine/Karma

Arthur DREVOT — Sun, 31 Aug 2025 14:58:14 +0000

Pendant des années, les projets Angular ont utilisé Karma et Jasmine comme solution de test par défaut. C’est encore le cas aujourd’hui pour de nombreux projets, même si beaucoup de développeurs trouvent l’expérience lente et peu agréable. Certains ont adopté Jest comme alternative, mais son support officiel reste limité et pas totalement abouti.

Avec Angular 20, on entre dans une nouvelle étape : Karma peut désormais être remplacé nativement par un runner complet. Et ce runner, c’est Vitest, un framework moderne basé sur Vite, qui apporte rapidité, simplicité et une meilleure expérience développeur.

Personnellement, j’ai été bluffé par la vitesse d’exécution et la facilité de configuration : on a enfin un outil qui rend les tests unitaires aussi fluides que le développement.

✅ Pourquoi choisir Vitest ?

⚡️ Exécution ultra-rapide des tests (fini les minutes d’attente !)
🔗 Compatibilité native avec Vite
📝 Syntaxe moderne et intuitive, proche de Jest
📦 Support TypeScript intégré
🚀 Candidat naturel pour remplacer Karma (en attendant la décision officielle avec Angular 21)

🚀 Prérequis

Avant de commencer, assurez-vous d’avoir un projet Angular déjà créé et les bonnes versions installées :

Angular v20+
Node.js v20.19+

Ces versions garantissent la compatibilité avec Vite et donc avec Vitest.

🛠️ Étape 1 - Installer Vitest

Ajoutez Vitest et son environnement jsdom (simule un DOM dans Node.js, indispensable pour tester Angular) :

npm install --save-dev vitest jsdom

👉 C’est tout ! Pas besoin de passer par @analogjs ou des presets communautaires pour utiliser Vitest. Toute la configuration se fera nativement dans Angular 20.

🛠️ Étape 2 - Créer `src/test.ts` (globals + providers par défaut)

Ce fichier sert à deux choses :

déclarer les globals Vitest côté TypeScript/IDE ;
définir des providers de test partagés par défaut - ici le zoneless.

Créez src/test.ts avec le contenu suivant :

/// <reference types="vitest/globals" />

import { provideZonelessChangeDetection } from '@angular/core';

export default [
  provideZonelessChangeDetection(),
];

Pourquoi ce fichier ?

La directive /// <reference types="vitest/globals" /> donne la connaissance de describe, it, expect, etc. à TypeScript et à votre IDE.
Le tableau exporté est lu par le builder de tests (on le déclarera via providersFile à l’étape 3) pour appliquer ces providers à tous les tests.
provideZonelessChangeDetection() active la détection de changements sans zone.js

Vous pourrez enrichir ce tableau plus tard (ex. provideNoopAnimations(), provideHttpClientTesting(), etc.).

🛠️ Étape 3 - Configurer `angular.json` avec le builder unit-test (Vitest)

Éditez la cible test de votre projet dans angular.json pour utiliser le nouveau builder :

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "vitest",
    "buildTarget": "::development",
    "tsConfig": "tsconfig.spec.json",
    "providersFile": "src/test.ts"
  }
}

Ce que ça fait

@angular/build:unit-test : active le nouveau système de tests (expérimental) qui sait piloter Vitest.
runner: "vitest" : choisit Vitest (vous pouvez revenir à "karma" si besoin).
buildTarget: "::development" : réutilise votre config de build development pour exécuter les tests (vous pouvez créer un profil dédié ::testing si nécessaire).
tsConfig : pointe vers tsconfig.spec.json.
providersFile : charge vos providers globaux (ici, zoneless) et expose les globals Vitest à l’IDE.

🧹 Étape 4 - Supprimer Karma/Jasmine (fichiers + dépendances)

Objectif : retirer tout ce qui est lié à Karma/Jasmine pour éviter les conflits de types et alléger le projet.

Désinstaller les packages (adaptez selon votre projet) :

   npm remove --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine @types/jasminewd2

Supprimer les fichiers/configs Karma :
- karma.conf.js
- l’ancien src/test.ts de Karma (si présent) - à ne pas confondre avec le nouveau src/test.ts créé à l’étape 2.
Nettoyer TypeScript :
- vérifiez que tsconfig.spec.json ne contient plus "jasmine" dans compilerOptions.types.

▶️ Étape 5 - Lancer les tests

Dans ce setup “100% natif Angular 20 + Vitest”, exécutez simplement :

ng test

Vous obtenez une exécution rapide, un retour lisible, et un environnement DOM simulé grâce à jsdom.

🏁 Conclusion

Avec Angular 20, on peut enfin utiliser Vitest nativement : installation minimale (vitest + jsdom), un fichier src/test.ts pour les globals + providers (zoneless), la config angular.json avec le builder @angular/build:unit-test, et un simple ng test pour la suite. Plus besoin de presets communautaires - la configuration reste sobre, claire et durable.

Démo : https://github.com/ArthurDrevot/angular-vitest-zoneless

💬 Discutons !

Une question, un retour d’expérience, une astuce à partager ? Laissez un commentaire 👇

Et si vous voulez aller plus loin (coverage, UI, CI, ...), envoyez-moi un message : je publierai volontiers un guide “configuration avancée” sur le builder Vitest natif pour Angular.

DEV Community: Arthur DREVOT