react-testing
Escrever Testes React com Jest e Testing Library
Testar componentes React requer compreensão de renderização de componentes, interações do usuário e gerenciamento de estado assíncrono. Esta skill fornece padrões prontos para uso com Jest e React Testing Library que ajudam você a escrever testes confiáveis para componentes, stores, hooks e operações assíncronas.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "react-testing". Escreva um teste para um formulário de login que valida campos de email e senha, mostra erros obrigatórios e envia dados ao clicar no botão.
Erwartetes Ergebnis:
- Configurar userEvent para interações realistas de formulário
- Preencher campos de email e senha com dados de teste
- Verificar que erros de validação aparecem quando campos estão vazios
- Verificar que o manipulador de envio recebe dados do formulário ao clicar
- Verificar que o estado de carregamento desabilita o botão de envio durante o envio
Sicherheitsaudit
SicherPure documentation skill containing only markdown content with TypeScript testing pattern examples. Static findings are false positives - the scanner misinterpreted markdown code formatting and metadata fields as security issues. No executable code, network calls, file system access, or command execution capabilities. Safe for publication.
Risikofaktoren
🌐 Netzwerkzugriff (1)
⚙️ Externe Befehle (27)
Qualitätsbewertung
Was du bauen kannst
Aprender os fundamentos de teste de componentes
Comece com React Testing Library seguindo padrões para renderizar componentes, encontrar elementos e verificar comportamentos.
Testar gerenciamento de estado complexo
Aprenda como testar stores Zustand, lidar com operações assíncronas de store e redefinir o estado da store entre testes para evitar testes instáveis.
Simular APIs e testar fluxos assíncronos
Configure simulação adequada para chamadas fetch, teste integração com React Query e lide com estados de carregamento e erro em componentes.
Probiere diese Prompts
Escreva um teste Jest para um componente Button usando React Testing Library. O componente deve aceitar as props label e onClick. Use userEvent para a interação de clique.
Mostre-me como redefinir adequadamente o estado da store Zustand entre testes para evitar que o estado vaze entre casos de teste.
Escreva um teste para um hook personalizado useUserData que busca dados do usuário. Inclua verificação de estado de carregamento e limpeza adequada entre testes.
Como testar um componente React Router que exibe detalhes do usuário a partir de parâmetros da URL usando MemoryRouter e asserções waitFor?
Bewährte Verfahren
- Use consultas getByRole e findBy em vez de IDs de teste para encontrar elementos de forma acessível
- Envolva operações assíncronas em act() para evitar avisos de atualização de estado
- Redefina o estado da store no beforeEach para evitar poluição de testes
Vermeiden
- Usar detalhes de implementação como nomes de classes em vez de roles acessíveis
- Pular wrappers act() para atualizações de estado assíncronas
- Testar estado interno em vez de saída renderizada