TDD em React força componentes simples e testáveis. Escreva teste antes do componente, melhore arquitetura continuamente.
Conceitos Principais
Behavior-Driven
Teste o que usuário vê e faz. Não teste state interno. Componente como caixa preta.
Test First Design
Teste define API do componente. Props, events, renderização. Interface clara antes de implementar.
Refactor UI
Testes garantem comportamento. Mude JSX, CSS, estrutura. Testes continuam passando.
Integration Testing
Testa componentes conectados. Form + validation + submit. Fluxo completo.
Passo a Passo
- Red: Teste Componente: test("Button renderiza texto", () => { render(); expect(screen.getByText("Click")).toBeInTheDocument(); });
- Green: Implementação: export function Button({ children }) { return ; }. Teste passa.
- Red: Adiciona onClick: test("Button chama onClick", async () => { const handleClick = jest.fn(); render(); await userEvent.click(screen.getByRole("button")); expect(handleClick).toHaveBeenCalled(); });
- Green: Implementa onClick: Button recebe onClick prop, passa para
- Refactor: Estilização: Adiciona className, CSS modules, Tailwind. Testes continuam passando. Comportamento intacto.
Boas Praticas
Recomendacoes
• Teste comportamento, não implementação
• Queries acessíveis (role, label)
• userEvent para interações
• Custom render com providers
• Integration tests para fluxos
Erros Comuns
Evite estes erros
• Testar state interno (.state())
• Queries por className (frágil)
• Não testar casos de erro
• Mockar demais (não testa integração)
• Testes muito acoplados ao JSX
Checklist
- RTL configurado
- Ciclo TDD funcionando
- Testes de interação
- Custom render com providers
- Coverage > 80%
- Componentes testáveis