React Testing Library força você a testar como usuários interagem. Esqueça implementation details, foque em comportamento.
Conceitos Principais
Queries
getByRole: busca por aria role. getByText: conteúdo visível. getByLabelText: form labels. Priorize acessibilidade.
User Events
userEvent.click(button). userEvent.type(input, "texto"). Simula interação real. Melhor que fireEvent.
Async Testing
waitFor(() => expect...). findBy queries esperam. act() automático. Testing async state changes.
Accessibility
Queries forçam markup acessível. getByRole garante aria roles. Testes falham se inacessível.
Passo a Passo
- Setup RTL: npm install -D @testing-library/react @testing-library/user-event. Jest ou Vitest. Import render, screen.
- Teste Básico: render(). screen.getByRole("button", { name: "Click" }). expect(button).toBeInTheDocument().
- User Interactions: import userEvent from "@testing-library/user-event". await userEvent.click(button). expect(text).toBeVisible().
- Async Tests: await screen.findByText("Loaded"). ou waitFor(() => expect(api).toHaveBeenCalled()). Espera automática.
- Custom Render: Wrapper com providers:
Boas Praticas
Recomendacoes
• Priorize queries: role > label > text > testId
• userEvent ao invés de fireEvent
• Teste comportamento, não state interno
• Um componente por teste file
• Setup render wrapper para providers
Erros Comuns
Evite estes erros
• Usar data-testid como primeira opção
• Testar state interno com .state()
• fireEvent ao invés de userEvent
• Não testar acessibilidade
• Queries muito específicas (quebram com refactor)
Checklist
- RTL instalado
- Queries acessíveis configuradas
- userEvent para interações
- Async tests funcionando
- Custom render com providers
- Coverage > 80%