# Ajouter Jest au projet Angular

---

<p class="callout warning">Angular v19 - `^19.0.0`  
Jest Preset Angular v14 - `^14.5.1`  
Jest v29 - `^29.7.0`  
</p>

---

### Pourquoi ajouter Jest ?

En effet, le projet Angular, à l'installation, contient déjà le module Karma qui permet de tester le code et de voir le résultat dans un navigateur. Ce qui, pendant la phase de développement, est plus pratique.

Cependant, dans le cas d'utilitaires comme Jenkins ou les Runners de Gitlab, le navigateur de Karma ne peut pas être lancé de manière simple. Dans ces cas là, Jest qui se lance en console est plus approprié.

### Installation de Jest

Tout d'abord, il faut installer les dépendances nécessaires

```shell
npm install jest jest-preset-angular @types/jest --save-dev
```

Ensuite, créer un fichier `setup-jest.ts` dans un dossier `config` à la racine du projet et le remplir comme suit :

```typescript
import 'zone.js';
import 'zone.js/testing';

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv();

```

Une fois ce fichier créé, il faut encore modifier le fichier `package.json` :

- Remplacer : ```JSON
    "test": "ng test"
    ```
    
    Par : ```JavaScript
    "test": "jest --verbose",
    "test:watch": "npm test -- --watch",
    "test:cov": "npm test -- --coverage --coverageReporters=lcov --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
    "test:ci": "jest --ci",
    "test:karma": "ng cache clean && ng test",
    ```
- Ajouter, avant le bloc `"dependencies"` : ```JavaScript
    "jest": {
      "preset": "jest-preset-angular",
      "setupFilesAfterEnv": [
        "./config/setup-jest.ts"
      ],
      "moduleNameMapper": {
        "^src/(.*)$": "./src/$1"
      }
    },
    ```

Maintenant, en lançant `npm test`, les tests de Jest se lancent. Mais la commande `npm run test:karma` permet de passer les tests avec Karma et son navigateur.