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 :
✅ Exit Karma et Jasmine
✅ Place à Vitest, rapide, moderne et compatible avec le nouveau mode zoneless

É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

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

// Pour éviter de le faire dans chaque test
@NgModule({
  providers: [provideZonelessChangeDetection()],
})
class ZonelessModule {
}

getTestBed().initTestEnvironment(
[BrowserTestingModule, ZonelessModule],
platformBrowserTesting(),
);

É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

✅ Angular v20
✅ Vitest ultra rapide
✅ Tests zoneless
✅ Setup prêt à l’emploi

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