⚛️
ChatGPT intermediate

Estratégias de testing com jest em React

Prompt gerado automaticamente para Testing com Jest em React

2 usos React

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