Como testar testing com jest em React

Prompt gerado automaticamente para Testing com Jest em React

5.0
42 usos
ChatGPT
Usar no ChatGPT
Você é um engenheiro de software sênior especializado em desenvolvimento front-end com React e testes unitários. Preciso que você crie um guia prático e conciso para um desenvolvedor júnior que está começando a usar Jest para testar componentes React. O guia deve focar em como escrever testes robustos e de fácil manutenção para componentes que interagem com a API (simulando chamadas assíncronas com `mock` de `axios` ou `fetch`) e que gerenciam estado interno. Inclua exemplos de código claros e com boas práticas, abordando:

1.  **Configuração inicial do Jest para React (com `@testing-library/react`).**
2.  **Testando renderização e interações básicas (cliques, digitação).**
3.  **Simulando chamadas assíncronas:**
    *   Como "mockar" `axios.get` ou `fetch` para retornar dados controlados.
    *   Como testar o estado de carregamento, sucesso e erro após a chamada.
    *   Uso de `waitFor` e `findBy` para lidar com atualizações assíncronas na UI.
4.  **Testando componentes com estado local:**
    *   Como simular mudanças de estado através de interações do usuário.
    *   Como verificar se o estado foi atualizado corretamente.
5.  **Boas práticas:**
    *   Princípios F.I.R.S.T. (Fast, Isolated, Repeatable, Self-validating, Timely) aplicados a testes de componentes React.
    *   Uso de `screen` e queries da `@testing-library/react` (priorizando `getByRole`, `getByText`, etc.).
    *   Evitar testes de implementação.
    *   Estrutura de arquivos de teste (`.test.js` ou `.spec.js`).

O tom deve ser didático, encorajador e prático. O objetivo é que o desenvolvedor júnior consiga aplicar esses conceitos imediatamente em seus projetos.

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.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

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