Dans le développement moderne, écrire des tests unitaires est aussi essentiel que coder. Cela garantit que notre application fonctionne comme prévu et que les modifications futures n'introduisent pas de régressions. Dans cet article, nous allons explorer comment utiliser Jest et React Testing Library pour écrire des tests unitaires efficaces pour vos composants React.

Qu'est-ce que Jest ?

Jest est un framework de test JavaScript développé par Facebook. Il est conçu pour être simple à utiliser, tout en offrant des fonctionnalités puissantes. Avec Jest, vous pouvez :

• Exécuter des tests unitaires rapidement.
• Créer des tests asynchrones.
• Utiliser des espions pour surveiller les appels de fonction.
• Générer des rapports de couverture de code.

Pour commencer avec Jest, assurez-vous d'abord de l'installer dans votre projet :

npm install --save-dev jest

Qu'est-ce que React Testing Library ?

React Testing Library est une bibliothèque conçue pour tester les composants React de manière qui reflète l'utilisation réelle de votre application. Elle encourage les bonnes pratiques en se concentrant sur le comportement des utilisateurs plutôt que sur l'implémentation des composants. Cela signifie que vous écrivez des tests qui vérifient comment les utilisateurs interagissent avec votre application.

Pour installer React Testing Library, utilisez la commande suivante :

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

Écrire votre premier test avec Jest et React Testing Library

Commençons par un exemple simple. Imaginons que nous avons un composant Greeting qui affiche un message de salutation :

import React from 'react';

const Greeting = ({ name }) => {
  return 
Hello, {name}!
;
};

export default Greeting;

Nous allons maintenant écrire un test pour ce composant. Créez un fichier Greeting.test.js :

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

test('renders greeting message', () => {
  render();
  const greetingElement = screen.getByText(/hello, john!/i);
  expect(greetingElement).toBeInTheDocument();
});

Dans cet exemple, nous avons importé le composant Greeting et nous avons utilisé la fonction render de React Testing Library pour l'afficher. Ensuite, nous avons utilisé screen.getByText pour rechercher le texte rendu et nous avons affirmé qu'il était présent dans le document.

Tests asynchrones avec Jest

Les tests asynchrones sont courants, surtout lorsque vous interagissez avec des API ou des opérations qui prennent du temps. Jest facilite la gestion de l'asynchrone. Voici un exemple où nous simulons un appel API :

import React, { useEffect, useState } from 'react';

const User = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch('https://api.example.com/user');
      const data = await response.json();
      setUser(data);
    };
    fetchUser();
  }, []);

  if (!user) return 
Loading...
;
  return 
{user.name}
;
};

export default User;

Pour tester ce composant, nous allons utiliser Jest pour simuler l'appel API :

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

jest.mock('node-fetch');
import fetch from 'node-fetch';

test('loads and displays user', async () => {
  fetch.mockResolvedValueOnce({ json: jest.fn().mockResolvedValueOnce({ name: 'John' }) });
  render();
  expect(screen.getByText(/loading/i)).toBeInTheDocument();
  const userElement = await screen.findByText(/john/i);
  expect(userElement).toBeInTheDocument();
});

Dans cet exemple, nous avons simulé une réponse d'API en utilisant jest.mock. Cela nous permet de tester le composant sans effectuer réellement des appels à l'API.

Conclusion

Les tests unitaires sont cruciaux pour garantir que votre application React fonctionne correctement. En utilisant Jest et React Testing Library, vous pouvez écrire des tests clairs, efficaces et faciles à maintenir. Que vous soyez un développeur débutant ou un expert, ces outils vous aideront à améliorer la qualité de votre code.

Prêt à prendre votre projet au sérieux ? Commencez à écrire vos tests dès aujourd'hui et assurez-vous que chaque fonctionnalité fonctionne comme prévu. N'hésitez pas à partager vos expériences dans les commentaires ci-dessous !