Testing Library

Testing 🟢 Junior

Definition

Famille de librairies (React, Vue, DOM) qui encourage a tester les composants comme un utilisateur les utilise, en ciblant les elements par role, label ou texte plutot que par selecteur CSS.

Analogie

Comme tester une telecommande en appuyant sur les boutons comme un utilisateur, sans demonter le boitier pour verifier 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 plutot que l'implementation.

Anti-pattern

Utiliser container.querySelector au lieu des queries semantiques, perdant tout l'interet de la librairie.

Termes lies

#testing#tooling#react