Frontend Academy · Leçon

@testing-library/react : render et userEvent

Rendez les composants dans un DOM simulé, recherchez-les par rôle et texte d’étiquette, déclenchez des interactions utilisateur avec userEvent et vérifiez la sortie visible.

@testing-library/react : render et userEvent est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Philosophie de Testing Library

@testing-library encourage des tests qui reproduisent la manière dont les utilisateurs interagissent avec l’interface. Interrogez les éléments par rôle, étiquette et texte, et non par des détails d’implémentation comme les noms de classes CSS ou les éléments internes des composants.

Installer Testing Library

Installez Testing Library pour React ainsi que le paquet userEvent pour simuler les interactions utilisateur.

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

render() — monter un composant

render(<Component />) monte le composant dans un DOM simulé. La fonction renvoie des fonctions d’interrogation permettant de trouver les éléments.

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

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Interroger les éléments

Privilégiez les interrogations dans cet ordre : getByRole (accessible), getByLabelText, getByPlaceholderText, getByText et getByDisplayValue. Utilisez queryBy* pour vérifier la non-existence d’un élément. Utilisez findBy* pour les éléments asynchrones.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — simuler les actions de l’utilisateur

userEvent simule les interactions réelles de l’utilisateur : saisie, clics et navigation au clavier. Cette solution est plus réaliste que l’ancien fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Tester la soumission d’un formulaire

Remplissez les champs du formulaire et envoyez-le. Vérifiez le résultat : ce que l’utilisateur voit après l’envoi.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Correspondances personnalisées de jest-dom

@testing-library/jest-dom ajoute des correspondances utiles : toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() et toHaveFocus().

Tester les mises à jour asynchrones des composants

Utilisez waitFor() ou findBy* pour les éléments qui apparaissent de manière asynchrone (après une récupération, après un délai d’attente).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Tester les états de chargement et d’erreur

Simulez la réponse de fetch pour tester différents états. MSW (Mock Service Worker) est le meilleur outil pour simuler les réponses d’API dans les tests.

Tester l’accessibilité

Testing Library encourage naturellement l’accessibilité : si vous ne pouvez pas interroger un élément par son rôle ou son étiquette, il est probablement inaccessible. Utilisez jest-axe pour automatiser les audits d’accessibilité dans les tests.

Ne pas tester les détails d’implémentation

À éviter : interroger les éléments par leurs noms de classes CSS, importer l’état interne des composants et vérifier que des méthodes précises ont été appelées. Testez le comportement du point de vue de l’utilisateur : ce qu’il voit et ce qui se passe lorsqu’il interagit avec l’interface.

Vérification rapide

Quelle fonction d’interrogation de Testing Library faut-il privilégier pour trouver les éléments interactifs ?

Récapitulatif : @testing-library/react

render() monte les composants dans un DOM simulé. Interrogez les éléments par rôle, étiquette et texte, et non par des détails d’implémentation. Utilisez userEvent.setup() pour des interactions utilisateur réalistes. Utilisez findBy* pour les éléments asynchrones. Utilisez jest-dom pour des assertions lisibles. Testez du point de vue de l’utilisateur : ce qu’il voit et ce qu’il fait. Les composants accessibles sont plus faciles à tester.

Questions Fréquemment Posées

La leçon « @testing-library/react : render et userEvent » est-elle gratuite ?

Oui — le texte complet de « @testing-library/react : render et userEvent » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « @testing-library/react : render et userEvent » ?

Rendez les composants dans un DOM simulé, recherchez-les par rôle et texte d’étiquette, déclenchez des interactions utilisateur avec userEvent et vérifiez la sortie visible. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « @testing-library/react : render et userEvent » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configuration de Jest et tests de base
@testing-library/react : render et userEvent
@testing-library/vue : monter des composants
Simuler des modules et des appels d’API

← Retour à Frontend Academy