Projeto 13 – Biblioteca de Componentes Testada 🧪
Neste projeto, você vai criar uma pequena biblioteca de componentes UI (Botão, Input, Modal) e garantir que todos funcionem perfeitamente através de testes automatizados.
🎯 Objetivo
Configurar o ambiente de testes do zero, escrever suítes de teste para diferentes cenários e garantir 100% de confiança nas interações críticas.
🛠️ Requisitos
- Uso de Vitest e React Testing Library.
- Implementação de testes para: Renderização, Props e Eventos de Clique.
- Uso de jest-dom para asserções amigáveis.
📝 Passo a Passo
1. Configuração do Vitest
Crie o arquivo vitest.config.js e configure o ambiente para jsdom.
2. Componente de Botão
Crie um componente MeuBotao que aceita as props children, onClick e disabled.
- Teste se ele renderiza o texto passado em children.
- Teste se a função onClick é disparada ao clicar.
- Teste se ele fica desabilitado quando a prop disabled for verdadeira.
3. Componente de Input de Busca
Crie um componente que tenha um input e um botão de limpar. - Teste se o valor do input muda ao digitar. - Teste se o campo fica vazio ao clicar no botão "Limpar".
4. Rodando os Testes
Use o comando npm test para visualizar o relatório de sucesso no terminal.
✅ Critérios de Entrega
- Todos os testes devem passar (ficar verdes).
- Os arquivos de teste devem ter a extensão
.test.jsxou.spec.jsx. - O código deve estar livre de "warnings" de act() (comum em testes assíncronos).
Bônus
Tente habilitar a visualização de Coverage (Cobertura) para ver quanto por cento do seu código está sendo testado!