Prompt completo
"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
React
Testing com Jest
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de React
ChatGPT
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
4 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
4 usos
ChatGPT
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
4 usos