Estratégias de Testes no Front-End
Este guia detalha os tipos de testes e estratégias aplicadas para garantir a qualidade e resiliência das nossas interfaces.
1. Testes de Unidade e Integração (RTL)
Focamos no comportamento, não na implementação. Usamos o React Testing Library (RTL) para simular como o usuário interage com o componente.
- Unidade: Testa componentes puros ou funções utilitárias isoladas.
- Integração: Testa a colaboração entre múltiplos componentes ou a integração de um componente com seu hook de funcionalidade.
- Mocks: Usamos
jestouvitestmocks para isolar dependências externas, mas preferimos o MSW (Mock Service Worker) para simular respostas de API de forma realista.
2. Testes de Ponta a Ponta (E2E)
Simulam o fluxo completo do usuário no navegador real, incluindo navegação e persistência.
- Ferramentas: Cypress ou Playwright.
- Foco: Fluxos críticos (Caminho Feliz), como login, agendamento de teleconsulta e finalização de prontuário.
- Dica: Não tente testar tudo via E2E; eles são lentos e caros. Siga a Pirâmide de Testes.
3. Testes de Regressão Visual
Garantem que mudanças no código não quebraram o visual da aplicação (CSS indesejado, componentes desalinhados).
- Como funciona: Captura screenshots da aplicação e compara com uma "baseline" (imagem de referência).
- Ferramentas: Percy, Chromatic ou Playwright Visual Comparisons.
- Importância: Vital para manter a consistência do Design System.
4. Estratégias de Mocking
- MSW (Mock Service Worker): Intercepta requisições a nível de rede. É a melhor forma de testar sem precisar de um backend real ligado, mantendo o código de rede intacto.
- Data Factories: Use ferramentas para gerar dados de teste consistentes e aleatórios (ex:
faker.js).
5. Cobertura vs. Confiança
Não buscamos 100% de cobertura de linhas. Buscamos 100% de confiança nos fluxos que trazem valor ao negócio.
- Teste comportamentos, não estados internos.
- Teste acessibilidade (A11y) como parte do fluxo de teste.