angular-template documentation

🧪 TESTS 🧪



VITEST VITEST

Activer le nouveau système de tests unitaires natif d'Angular. Ce builder moderne remplace l'ancienne stack (basée sur Karma) pour offrir une exécution nettement plus rapide et légère, tout en s'alignant sur l'architecture de build actuelle (esbuild). Il isole la compilation des tests via le fichier tsconfig.spec.json.

Etape 1 : Installer les librairies requises

Example :
pnpm add -DE vitest jsdom@latest
pnpm add -DE @angular/platform-browser-dynamic@latest
pnpm add -DE @analogjs/vite-plugin-angular@latest
pnpm add -DE @analogjs/vitest-angular@latest
pnpm add -DE @types/node@latest
pnpm add -DE vite-tsconfig-paths@latest

Etape 2 : Dans tsconfig.spec.json remplacer la configuration présente par celle-ci dans la propriété @compilerOptions.

Example :
"compilerOptions": {
  "outDir": "./out-tsc/spec",
  "rootDir": "./src",
  "module": "ESNext",
  "moduleResolution": "Bundler",
  "types": [
    "vitest",
    "vitest/globals",
    "vitest/importMeta",
    "vite/client",
    "node"
  ]
}

Etape 3 : Dans angular.json ajouter la propriété test dans @architect.

Example :
"test": {
  "builder": "@analogjs/vitest-angular:test",
  "options": {
    "configFile": "vitest.config.ts"
  }
},

Etape 4 (Optionnel) : Installer l'interface graphique de Vitest.

Vitest possède une interface web agréable pour visualiser les tests, voir le code et les logs. C'est bien plus pratique que le terminal.

Example :
pnpm add -DE @vitest/ui@latest

Vitest UI

Etape 5 : Installer le package de coverage @vitest/coverage-v8

Example :
pnpm add -DE @vitest/coverage-v8@latest

Etape 6 : Créer le fichier test-setup.ts dans src

Example :
import { getTestBed, TestBed } from '@angular/core/testing';
import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { provideZonelessChangeDetection } from '@angular/core';
import { beforeEach } from 'vitest';

getTestBed().resetTestEnvironment();

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

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [provideZonelessChangeDetection()]
  });
});

📄 Consulter le barrel file des tests : ./src/test-setup.ts

Etape 7 : Créer le fichier vitest.config.ts et y coller la configuration présente dans le template.

Dans angular.json ajouter la propriété coverage à l'objet test.

Example :
"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "coverage": true
  }
},

Etape 8 : Ajouter les scripts dans package.json

Example :
{
  "scripts": {
    "test": "ng test",
    "test:coverage": "ng test --coverage --watch=false",
    "test:ui": "vitest --ui",
    "test:watch": "vitest",
  }
}

Etape 9 : Lancer les tests

  • Via console SANS coverage
Example :
pnpm test
  • Via console AVEC coverage
Example :
pnpm test:coverage
  • Via UI dans le navigateur
Example :
pnpm test:ui
  • Mode Watch
Example :
pnpm test:watch

results matching ""

    No results matching ""