Hôtellerie et Business Intelligence

Pourquoi ce doc ?

Après avoir passé presque 2 jours à installer un environnement de test pour une application sous Next.js 13 je me suis dit que partager mon résultat pourrait peut-être éviter à certains et certaines de galérer comme je l’ai fait…

Pourquoi Vitest et pas Jest ?

Déjà une petite explication sur pourquoi j’ai utilisé Vitest et pas Jest, comme on le fait habituellement.

Pour 2 raisons principales :

• j’ai commencé par un setup avec Jest, et pour tout dire ça a été une purge car trop de spécificités avec Next.js et Typescript. Trop de librairies et surtout trop de configuration à faire pour faire tourner le tout.
• Vitest est basé sur Jest et sur Vite, ce qui lui permet d’être plus simple, plus rapide et plus facile à configurer avec Typescript que ne l’est Jest.

Installer les librairies

On installe les diverses librairies dont nous allons avoir besoin :

yarn add -D vitest @testing-library/react jsdom @testing-library/jest-dom @vitejs/plugin-react vite-tsconfig-paths

Vitest : basé sur Jest, mais en plus léger et plus rapide.

@vitejs/plugin-react : pour dire à Vitest que l’on travaille sur React (parce que Next.js est construit sur React).

React Testing Library : qui permet d’écrire des tests pour les composants React.

jest-dom : pour écrire des tests unitaires pour le DOM.

jsdom : pour simuler un navigateur Web dans Node.js.

vite-tsconfig-paths : c’est un plugin qui permet d’utiliser les imports avec le mapping de Typescript. En gros sans ça les imports qui sont dans vos différents modules ne seront pas reconnus par vitest.

Le Setup

Une fois que les librairies sont installées ont passe au setup.

On ajoute un script dans package.json :

"test": "vitest --watch"

On crée ensuite un fichier vitest.setup.ts à la racine de l’application :

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

Pour finir on crée un fichier vitest.config.ts lui aussi à la racine de l’application :

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./vitest.setup.ts"],
  },
});

Il ne reste plus qu’à créer un dossier tests dans /src/ pour y mettre vos tests (ou à la racine si vous n’utilisez pas /src/).

Dans ce dossier, créez un fichier sample.test.ts qui va vous permettre de vérifier que tout fonctionne correctement. Mettez-y ce simple test :

import { expect, test } from "vitest";

test("1 === 1", () => {
  expect(1).toBe(1);
});

ATTENTION : comme je l’ai dit en intro Vitest est basé sur Vite. Ce qui veut dire que dans un environnement React tous vos fichiers doivent avoir l’extension .tsx, même ceux de test.

Pour lancer vos tests vous n’aurez qu’à faire :

yarn test

Ajouter le Coverage

Je mets cette partie en plus car certains utilisent le Coverage, d’autres pas, c’est comme on veut.

Là il n’y a qu’une librairie à installer :

yarn add -D @vitest/coverage-v8

Et ensuite on ajoute un script dans package.json :

"coverage": "vitest --coverage"

Puis on ajoute différentes infos pour le Coverage dans vitest.config.ts :

export default defineConfig({
...
test: {
...
  coverage: {
    all: true,
    exclude: [
      "**/node_modules/**",
      "**/vitest.config.ts",
      "**/vitest.setup.ts",
      ".next/**",
      "coverage/**",
      "**/*.d.ts",
      "**/next-env.d.ts",
      "**/next.config.js",
      "**/postcss.config.js",
      "**/tailwind.config.js",
      "**/tsconfig.json",
      "**/__tests__/**",
    ],
  },
},

En clair on effectue un coverage sur toute notre application moins certains fichiers et dossiers.

Pour lancer vous n’aurez donc qu’à faire :

yarn coverage

Vous aurez une réponse dans la console server et sur /coverage/index.html

Voilà, bon tests à vous !