Vitest Angular 20 : le guide d'installation complet

Vitest Angular 20 : découvrez comment configurer Vitest avec Angular 20 pour des tests ultra-rapides et modernes. Ce guide complet vous accompagne étape par étape.

Avec Angular 20, le moment est parfait pour faire le grand ménage dans vos tests.

Objectif : sortir Karma et Jasmine, et passer à Vitest, rapide, moderne et compatible avec le nouveau mode zoneless.

Tu migres un projet existant ? On a un guide dédié aux équivalences Jasmine et au remplacement de Karma : Karma to Vitest.

Étape 1 - Désinstaller les anciennes dépendances

On commence par dire adieu aux outils historiques :

npm uninstall \
  @types/jasmine jasmine-core karma \
  karma-chrome-launcher karma-coverage \
  karma-jasmine karma-jasmine-html-reporter

ou

pnpm remove \
  @types/jasmine jasmine-core karma \
  karma-chrome-launcher karma-coverage \
  karma-jasmine karma-jasmine-html-reporter

Étape 2 - Installer Vitest et les plugins Angular

npm install -D \
  vitest jsdom \
  @analogjs/vitest-angular \
  @analogjs/vite-plugin-angular

ou

pnpm add -D \
  vitest jsdom \
  @analogjs/vitest-angular \
  @analogjs/vite-plugin-angular

Étape 3 - Créer le fichier vitest.config.mts

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => ({
  plugins: [angular()],
  test: {
    globals: true,
    setupFiles: ['src/test-setup.ts'],
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

Étape 4 - Ajouter src/test-setup.ts

Ce fichier initialise l'environnement de test une seule fois. Garde-le minimal : juste l'init via BrowserTestingModule / platformBrowserTesting (l'API moderne).

import '@analogjs/vitest-angular/setup-snapshots';
import '@angular/compiler';
import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { getTestBed } from '@angular/core/testing';

getTestBed().initTestEnvironment(
  BrowserTestingModule,
  platformBrowserTesting(),
);

Inutile d'envelopper provideZonelessChangeDetection() dans un @NgModule passé à initTestEnvironment. La façon idiomatique est de le fournir par test, dans le TestBed.configureTestingModule({...}) :

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

TestBed.configureTestingModule({
  providers: [provideZonelessChangeDetection()],
});

Mieux encore : pour rester iso avec ton app, repars de appConfig.providers (zoneless déjà inclus) comme point de départ à curer. On détaille ce pattern dans le guide config Vitest.

Étape 5 - Modifier tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "vitest/globals",
      "node"
    ]
  },
  "files": [
    "src/test-setup.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Étape 6 - Modifier angular.json

{
  "test": {
    "builder": "@analogjs/vitest-angular:test",
    "options": {
      "tsConfig": "tsconfig.spec.json",
      "assets": [
        {
          "glob": "**/*",
          "input": "public"
        }
      ],
      "styles": [
        "src/styles.css"
      ],
      "scripts": []
    }
  }
}

Trop long ? Voici un starter prêt à l'emploi

Pas envie de tout faire à la main ? Je t'ai préparé un starter :

github.com/GaetanRdn/angular-starter-v20

Il embarque Angular v20, Vitest, le mode zoneless et le setup complet, prêt à cloner.

Besoin d'un accompagnement pour apprendre à tester avec Angular et Vitest ?
Découvre notre module dédié aux tests