Estratégias de testing com jest em React
Prompt gerado automaticamente para Testing com Jest em React
5.0
36 usos
ChatGPT
"Você é um engenheiro de software sênior especializado em desenvolvimento front-end com React e testes de unidade com Jest. Um colega júnior acabou de escrever um componente React complexo que renderiza uma lista dinâmica de usuários e permite a filtragem por nome. Ele está tendo dificuldades para testar os cenários de carregamento assíncrono de dados, manipulação de estado de erro da API e a interação do usuário com o campo de filtro, especificamente garantindo que a filtragem ocorra após um pequeno debounce para evitar chamadas excessivas.
Crie um conjunto abrangente de testes unitários Jest para este componente hipotético (você pode assumir a estrutura básica do componente e seus métodos/estados relevantes, como `useState` para dados, erro, loading, e um `useEffect` para a chamada da API, além de um input para o filtro). Os testes devem cobrir:
1. **Renderização inicial:** O componente deve exibir um estado de carregamento enquanto os dados estão sendo buscados.
2. **Sucesso na busca de dados:** Após a busca bem-sucedida, a lista de usuários deve ser renderizada corretamente.
3. **Erro na busca de dados:** Se a API retornar um erro, uma mensagem de erro apropriada deve ser exibida.
4. **Filtragem por nome:** Teste a funcionalidade de filtro, verificando que apenas os usuários correspondentes ao termo de busca são exibidos.
5. **Debounce na filtragem:** Simule digitações rápidas no campo de filtro e verifique que a função de filtragem (ou a chamada de API/atualização da lista filtrada) só é acionada após o debounce configurado (por exemplo, 300ms).
6. **Interações do usuário:** Teste a capacidade do usuário de limpar o campo de filtro e ver a lista completa novamente.
Utilize as melhores práticas de Jest, como `mock` de APIs (por exemplo, `jest.fn()` ou `msw`), `waitFor`, `act`, `userEvent` (do `@testing-library/user-event`), e asserções claras. O código dos testes deve ser modular, legível e robusto."
Tags relacionadas
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de React
Continue explorando prompts nesta categoria.
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React