Mettre en place Jest pour vos tests unitaires Angular

Par défaut, les applications Angular utilisent Karma et Jasmine pour les tests unitaires. Dans cet article, nous allons voir comment remplacer ces outils par le framework de test Jest.

1. Installer les dépendances

Pour installer les dépendances requises, lancer la commande suivante dans un terminal :

1npm install jest jest-preset-angular @types/jest --save-dev

Si vous utilisez Yarn, la commande à lancer est :

1yarn add --dev jest jest-preset-angular @types/jest

Jest

Jest est un framework de test complet créé par Facebook et qui est très populaire dans l’écosystème React. Il vient avec tout le bagage nécessaire pour réaliser des tests unitaires pour nos applications JavaScript. Il comprend :

d’importantes capacités de mock,
une bibliothèque d’assertion intégrée,
un outil de code coverage intégré,
JSDOM, une librairie émulant le navigateur.

JSDOM va nous permettre d’exécuter nos tests unitaires sur nos serveurs d’intégration continue sans configuration supplémentaire.

Je préfère Jest à Karma et Jasmine, car Jest offre une bien meilleure expérience développeur. Il est :

plus rapide que Karma avec une parallélisation de l’exécution des tests,
très bien documenté avec une large communauté derrière,
plus intelligent que Karma (en ne relançant que les tests affectés par exemple),
un toolkit complet pour les tests unitaires,
headless par défaut grâce à la librairie JSDOM.

Les déclarations de types pour Jest

Le paquet @types/jest contient les déclarations de types qui vont permettre à TypeScript d’effectuer la vérification du typage statique de notre code.

Jest Preset Angular

Le paquet jest-preset-angular est l’outil qui permet à Jest de comprendre notre code Angular. C’est ce qui rend possible l’exécution des tests unitaires de notre application Angular via Jest. Il inclut :

ts-jest, une librairie qui permet à Jest de transpiler à la volée notre code TypeScript avant de lancer les tests,
des sérialiseurs pour permettre la réalisation de tests par comparaison de snapshots,
des transformateurs AST qui suppriment le CSS de notre composant et qui “inline” le template HTML de nos composants Angular, les rendant ainsi compatibles avec JSDOM.

2. Configurer Jest

Supposons que nous ayons généré une application Angular appelée my-app avec la commande suivante :

1ng new my-app

Créer le fichier de configuration de Jest

Créez le fichier jest.config.js à la racine de votre projet avec le contenu suivant :

1const { pathsToModuleNameMapper } = require('ts-jest/utils');
2const { compilerOptions } = require('./tsconfig');
3
4module.exports = {
5  preset: 'jest-preset-angular',
6  roots: ['<rootDir>/src/'],
7  testMatch: ['**/+(*.)+(spec).+(ts|js)'],
8  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
9  collectCoverage: true,
10  coverageReporters: ['html'],
11  coverageDirectory: 'coverage/my-app',
12  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
13    prefix: '<rootDir>/',
14  }),
15};

Le fichier jest.config.js contient la configuration de Jest. Avec cette configuration, Jest va :

prendre en comprendre tous les fichiers .spec.ts se trouvant dans le dossier src de notre projet,
lire notre fichier de configuration de TypeScript tsconfig.json à la recherche d’alias pour qu’on puisse utiliser les alias dans nos tests,
transpiler à la volée notre code TypeScript avant de lancer les tests,
collecter les informations sur la couverture de code et les écrire dans le dossier coverage/my-app.

Mettre à jour le contenu du fichier `src/test.ts`

Ouvrez le fichier src/test.ts et remplacer son contenu par :

1import 'jest-preset-angular';
2
3Object.defineProperty(window, 'CSS', { value: null });
4Object.defineProperty(window, 'getComputedStyle', {
5  value: () => {
6    return {
7      display: 'none',
8      appearance: ['-webkit-appearance'],
9    };
10  },
11});
12
13Object.defineProperty(document, 'doctype', {
14  value: '<!DOCTYPE html>',
15});
16Object.defineProperty(document.body.style, 'transform', {
17  value: () => {
18    return {
19      enumerable: true,
20      configurable: true,
21    };
22  },
23});

