Migration des tests unitaires vers Vitest dans Angular

Avec l'arrivée de Vite dans Angular 17, il est possible d'utiliser Vitest pour les tests unitaires. Pourquoi ? Parce que Vitest est un framework de test moderne et ultra-rapide compatible avec Vite. Il est donc plus performant que Karma. La courbe d'apprentissage est faible car ça s'appuie sur les concepts de Jest.

Avantages

• Démarrage ultra-rapide des tests
• Compatible nativement avec Vite
• Syntaxe moderne et intuitive
• Support natif de TypeScript
• Interface en ligne de commande claire

Migration vers Vitest

1. Désinstallation de Karma

Commençons par retirer Karma et ses dépendances :

npm uninstall karma karma-chrome-launcher karma-jasmine-html-reporter karma-coverage karma-jasmine

2. Installation de Vitest

Installez les dépendances nécessaires :

npm i @analogjs/platform -D

3. Configuration automatique

Angular CLI avec le plugin AnalogJS peut configurer automatiquement Vitest :

ng g @analogjs/platform:setup-vitest --project my-app

Fichiers générés

Vous pouvez voir les fichiers générés dans la section Ce qui a été généré.

3. Ajouter dans package.json

"scripts": {
  "test": "vitest"
}

Lancez ensuite les tests avec la commande npm test.

Créer un fichier de tests.

La création des tests ne change pas mais vous pouvez profiter des fonctionnalités de Vitest. Par exemple, vous pouvez l'utiliser avec @vitest/ui pour un affichage visuel des tests.

npm i @vitest/ui -D

Lancez les tests avec la commande npx vitest --ui.

Pour créer par exemple un espion sur une fonction, vous pouvez utiliser la syntaxe suivante :

const spy = vi.fn()

Pour utiliser vitest, lisez la documentation.

---

Ce qui a été généré

Les commandes de ci-dessus ont généré les fichiers suivants. Lisez les commentaires pour comprendre leur fonctionnement.

src/test-setup.ts

/**
 * Ce fichier est le point d'entrée pour la configuration des tests avec Vitest.
 * Il initialise l'environnement de test Angular et configure les dépendances nécessaires.
 * Le code ci-dessous importe les modules essentiels et prépare l'environnement de test.
 */
import '@analogjs/vitest-angular/setup-zone';

import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { getTestBed } from '@angular/core/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

vitest.config.mts

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

// Importation du plugin Angular pour Vite
import angular from '@analogjs/vite-plugin-angular';

// Importation de la fonction defineConfig de Vite
import { defineConfig } from 'vite';

// Configuration de Vite
// La fonction defineConfig permet de définir la configuration avec l'aide de l'autocomplétion
export default defineConfig(({ mode }) => {
  return {
    // Configuration des plugins
    plugins: [
      // Utilisation du plugin Angular
      angular(),
    ],
    // Configuration spécifique pour les tests
    test: {
      // Cela évite de devoir faire des imports supplémentaires dans chaque test comme import { it } from 'vitest'
      globals: true,
      // Utilise jsdom pour simuler un environnement de navigateur
      environment: 'jsdom',
      // Fichier de configuration pour les tests
      setupFiles: ['src/test-setup.ts'],
      // Inclut tous les fichiers se terminant par .spec.ts
      include: ['**/*.spec.ts'],
      // Un reporter est un plugin qui permet de formatter les résultats des tests
      reporters: ['default'],
    },
    // Définition de variables globales
    define: {
      // Cette ligne permet à Vitest de fonctionner correctement en mode développement
      'import.meta.vitest': mode !== 'production',
    },
  };
});

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        // [...]
        "test": {
          "builder": "@analogjs/vitest-angular:test"
        }
      }
    }
  }
}

tsconfig.spec.json

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