React Academy · Leçon

Tests d’intégration avec React Testing Library

Rendez les composants dans les tests, déclenchez des événements et vérifiez le résultat visible plutôt que l’implémentation.

Tests d’intégration avec React Testing Library est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Qu’est-ce que React Testing Library ?

React Testing Library encourage les tests du point de vue de l’utilisateur : affichez les composants, interagissez avec eux comme le ferait un utilisateur et vérifiez le résultat visible plutôt que les détails d’implémentation.

Configuration

RTL est inclus avec Create React App et le modèle React de Vite. Pour une configuration manuelle, installez @testing-library/react et @testing-library/jest-dom.

// package.json
// "@testing-library/react": "^14.0.0",
// "@testing-library/jest-dom": "^6.0.0"

// setupTests.ts
import '@testing-library/jest-dom';

Rendu d’un composant

render() monte un composant dans un DOM virtuel. Il renvoie des fonctions de requête limitées à la sortie rendue.

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

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

Rechercher des éléments

Privilégiez les requêtes dans cet ordre : getByRole > getByLabelText > getByPlaceholderText > getByText. Les requêtes par rôle correspondent aux sémantiques d’accessibilité.

// Best: query by role
const button = screen.getByRole('button', { name: /submit/i });

// Good: query by label (for form inputs)
const input = screen.getByLabelText('Email address');

// Acceptable: query by text
const heading = screen.getByText('Welcome');

Déclencher des événements

Utilisez userEvent de @testing-library/user-event, de préférence, ou fireEvent pour les besoins élémentaires. userEvent simule les interactions réelles du navigateur, notamment la focalisation et la perte de focalisation.

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

test('types into input', async () => {
  const user = userEvent.setup();
  render(<SearchBar />);
  const input = screen.getByRole('textbox');
  await user.type(input, 'react');
  expect(input).toHaveValue('react');
});

Tester la soumission d’un formulaire

Affichez le formulaire, remplissez les champs avec userEvent.type, cliquez sur le bouton de soumission, puis vérifiez le résultat : message de réussite, navigation ou appel d’un rappel.

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

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

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

Vérifier la visibilité

Les correspondances de jest-dom comme toBeInTheDocument(), toBeVisible() et toHaveValue() rendent les vérifications plus lisibles.

expect(screen.getByText('Error: required')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeVisible();
expect(screen.getByRole('textbox')).toHaveValue('hello');
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();

Tester le rendu conditionnel

Utilisez queryBy, qui renvoie null lorsque l’élément est absent, pour vérifier qu’un élément n’est pas rendu. Utilisez getBy lorsque vous vous attendez à ce qu’il soit présent.

test('shows error message when validation fails', async () => {
  const user = userEvent.setup();
  render(<SignUpForm />);
  await user.click(screen.getByRole('button', { name: /submit/i }));
  expect(screen.getByText('Email is required')).toBeInTheDocument();
});

Entourer de fournisseurs

La plupart des composants ont besoin d’un contexte ou d’un routeur. Entourez-les de fournisseurs dans l’appel à render ou créez une fonction personnalisée renderWithProviders.

function renderWithProviders(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={new QueryClient()}>
      <MemoryRouter>
        {ui}
      </MemoryRouter>
    </QueryClientProvider>
  );
}

test('shows user data', () => {
  renderWithProviders(<UserProfile />);
});

Tester les changements d’état

Interagissez avec le composant, puis vérifiez que le nouvel état est reflété dans l’interface. RTL enveloppe automatiquement la plupart des interactions dans act lorsque vous utilisez userEvent.

test('counter increments', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Assistant de débogage de screen

Appelez screen.debug() pour afficher le HTML rendu actuel dans la console — c’est utile lorsqu’une requête échoue et que vous devez voir ce qui est réellement rendu.

test('debugging a failing query', () => {
  render(<MyComponent />);
  screen.debug(); // prints rendered HTML
  screen.getByRole('button', { name: /save/i }); // then inspect output
});

Vérification rapide

Quelle requête devez-vous privilégier pour tester un bouton avec React Testing Library ?

Récapitulatif

RTL affiche les composants et interagit avec eux au moyen de requêtes fondées sur les rôles et de userEvent. Entourez les composants des fournisseurs requis, utilisez les correspondances de jest-dom pour des vérifications lisibles et préférez queryBy lorsque vous vérifiez une absence.

Questions Fréquemment Posées

La leçon « Tests d’intégration avec React Testing Library » est-elle gratuite ?

Oui — le texte complet de « Tests d’intégration avec React Testing Library » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tests d’intégration avec React Testing Library » ?

Rendez les composants dans les tests, déclenchez des événements et vérifiez le résultat visible plutôt que l’implémentation. Tu pratiques React 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 React Academy ?

Aucune expérience préalable n'est requise. React 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 1 sur 4.

Combien de temps prend la leçon « Tests d’intégration avec React Testing Library » ?

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 React Academy ?

Oui. Chaque leçon React 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

Tests d’intégration avec React Testing Library
Tester l’interface asynchrone et les appels d’API avec MSW
Premiers pas avec Playwright pour React
Tester les formulaires et les parcours utilisateur de bout en bout

← Retour à React Academy