Ce bout de code fait deux choses :

Il importe le module JavaScript jest-preset-angular pour mettre en place notre environnement de test Angular.
Il “mock” certaines propriétés et fonctions de l’object global window pour s’assurer que nos tests peuvent bien tourner dans un environnement JSDOM.

Mettre à jour la configuration TypeScript pour les tests

Ouvrez le fichier tsconfig.spec.json et mettez à jour son contenu :

1{
2  "extends": "./tsconfig.json",
3  "compilerOptions": {
4    "outDir": "./out-tsc/spec",
5    "types": [
6      "jest", // 1
7      "node"
8    ],
9    "esModuleInterop": true, // 2
10    "emitDecoratorMetadata": true // 3
11  },
12  "files": ["src/test.ts", "src/polyfills.ts"],
13  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
14}

Ces changements ont pour effets :

d’instruire le compilateur TypeScript de prendre en compte le fichier de déclarations de types de Jest,
d’activer l’option esModuleInterop du compilateur TypeScript sinon Jest va produire beaucoup d’avertissements dans la console,
d’activer l’option emitDecoratorMetadata du compilateur TypeScript sinon l’injection de dépendance d’Angular ne fonctionnera pas avec Jest.

3. Lancer les tests

Vous pouvez maintenant lancer les tests unitaires grâce à la commande suivante :

1npx jest

4. Enlever Karma

Nous pouvons maintenant tranquillement enlever Karma de notre projet

Désinstaller Karma

Pour supprimer les dépendances vers Karma et son écosystème, lancer la commande suivante dans un terminal :

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

Si vous utilisez Yarn, la commande à lancer est :

1yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

Supprimer le fichier de configuration de Karma

Nous pouvons maintenant supprimer le fichier de configuration de Karma :

1rm karma.conf.js

Supprimer le target “test” du ficher “angular.json”

Au lieu de ng test, nous allons maintenant exécuter npx jest pour lancer nos tests unitaires. Par conséquent, le target test à l’intérieur du fichier angular.json devient inutile. Vous pouvez donc supprimer la section projects.my-app.architect.testdu fichier angular.json :

1{
2  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3  "version": 1,
4  "newProjectRoot": "projects",
5  "projects": {
6    "my-app": {
7      "projectType": "application",
8      "schematics": {},
9      "root": "",
10      "sourceRoot": "src",
11      "prefix": "app",
12      "architect": {
13        "build": { /* config du target build */ },
14        "serve": { /* config du target serve */ },
15-        "test": {
16-          "builder": "@angular-devkit/build-angular:karma",
17-          "options": {
18-            "main": "src/test.ts",
19-            "polyfills": "src/polyfills.ts",
20-            "tsConfig": "tsconfig.spec.json",
21-            "karmaConfig": "karma.conf.js",
22-            "assets": [
23-              "src/favicon.ico",
24-              "src/assets"
25-            ],
26-            "styles": [
27-              "src/styles.css"
28-            ],
29-            "scripts": []
30-          }
31-        },
32        "lint": { /* config du target lint*/ },
33        "e2e": { /* config du target e2e */ }
34      }
35    }},
36  "defaultProject": "my-app"
37}

Conclusion

Dans cet article, nous avons vu comment nous pouvons mettre en place Jest pour nos tests unitaires. Cela peut certainement être automatisé à l’aide de schematics Angular, mais ce n’est pas si difficile à faire manuellement.

Vous pouvez par exemple ajouter Jest à votre projet Angular en utilisant les schematics de Briebug en exécutant la commande suivante:
1ng add @briebug/jest-schematic

Vous pourrez trouver Le code source complet de cet article dans ce dépôt Github.