Testing Library

Testing 🟢 Junior

Définition

Famille de librairies (React, Vue, DOM) qui encourage a tester les composants comme un utilisateur les utilise, en ciblant les éléments par role, label ou texte plutôt que par sélecteur CSS.

Analogie

Comme tester une télécommande en appuyant sur les boutons comme un utilisateur, sans démonter le boîtier pour vérifier les circuits.

Exemple de code

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

test('shows greeting on click', () => {
  render(<Greeter />);
  fireEvent.click(screen.getByRole('button', { name: /say hi/i }));
  expect(screen.getByText('Hello!')).toBeInTheDocument();
});

Cas d'usage

Pour tester les composants React/Vue en se concentrant sur le comportement utilisateur plutôt que l'implémentation.

Anti-pattern

Utiliser container.querySelector au lieu des queries sémantiques, perdant tout l'intérêt de la librairie.

Termes liés

#testing#tooling#react

← → au clavier pour passer d'une fiche à l'autre