Simuler la récupération et les minuteurs
Simulez le réseau avec des simulations de récupération et contrôlez le temps avec de faux minuteurs ; écrivez des tests stables et rapides pour les composants asynchrones.
Simuler la récupération et les minuteurs est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi simuler le réseau et le temps
Objectif : Simulez les opérations asynchrones pour que les tests soient rapides et fiables.
- Simulez les réponses de récupération
- Contrôlez les minuteurs avec des horloges simulées
- Vérifiez les résultats avec findBy*/waitFor
Modèles courants
- Récupération : spyOn global.fetch → mockResolvedValue
- Minuteurs : vi.useFakeTimers() ; faites avancer les minuteurs
- Privilégiez findBy* pour le DOM asynchrone
Démo : composant de récupération au clic
Dans les tests, simulez la récupération pour qu’elle renvoie les données instantanément. Ici, l’interface simule une récupération lente avec setTimeout.
<div id="root"></div>
Démo : message basé sur un minuteur
Utilisez des minuteurs simulés dans les tests pour éviter l’attente. Faites avancer le temps et vérifiez le message.
<div id="root"></div>
Référence : extraits de tests
Extraits de tests de référence (affichage uniquement) : espionnez la récupération et utilisez des minuteurs simulés avec Vitest.
<div id="root"></div>
Conseils et pièges
- Nettoyez les espions : mockRestore après chaque test
- Utilisez findBy* pour l’interface asynchrone
- Revenez aux minuteurs réels avec useRealTimers
Bonne pratique pour tester les minuteurs
Récapitulatif
Récapitulatif : Simulez la récupération pour contrôler les réponses et utilisez des minuteurs simulés pour faire avancer le temps instantanément. Vérifiez les résultats avec findBy*/waitFor pour obtenir des tests asynchrones stables.
Questions Fréquemment Posées
La leçon « Simuler la récupération et les minuteurs » est-elle gratuite ?
Oui — le texte complet de « Simuler la récupération et les minuteurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Simuler la récupération et les minuteurs » ?
Simulez le réseau avec des simulations de récupération et contrôlez le temps avec de faux minuteurs ; écrivez des tests stables et rapides pour les composants asynchrones. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Simuler la récupération et les minuteurs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configuration de React Testing Library et de Vitest/Jest
- Requêtes, événements, assertions — formulaires et interface asynchrone
- Simuler la récupération et les minuteurs