Introdução ao React Testing Library

O que você vai aprender neste tutorial

✓ Configuração
✓ Como escrever testes básicos
✓ Uso adequado de queries
✓ Eventos de usuário
✓ Testes assíncronos

Step 1: Configuração

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event jest jest-environment-jsdom

Step 2: Testes Básicos

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

// Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
  });

  it('calls onClick when clicked', async () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    await userEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Step 3: Uso Adequado de Queries

// Prioridade (foco em acessibilidade)
screen.getByRole('button', { name: 'Submit' });  // Prioridade máxima
screen.getByLabelText('Email');                   // Elementos de formulário
screen.getByPlaceholderText('Enter email');       // Placeholder
screen.getByText('Hello World');                  // Texto
screen.getByTestId('custom-element');             // Último recurso

// Verificação de existência
screen.queryByRole('button');  // Retorna null se não encontrar
await screen.findByRole('button');  // Aguarda assincronamente

Step 4: Testes de Formulário

// LoginForm.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

it('submits form with correct values', async () => {
  const handleSubmit = jest.fn();
  render(<LoginForm onSubmit={handleSubmit} />);

  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
  await userEvent.type(screen.getByLabelText('Password'), 'password123');
  await userEvent.click(screen.getByRole('button', { name: 'Login' }));

  expect(handleSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

Step 5: Testes Assíncronos

// UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { UserList } from './UserList';

it('displays users after loading', async () => {
  render(<UserList />);

  expect(screen.getByText('Loading...')).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText('Alice')).toBeInTheDocument();
  });

  expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
});

Step 6: Mocks

// Mock de API
jest.mock('./api', () => ({
  fetchUsers: jest.fn().mockResolvedValue([
    { id: 1, name: 'Alice' }
  ])
}));

// Mock de componente
jest.mock('./Header', () => ({
  Header: () => <div data-testid="mock-header">Header</div>
}));

Resumo

React Testing Library recomenda escrever testes do ponto de vista do usuário. Teste usando queries que consideram acessibilidade.