Edouard Dorier Portfolio

TDD en Développement avec React et Next.js : Bonnes Pratiques et Mise en Œuvre

Par Edouard Dorier

Introduction

Le Test-Driven Development (TDD) est une méthodologie de développement logiciel qui consiste à écrire les tests avant d'implémenter le code fonctionnel. Cette approche permet d'améliorer la qualité du code, de réduire les bugs et de faciliter la maintenance.

Dans cet article, nous allons explorer comment appliquer le TDD avec React et Next.js, en utilisant des outils comme Jest, React Testing Library et Cypress pour les tests d'intégration et E2E.

1. Qu'est-ce que le TDD ?

Le TDD suit un cycle en trois étapes :

  1. RED : Écrire un test qui échoue (car la fonctionnalité n'existe pas encore).
  2. GREEN : Implémenter le code minimal pour faire passer le test.
  3. REFACTOR : Optimiser le code tout en gardant les tests verts.

Cette approche encourage une conception modulaire et évite le sur-développement.

2. Configurer les Tests dans Next.js

Next.js supporte nativement Jest et React Testing Library. Voici comment les configurer :

Installation des dépendances

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

Configuration de Jest

Créez un fichier jest.config.js :

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // Pour les alias d'import
  },
};

Fichier de setup (jest.setup.js)

import "@testing-library/jest-dom/extend-expect";

3. Exemple de TDD avec un Composant React

Étape 1 (RED) : Écrire un test pour un composant "Button"

// tests/Button.test.js
import { render, screen } from "@testing-library/react";
import Button from "../components/Button";

test("affiche un bouton avec le texte donné", () => {
  render(<Button label="Cliquez ici" />);
  expect(screen.getByText("Cliquez ici")).toBeInTheDocument();
});

👉 Le test échoue car le composant Button n'existe pas encore.

Étape 2 (GREEN) : Implémenter le composant

// components/Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

✅ Le test passe maintenant !

Étape 3 (REFACTOR) : Améliorer le composant

Par exemple, ajouter des props supplémentaires (onClick, className).

4. TDD avec Next.js (Pages API et SSR)

Next.js permet aussi de tester :

  • Les pages statiques / SSR (avec getServerSideProps).
  • Les API Routes (endpoints backend).

Exemple : Tester une API Route

// tests/api/hello.test.js
import { createMocks } from "node-mocks-http";
import handler from "../../pages/api/hello";

test("retourne 'Hello World'", async () => {
  const { req, res } = createMocks({ method: "GET" });
  await handler(req, res);
  expect(res._getJSONData()).toEqual({ message: "Hello World" });
});

Implémentation de l'API

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello World" });
}

5. Outils Complémentaires

  • Cypress : Pour les tests E2E (simuler un utilisateur).
  • MSW (Mock Service Worker) : Pour simuler des API.
  • Storybook : Pour tester les composants de manière isolée.

Conclusion

Le TDD avec React et Next.js permet de :
✅ Éviter les régressions grâce à une couverture de test élevée.
✅ Faciliter la refactorisation en s’appuyant sur des tests robustes.
✅ Améliorer la conception en écrivant du code modulaire.

Avec Jest, React Testing Library et Cypress, vous disposez de tous les outils nécessaires pour adopter le TDD efficacement.

🚀 Prêt à tester votre code avant de l'écrire ?

📌 Ressources utiles :