React Testing Library

React 🟡 Mid

Définition

Librairie de test qui encourage les tests du point de vue de l'utilisateur. On interagit via roles, labels et texte visible, pas via les détails d'implémentation.

Analogie

Comme un testeur mystère dans un restaurant : il teste l'expérience client, pas la recette du chef.

Exemple de code

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

test('incremente le compteur', () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole('button', { name: /incrementer/i }));
  expect(screen.getByText('1')).toBeInTheDocument();
});

Cas d'usage

Tests unitaires et d'intégration de composants React, focus sur le comportement utilisateur.

Anti-pattern

Tester les détails d'implémentation (state interne, nombre de re-rendus) au lieu du comportement.

Termes liés

#testing#interview#bestpractice

En entretien

Explique-moi la philosophie de React Testing Library.
Elle encourage à tester du point de vue de l'utilisateur, en interagissant via les rôles, labels et texte visible plutôt que les détails d'implémentation, comme un testeur mystère qui juge l'expérience client et pas la recette du chef. On utilise par exemple screen.getByRole pour cliquer sur un bouton et vérifier le texte affiché.
Quel est l'anti-pattern classique en testant avec RTL ?
Tester les détails d'implémentation comme le state interne ou le nombre de re-rendus, au lieu du comportement observable par l'utilisateur. Ça rend les tests fragiles dès qu'on refactore l'implémentation sans changer le comportement.

Fiche mise à jour le 2026-09-27