Simulação de busca e temporizadores
Simule a rede com simulações de fetch e controle o tempo com temporizadores falsos; escreva testes estáveis e rápidos para componentes assíncronos.
Simulação de busca e temporizadores é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 3 aulas no total.
Por que simular rede e tempo
Objetivo: Simule operações assíncronas para que os testes sejam rápidos e confiáveis.
- Crie respostas simuladas para fetch
- Controle os temporizadores com relógios falsos
- Faça asserções usando findBy*/waitFor
Padrões comuns
- fetch: spyOn global.fetch → mockResolvedValue
- Temporizadores: vi.useFakeTimers(); avance os temporizadores
- Prefira findBy* para o DOM assíncrono
Demonstração: componente que busca dados ao clicar
Nos testes, simule fetch para retornar dados instantaneamente. Aqui, a interface simula uma busca lenta com setTimeout.
<div id="root"></div>
Demonstração: mensagem baseada em temporizador
Use temporizadores falsos nos testes para evitar a espera. Avance o tempo e faça uma asserção sobre a mensagem.
<div id="root"></div>
Referência: trechos de testes
Trechos de testes de referência (apenas para exibição): use spyOn em fetch e temporizadores falsos com Vitest.
<div id="root"></div>
Dicas e armadilhas
- Limpe os espiões: mockRestore após cada teste
- Use findBy* para interfaces assíncronas
- Volte a usar useRealTimers
Prática recomendada para testar temporizadores
Recapitulação
Recapitulação: Simule fetch para controlar as respostas e use temporizadores falsos para avançar o tempo instantaneamente. Faça asserções com findBy*/waitFor para obter testes assíncronos estáveis.
Perguntas Frequentes
A aula “Simulação de busca e temporizadores” é grátis?
Sim — o texto completo de “Simulação de busca e temporizadores” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 3 aulas no total.
O que vou aprender em “Simulação de busca e temporizadores”?
Simule a rede com simulações de fetch e controle o tempo com temporizadores falsos; escreva testes estáveis e rápidos para componentes assíncronos. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Simulação de busca e temporizadores”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do React Testing Library + Vitest/Jest
- Consultas, eventos e verificações — formulários e interfaces assíncronas
- Simulação de busca e temporizadores