Vitest : Structure d'un Test

Focus sur les mots-clés fondamentaux « describe » et « test » pour structurer vos premiers tests avec le framework Vitest.

Icône de calendrier
Avancé
3 chapitres

Environnement

Avant de créer nos premiers tests, nous allons créer un fichier contenant une fonction utilitaire de manipulation de texte.

src/utils/excerpt.js
copié !
export default function excerpt(str, stopIndex) {
  if (
    typeof str !== "string" ||
    typeof stopIndex !== "number" ||
    stopIndex <= 0
  ) {
    return null
  }
  return str.length <= stopIndex
    ? str
    : str.substring(0, stopIndex) + "..."
}

La fonction excerpt() va tronquer les X premiers caractères d’une chaîne de caractères (utile pour limiter la taille d’une description trop longue).

Test de fonctions utilitaires

Les tests seront regroupés dans le dossier 📂 tests.

La première chose à faire est d’importer dans le fichier de test la fonction à tester.

excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";

Exploitons désormais les 2 fonctions de référence : describe() et test().

Définir un bloc de tests avec describe()

La fonction describe() va permettre de définir un bloc regroupant des tests relatifs à un même contexte ou une même fonctionnalité.

Importons-là :

excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";
import { describe } from "vitest";

Dans le cas de notre fonction utilitaire excerpt(), il serait judicieux de créer un bloc de tests.

excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";
import { describe } from "vitest";

describe("Fonction excerpt()", () => {
  // Mes tests ici...
});

Comme vous pouvez le constater, la fonction describe() reçoit 2 arguments :

  1. Une chaîne de caractères décrivant le nom du groupe.
  2. Une fonction de rappel (callback) qui contient les tests à exécuter. À l’intérieur de cette fonction de rappel, nous utiliserons la fonction test() pour définir des tests.

La fonction describe() agit comme un wrapper pour nos tests.

La fonction describe() permet également d’imbriquer des blocs de test afin de sous-organiser des tests potentiellement nombreux.

excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";
import { describe } from "vitest";

describe("Fonction excerpt()", () => {
  describe("Passer des données valides", () => {
    // Mes tests ici...
  });
  describe("Passer des données non valides", () => {
    // Mes tests ici...
  });
});

Définir un test avec test()

La fonction test() va permettre de définir un cas de test individuel à l’intérieur d’un bloc describe().

Importons-là :

excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";
import { describe, test } from "vitest";

Pour que nos tests soient qualitatifs, il est important de couvrir un maximum de scénarios, comme par exemple dans le cas de notre fonction excerpt() :

  • L’absence d’arguments lors de l’appel
  • L’absence du second argument stopIndex
  • Une valeur de 0 pour l’argument stopIndex
  • Une valeur négative pour l’argument stopIndex
  • Une valeur négative pour l’argument stopIndex
  • Un texte plus long que l’indice du caractère de troncature
  • Un texte de taille égale à l’indice du caractère de troncature
  • Un texte plus court que l’indice du caractère de troncature
excerpt.test.js
copié !
import excerpt from "../src/utils/excerpt";
import { describe } from "vitest";

describe("Fonction excerpt()", () => {
  describe("Passer des données valides", () => {
    test("Longueur du texte > Indice du caractère de troncature", () => {
      // Assertion...
    });
    test("Longueur du texte = Indice du caractère de troncature", () => {
      // Assertion...
    });
    test("Longueur du texte < Indice du caractère de troncature", () => {
      // Assertion...
    });
  });
  describe("Passer des données non valides", () => {
    test("Aucun argument", () => {
      // Assertion...
    });
    test("Pas d'argument <stopIndex>", () => {
      // Assertion...
    });
    test("Argument <stopIndex> = 0", () => {
      // Assertion...
    });
    test("Argument <stopIndex> < 0", () => {
      // Assertion...
    });
  });
});

Comme vous pouvez le constater, la fonction test() reçoit également 2 arguments :

  1. Une chaîne de caractères décrivant le test.
  2. Une fonction de rappel (callback) qui décrit le résultat attendu pour le test en question. Ce résultat est défini au travers de ce que l’on appelle une assertion.