Aller au contenu

Automatiser les tests unitaires avec Jest dans GitLab CI

Tu développes une application et tu souhaites automatiser tes tests unitaires en CI/CD. Très utile, puisque cela te permettra de verifier que tu as atteint un minimum de couverture de code avec tes tests, garantissant un test de meilleure qualité. Cela peut aussi mettre en évidence des regressions qui peut arriver en ajoutant des features à ton application, et qu'en modifiant certaines parties du code, tu casses d'anciennes fonctionnalités.

Exemple avec NodeJS

Il te faudra au préalable effectuer une installation de tes nodes modules. Tu peux aussi ajouter l'étape de lint comme job à réaliser avant.

Ajout du script dans le package.json

Je te propose d'utiliser l'orchestrateur de test le plus utilisé du moment, à savoir Jest, initialement développé par Facebook, puis donné à OpenJS fondation en open source.

Installons le via npm install --save-dev jest

On initialise un nouveau script dans notre fichier package.json, permettant de lancer Jest.

package.json
1
2
3
4
5
{
    "scripts": {
        "test": "jest ."
    }
}

Info

Jest dispose de nombreuses options, te permettant de lancer tes tests en sequentiel, parallèle, etc.

Pré-requis TypeScript

Les exemples de cette page sont en TypeScript (.ts, puis .tsx pour le composant React), que Jest ne sait pas transformer seul. Installe ts-jest avec npm install --save-dev ts-jest typescript @types/jest (ajoute @types/react @types/react-dom pour les tests de composants), ajoute "preset": "ts-jest" dans la section "jest" de ton package.json, puis déclare dans ton tsconfig.json : "compilerOptions": { "jsx": "react-jsx", "esModuleInterop": true, "types": ["jest", "@testing-library/jest-dom"] }. Autre option : passer par Babel avec babel-jest et les presets @babel/preset-typescript et @babel/preset-react.

Ajout d'un simple test de fonction

Imaginons que j'ai une fonction dont je souhaite tester que sa valeur de retour soit bien 30 :

1
2
3
4
5
6
7
import {getAge} from './utils'

describe("Simple unit test", () => {
    test('getAge retourne 30', () => {
        expect(getAge()).toBe(30)
    });
  })

Ajout d'un simple test visuel

Imaginons que je souhaite tester la présence d'un certain champ de texte, 'bg', sur ma page que je render dans mon test. Pour cela je vais vérifier dans cet exemple que ce texte soit visible sur ma page, ainsi que bien présent dans le DOM de mon application. J'utilise pour cela la best librairie pour cela concernant React, à savoir la Testing Library

Pré-requis

Les tests de composants ont besoin d'un DOM simulé et des matchers toBeInTheDocument / toBeVisible. Installe-les avec npm install --save-dev jest-environment-jsdom @testing-library/react @testing-library/jest-dom, puis ajoute dans ton package.json : "jest": { "testEnvironment": "jsdom", "setupFilesAfterEnv": ["@testing-library/jest-dom"] }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

describe("Simple unit test", () => {
  test('affiche le texte bg', () => {
    render(<App />);
    const linkElement = screen.getByText(/bg/i);
    expect(linkElement).toBeInTheDocument();
    expect(linkElement).toBeVisible()
  });
})

Ajout du stage & job en CI/CD

Nous n'avons plus qu'a créer un job, que l'on nomme ici unit-test, appartenant au stage (une sorte de groupement de job) test

1
2
3
4
5
6
7
8
unit-test:
    stage: test
    needs:
        - lint # optionnel
        - install-deps
    image: node:24-alpine
    script:
        - npm run test

Pour aller plus loin