Testes no React

Os testes são essenciais para garantir a qualidade e a manutenibilidade das suas aplicações React. Vamos explorar os diferentes tipos de testes e as ferramentas disponíveis.

Configuração básica

O Create React App já inclui Jest e React Testing Library. Para projetos existentes:

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

Testes unitários

Teste de um componente simples

// 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);
});