Guide de Test de ReactJS pour Débutants

Bonjour, futurs développeurs React ! Je suis ravi d'être votre guide sur ce voyage dans le monde du test React. En tant que quelqu'un qui enseigne l'informatique depuis de nombreuses années, j'ai vu de visu comment le test peut transformer un bon développeur en un excellent développeur. Alors, plongeons ensemble et démystifions le test React !

Pourquoi le Test est Important

Avant de commencer à coder, permettez-moi de vous partager une petite histoire. J'avais un étudiant qui a construit une belle application React. Elle avait l'air parfaite... jusqu'à ce qu'elle plante pendant une démonstration. C'est là qu'il a appris à ses dépens : l'apparence peut être trompeuse, mais les tests ne mentent pas. Le test n'est pas seulement question de capturer des bugs ; c'est aussi question de confiance. Lorsque vos tests passent, vous pouvez dormir tranquille en sachant que votre code fonctionne comme prévu.

Create React App : Votre Terrain de Jeu pour le Test

Configuration de Votre Environnement

Commençons par créer une nouvelle application React en utilisant Create React App. Cet outil configure un projet React prêt à l'emploi avec des tests déjà configurés. Ouvrez votre terminal et tapez :

npx create-react-app mon-app-react-test
cd mon-app-react-test

Félicitations ! Vous venez de créer votre première application React avec des capacités de test intégrées. C'est comme recevoir un nouveau jouet avec des piles incluses !

Votre Premier Test

Create React App comes with a sample test file. Let's take a look at it. Open src/App.test.js:

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

test('rendre le lien "apprendre React"', () => {
render(<App />);
const lienElement = screen.getByText(/apprendre react/i);
expect(lienElement).toBeInTheDocument();
});

Décomposons cela :

1. Nous importons les outils de test nécessaires et notre composant App.
2. Nous définissons un test en utilisant la fonction test.
3. Nous rendons notre composant App.
4. Nous cherchons un élément avec le texte "apprendre react".
5. Nous nous attendons à ce que cet élément soit dans le document.

Pour exécuter ce test, utilisez la commande :

npm test

Si tout est configuré correctement, vous devriez voir un test réussi. Félicitations sur votre premier test React !

Test dans une Application Personnalisée

Maintenant que nous avons vu un test de base, créons notre propre composant et testons-le.

Création d'un Composant Simple

Créons un composant simple de compteur. Créez un nouveau fichier src/Counter.js :

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Compte : {count}</p>
<button onClick={() => setCount(count + 1)}>Incrémenter</button>
</div>
);
}

export default Counter;

Ce composant affiche un compteur et un bouton pour l'incrémenter.

Écriture de Tests pour Notre Compteur

Maintenant, testons notre composant Counter. Créez un nouveau fichier src/Counter.test.js :

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

test('rendre le compteur initial de 0', () => {
render(<Counter />);
const compteurElement = screen.getByText(/compte: 0/i);
expect(compteurElement).toBeInTheDocument();
});

test('incrémenter le compteur lorsque le bouton est cliqué', () => {
render(<Counter />);
const bouton = screen.getByText(/incrémenter/i);
fireEvent.click(bouton);
const compteurElement = screen.getByText(/compte: 1/i);
expect(compteurElement).toBeInTheDocument();
});

Décomposons ces tests :

1. Le premier test vérifie si le compteur initial est de 0.
2. Le second test simule un clic sur le bouton et vérifie si le compteur augmente à 1.

Exécutez à nouveau npm test, et vous devriez voir ces nouveaux tests réussis !

Concepts de Test Avancés

À mesure que vous vous sentirez plus à l'aise avec les tests de base, vous souhaiterez explorer des concepts plus avancés. Voici un tableau de quelques méthodes que vous utiliserez souvent dans les tests React :

Méthode	Description	Exemple
render	Rend un composant React pour le test	render(<MonComposant />)
screen.getByText	Trouve un élément par son contenu textuel	screen.getByText(/bonjour monde/i)
screen.getByRole	Trouve un élément par son rôle ARIA	screen.getByRole('button')
fireEvent	Simule des événements DOM	fireEvent.click(bouton)
waitFor	Attend que les attentes passent	await waitFor(() => expect(élément).toBeVisible())
act	Enveloppe du code qui cause des mises à jour d'état React	act(() => { /* actions */ })

Test du Comportement Asynchrone

Les applications React impliquent souvent des opérations asynchrones. Créons un composant qui récupère des données et testons-le :

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Chargement...</div>;

return <div>Nom d'utilisateur : {userData.name}</div>;
}

export default UserData;

Maintenant, testons ce composant :

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('charger et afficher les données utilisateur', async () => {
render(<UserData />);

expect(screen.getByText(/chargement/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/nom d'utilisateur:/i)).toBeInTheDocument();
});
});

Ce test vérifie l'état de chargement puis attend que les données utilisateur soient affichées.

Conclusion

Le test dans React peut sembler décourageant au départ, mais c'est une compétence précieuse qui vous rendra un meilleur développeur. Souvenez-vous, chaque test que vous écrivez est comme un filet de sécurité pour votre code. Il vous attrape lorsque vous tombez et vous donne la confiance pour grimper plus haut.

Pendant que vous continuez votre voyage React, continuez à explorer différentes techniques de test. Mockez des appels API, testez des états d'erreur, et défiez-vous à écrire des tests avant de coder vos composants (Développement Piloté par les Tests). Plus vous pratiquez, plus cela deviendra naturel.

Bonne chance pour les tests, et peut-être que votre console sera toujours verte avec des tests réussis !

Credits: Image by storyset