Angular Stream
En direct le 31 mars à 18h30

Apprendre Angular en 1h

Je me donne un objectif: vous faire découvrir et apprendre Angular en 1 heure: composant, syntaxe dans les templates, les directives, les signaux, les routeurs, les services, l'injection de dépendances, les observables et les requêtes HTTP. Le nécessaire pour faire une application Angular !.

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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 :

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

2. Installation de Vitest

Installez les dépendances nécessaires :

bash
npm i @analogjs/platform -D

3. Configuration automatique

Angular CLI avec le plugin AnalogJS peut configurer automatiquement Vitest :

bash
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

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.

bash
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 :

ts
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.

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()
);
ts
/// <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',
    },
  };
});
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"
        }
      }
    }
  }
}
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"
  ]
}