🧪 TDD com React: Como Escrever Testes de Componentes com Confiança
✨ Introdução
Testar componentes React é mais fácil (e mais importante) do que parece.
Se você já pensou:
“Será que vale a pena testar botão e input?”
“Por onde começo com TDD no React?”
Você está no lugar certo.
Neste post você vai aprender:
- Como aplicar TDD na criação de componentes React
- Como usar React Testing Library e Jest
- Como escrever testes focados no comportamento, não no código
Vamos lá? 🚀
🔧 Pré-requisitos
- Projeto React criado com Vite, CRA ou Next.js
- Instalar as libs:
npm install --save-dev @testing-library/react @testing-library/jest-dom jest
Se estiver usando Vite:
npm install --save-dev vitest jsdom
E configure seu vite.config.js para incluir testes:
test: {
environment: 'jsdom',
},🧠 O que testar em um componente React?
Não teste a implementação interna. Teste o comportamento visível para o usuário.
Exemplos práticos:
| Componente | O que testar |
|---|---|
| Botão | Se ele chama uma função ao clicar |
| Input | Se atualiza o valor corretamente |
| Formulário | Se envia os dados corretamente |
| Lista | Se renderiza os itens da API |
| Modal | Se aparece/fecha com base em ações |
📦 Exemplo Prático com TDD: Contador
1. Escrevendo o teste (RED)
2. Criar componente (GREEN)
✅ O teste agora passa.
3. Refatorar (REFACTOR)
- Extrair estilos
- Melhorar semântica
- Separar lógica em hook, se crescer
🛡️ Boas Práticas de TDD com React
| Prática | Por quê |
|---|---|
| Teste o que o usuário vê | Foca no comportamento, não na implementação |
Use screen.getByRole ou getByText | Mais semântico e resiliente |
| Evite testar componentes visuais puros | Teste lógica e interação |
| Mantenha os testes pequenos e descritivos | Um teste por cenário |
🧰 Ferramentas recomendadas
| Lib | Para quê |
|---|---|
@testing-library/react | Testar componentes de forma semântica |
@testing-library/user-event | Simular interações mais realistas |
jest-dom | Matchers úteis como toBeInTheDocument |
msw | Simular APIs externas em testes |
🔥 Bônus: Testando formulário com TDD
Imagine um formulário de login:
Esse teste define o comportamento esperado antes do código existir. Isso é TDD de verdade no frontend.
📣 Conclusão
Aplicar TDD no React:
- Deixa seu código mais confiável
- Te dá liberdade para refatorar sem medo
- Evita regressões (aquele bug que volta…)
Mesmo começando com componentes simples, você logo vai aplicar TDD em:
- Forms
- Integrações com APIs
- Fluxos complexos de UI
💡 Que tal testar o próximo componente do seu projeto usando esse modelo?