Tests Unitaires avec Jest et Testing Library

Configuration de Jest et React Testing Library

Si vous utilisez Create React App, Jest et React Testing Library sont déjà configurés. Sinon, vous pouvez les installer manuellement :

📋 Copier le code

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

Explication du code :

• jest : Le framework de test JavaScript.
• @testing-library/react : Une bibliothèque pour tester les composants React.
• @testing-library/jest-dom : Ajoute des matchers personnalisés pour Jest, facilitant les assertions sur le DOM.

Écrire un premier test unitaire

Voici un exemple simple de test unitaire pour un composant React qui affiche un message :

📋 Copier le code

import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('affiche le message de bienvenue', () => {
render(<Greeting name="John" />);
const greetingElement = screen.getByText(/Bonjour, John/i);
expect(greetingElement).toBeInTheDocument();
});

Explication du code :

• render : Rend le composant Greeting dans un environnement de test.
• screen.getByText : Recherche un élément dans le DOM contenant le texte "Bonjour, John".
• expect : Vérifie que l'élément est bien présent dans le document.

Tester les interactions utilisateur

Vous pouvez également tester les interactions utilisateur, comme les clics sur un bouton. Voici un exemple :

📋 Copier le code

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('incrémente le compteur lors du clic sur le bouton', () => {
render(<Counter />);
const button = screen.getByText(/Incrémenter/i);
fireEvent.click(button);
const countElement = screen.getByText(/1/i);
expect(countElement).toBeInTheDocument();
});

Explication du code :

• fireEvent.click : Simule un clic sur le bouton.
• screen.getByText : Vérifie que le compteur a bien été incrémenté à 1.

Tester les composants asynchrones

Pour tester des composants qui effectuent des opérations asynchrones, comme des appels API, vous pouvez utiliser waitFor :

📋 Copier le code

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import AsyncComponent from './AsyncComponent';

test('affiche les données après un chargement asynchrone', async () => {
render(<AsyncComponent />);
await waitFor(() => {
const dataElement = screen.getByText(/Données chargées/i);
expect(dataElement).toBeInTheDocument();
});
});

Explication du code :

• waitFor : Attend que l'élément contenant "Données chargées" apparaisse dans le DOM.
• async/await : Permet de gérer les opérations asynchrones dans les tests.

Bonnes pratiques pour les tests unitaires

Voici quelques bonnes pratiques à suivre pour écrire des tests unitaires efficaces :

• Tests isolés : Chaque test doit être indépendant et ne pas dépendre d'autres tests.
• Nommage clair : Utilisez des noms de tests descriptifs pour faciliter la compréhension.
• Couverture des cas limites : Testez les cas d'erreur et les cas limites pour garantir la robustesse de votre application.
• Éviter les tests trop spécifiques : Les tests ne doivent pas être trop dépendants de l'implémentation interne des composants.

Conclusion

Vous avez maintenant une solide compréhension des tests unitaires en React avec Jest et React Testing Library. Que ce soit pour tester des composants simples, des interactions utilisateur ou des opérations asynchrones, ces outils vous permettront de garantir la qualité et la fiabilité de votre application.

Pour continuer votre apprentissage, découvrez comment créer des bibliothèques réutilisables dans React dans le chapitre suivant : Création de Bibliothèques Réutilisables.