Simulación de Fetch y temporizadores
Simule la red con mocks de fetch y controle el tiempo con temporizadores falsos; escriba pruebas estables y rápidas para componentes asíncronos.
Simulación de Fetch y temporizadores es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Por qué simular la red y el tiempo
Objetivo: Simule el trabajo asíncrono para que las pruebas sean rápidas y fiables.
- Simule respuestas de fetch
- Controle los temporizadores con relojes simulados
- Haga aserciones con findBy*/waitFor
Patrones habituales
- fetch: spyOn global.fetch → mockResolvedValue
- Temporizadores: vi.useFakeTimers(); avance los temporizadores
- Prefiera findBy* para el DOM asíncrono
Demostración: widget que hace fetch al hacer clic
En las pruebas, simule fetch para que devuelva los datos al instante. Aquí la interfaz simula un fetch lento con setTimeout.
<div id="root"></div>
Demostración: mensaje basado en un temporizador
Use fake timers en las pruebas para evitar la espera. Avance el tiempo y verifique el mensaje.
<div id="root"></div>
Referencia: fragmentos de pruebas
Fragmentos de pruebas de referencia (solo para mostrar): spy sobre fetch y uso de fake timers con Vitest.
<div id="root"></div>
Consejos y errores comunes
- Limpie los spies: use mockRestore después de cada prueba
- Use findBy* para interfaces asíncronas
- Vuelva a los temporizadores reales con useRealTimers
Buena práctica para probar temporizadores
Resumen
Resumen: Simule fetch para controlar las respuestas y use fake timers para avanzar el tiempo al instante. Haga aserciones con findBy*/waitFor para obtener pruebas asíncronas estables.
Preguntas frecuentes
¿La lección «Simulación de Fetch y temporizadores» es gratis?
Sí — el texto completo de «Simulación de Fetch y temporizadores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Simulación de Fetch y temporizadores»?
Simule la red con mocks de fetch y controle el tiempo con temporizadores falsos; escriba pruebas estables y rápidas para componentes asíncronos. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Simulación de Fetch y temporizadores»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de React Testing Library + Vitest/Jest
- Consultas, eventos y aserciones — formularios e interfaces asíncronas
- Simulación de Fetch y temporizadores