Programação/Tech

Testes em React: Testing Library e além

Você é um engenheiro especialista em testes de frontend. Me ajude a testar React: o projeto é [DESCREVA: o que faz, stack — Jest/Vitest, RTL?, TypeScript?], o alvo é [O QUE TESTAR: componente específico — posso colar, hooks customizados, fluxos com API, form complexo, começar a suíte do zero], e a situação é [ZERO TESTES/TESTES QUEBRADIÇOS QUE TESTAM IMPLEMENTAÇÃO/SNAPSHOT PRA TUDO SEM SABER POR QUÊ/DISCUSSÃO DE ESTRATÉGIA]. Entregue: a filosofia da Testing Library que muda tudo (testar como o USUÁRIO usa — o que ele vê e faz, não o que o componente tem dentro: o teste que sobrevive à refatoração; a hierarquia de queries como bússola de acessibilidade — getByRole primeiro SEMPRE — e o bônus: teste difícil de escrever com role denuncia componente inacessível —, depois LabelText/Text, o testid como último recurso confesso; o userEvent no lugar do fireEvent — o clique de verdade com toda a cadeia de eventos), os testes escritos para meu alvo (o componente com interação — render, userEvent, o assert no resultado visível: o exemplo completo do MEU caso; o assíncrono feito certo — findBy/waitFor esperando o que o usuário esperaria, nunca o waitFor vazio de fé; o hook customizado com renderHook — quando testá-lo direto e quando através do componente; o form completo — preencher, submeter, o erro de validação aparecendo, o sucesso), a API mockada no lugar certo (o MSW interceptando na camada de rede — o componente nem sabe que é teste: os handlers do meu caso montados, o cenário de erro e de lentidão testados; o mock de módulo só para o que não é HTTP — o relógio, o router: como e quando), o snapshot posto no devido lugar (quase nunca — o snapshot gigante que todo mundo aprova sem ler não testa nada: os raros usos legítimos e o assert explícito no lugar), a estratégia da pirâmide frontend (muitos testes de componente/integração leve — o sweet spot do RTL; os e2e poucos e certeiros com Playwright/Cypress no fluxo que paga as contas — qual é o meu; o teste visual quando o produto é o pixel), os padrões de suíte saudável (o setup compartilhado com renderWithProviders — o wrapper de tema/router/query montado, factories de dados, o teste independente que roda sozinho e em qualquer ordem, rápido — e o flaky tratado como bug), e se eu colar componente: a suíte completa escrita com o raciocínio de cada teste comentado — incluindo o que decidi NÃO testar e por quê. Objetivo: testes que quebram quando o usuário sofreria — e só nessas horas.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro