Vitest

Vitest est un framework de tests JavaScript moderne.

Il permet d’écrire et d’exécuter des tests automatisés dans un vrai projet.

Vitest est particulièrement utilisé avec les projets modernes basés sur Vite.

1. C’est quoi Vitest ?

Vitest est un outil qui permet de tester du code JavaScript automatiquement.

Il permet d’utiliser :

• test() pour créer un test
• expect() pour vérifier une valeur
• describe() pour regrouper des tests
• toBe() et toEqual() pour comparer des résultats

Selon la documentation officielle, Vitest est un framework de tests nouvelle génération alimenté par Vite.

2. Installer Vitest

Dans un projet Node.js ou Vite, on peut installer Vitest avec npm.

npm install -D vitest

Le -D signifie que Vitest est installé comme dépendance de développement.

3. Ajouter le script de test

Dans le fichier package.json, on ajoute un script.

{
    "scripts": {
        "test": "vitest"
    }
}

Ensuite, on peut lancer les tests avec :

npm run test

4. Structure d’un fichier de test

Par convention, un fichier de test contient souvent .test.js ou .spec.js dans son nom.

math.js
math.test.js

Exemple de fichier normal :

// math.js

export function add(a, b) {

    return a + b;

}

Exemple de fichier de test :

// math.test.js

import { expect, test } from "vitest";

import { add } from "./math.js";

test("additionne deux nombres", () => {

    expect(add(2, 3)).toBe(5);

});

5. Importer les outils de Vitest

Pour utiliser Vitest, on importe les fonctions nécessaires.

import { describe, test, expect } from "vitest";

6. test()

La fonction test() permet de déclarer un test.

test("additionne deux nombres", () => {

    expect(2 + 2).toBe(4);

});

Le premier argument est une description du test. Le deuxième argument est une fonction contenant les assertions.

7. expect()

La fonction expect() indique la valeur à tester.

expect(2 + 2).toBe(4);

Ici, Vitest vérifie que le résultat de 2 + 2 est bien 4.

8. toBe()

La méthode toBe() compare des valeurs simples.

expect("Fred").toBe("Fred");

expect(true).toBe(true);

expect(10).toBe(10);

Elle est surtout utilisée avec :

• number
• string
• boolean

9. toEqual()

La méthode toEqual() compare le contenu des objets et tableaux.

expect([1, 2, 3]).toEqual([1, 2, 3]);

expect({ name: "Fred" }).toEqual({ name: "Fred" });

Elle est utile parce que les objets et tableaux sont comparés par référence en JavaScript.

10. describe()

La fonction describe() permet de regrouper plusieurs tests liés au même sujet.

describe("Fonction add", () => {

    test("additionne deux nombres positifs", () => {

        expect(add(2, 3)).toBe(5);

    });

    test("additionne avec zéro", () => {

        expect(add(0, 3)).toBe(3);

    });

});

Cette structure rend les tests plus lisibles.

11. it() vs test()

Dans Vitest, it() et test() servent au même objectif.

it("additionne deux nombres", () => {

    expect(add(1, 2)).toBe(3);

});

Certains développeurs préfèrent it() parce que la phrase se lit naturellement.

12. Lancer les tests

Pour lancer les tests :

npm run test

Par défaut, Vitest peut fonctionner en mode watch pendant le développement.

Cela signifie qu’il peut relancer les tests lorsqu’un fichier change.

13. Lancer les tests une seule fois

Pour exécuter les tests une seule fois, on utilise :

npx vitest run

Cette commande est utile pour valider rapidement un projet.

14. Tester avec coverage

Le coverage permet de mesurer quelle partie du code est couverte par les tests.

{
    "scripts": {
        "test": "vitest",
        "coverage": "vitest run --coverage"
    }
}

Ensuite :

npm run coverage

Vitest peut utiliser la couverture native avec v8 ou une couverture instrumentée avec istanbul.

15. Exemple complet

Fichier à tester :

// cart.js

export function createMessageCart(cart) {

    if (cart.size === 0) {

        return "Votre panier est vide";

    }

    return "Votre panier contient des articles";

}

Fichier de test :

// cart.test.js

import { describe, test, expect } from "vitest";

import { createMessageCart } from "./cart.js";

describe("createMessageCart", () => {

    test("retourne un message quand le panier est vide", () => {

        const cart = new Map();

        expect(createMessageCart(cart))
            .toBe("Votre panier est vide");

    });

    test("retourne un message quand le panier contient des articles", () => {

        const cart = new Map();

        cart.set("patate", 1);

        expect(createMessageCart(cart))
            .toBe("Votre panier contient des articles");

    });

});

16. Bonnes pratiques avec Vitest

• Nommer les fichiers avec .test.js
• Tester une fonction à la fois
• Utiliser describe() pour regrouper les tests
• Utiliser toBe() pour les valeurs simples
• Utiliser toEqual() pour les objets et tableaux
• Créer des tests courts et lisibles
• Tester les cas nominaux et les cas particuliers

Résumé rapide