Les Tests dans React

Les tests sont essentiels pour garantir la qualité et la maintenabilité de vos applications React. Nous allons explorer les différents types de tests et les outils disponibles.

Configuration de base

Create React App inclut déjà Jest et React Testing Library. Pour les projets existants :

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

Tests unitaires

Test d'un composant simple

// Button.js
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

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

test('rendre le bouton avec le bon texte', () => {
  render(<Button>Cliquez-moi</Button>);
  expect(screen.getByText('Cliquez-moi')).toBeInTheDocument();
});

test('appeler onClick quand le bouton est cliqué', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Cliquez-moi</Button>);
  
  fireEvent.click(screen.getByText('Cliquez-moi'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});