test-component
test-component é a orientação pra testar um componente ou hook isolado — testes
rápidos que exercitam comportamento do jeito que um usuário faz, com a rede
mockada. É a base larga da pirâmide de testes: de onde a maior parte da sua
confiança de front-end deveria vir, porque esses testes são rápidos e estáveis.
O que resolve
Testes de componente costumam falhar em uma de duas direções. Acoplados demais —
assertando sobre classes CSS, useState interno ou ordem de render — e todo
refactor os quebra. Rasos demais — mockando a camada de serviço em vez da rede —
e passam enquanto a fiação real está quebrada. De um jeito ou de outro a suíte
deixa de significar algo. Esta skill traça as linhas que mantêm os testes de
componente honestos e manuteníveis.
Como resolve
O princípio central é testar comportamento, não implementação:
- Query por acessibilidade — ache elementos por role e label, do jeito que um usuário (ou leitor de tela) faz, não por test-id ou seletor CSS.
user-event, nãofireEvent— modele interações reais (digitar, clicar, tabular) em vez de eventos DOM crus.- Mock na fronteira de rede com MSW — intercepte HTTP, não a camada de
serviço/
axios, pra que a fiação real de dados do componente fique sob teste. - Uma linha clara vs E2E — testes de componente cobrem um componente/hook com
a rede mockada;
test-e2ecobre o app montado num browser real. Não re-teste em E2E o que um teste de componente rápido já prova.
Quando usar
Escrevendo testes pra um componente, hook ou form. Faz par com frontend-patterns
(onde esses componentes são construídos) e complementa test-e2e — juntos são a
metade front-end da pirâmide de testes.