Fetch und Timer mocken
Simulieren Sie das Netzwerk mit Fetch-Mocks und steuern Sie die Zeit mit Fake-Timern. Schreiben Sie stabile, schnelle Tests für asynchrone Komponenten.
Fetch und Timer mocken ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum Netzwerk und Zeit mocken
Ziel: Mocken Sie asynchrone Abläufe, damit Tests schnell und zuverlässig sind.
- Stellen Sie Antworten von fetch als Stub bereit
- Steuern Sie Timer mit Fake Clocks
- Überprüfen Sie mit findBy*/waitFor
Gängige Muster
- fetch: global.fetch mit spyOn überwachen → mockResolvedValue
- Timer: vi.useFakeTimers(); Timer voranbringen
- Bevorzugen Sie findBy* für asynchrones DOM
Demo: Widget mit Abruf bei Klick
Mocken Sie in Tests fetch, damit Daten sofort zurückgegeben werden. Hier simuliert die Benutzeroberfläche mit setTimeout einen langsamen Abruf.
<div id="root"></div>
Demo: timerbasierte Nachricht
Verwenden Sie in Tests Fake Timer, um das Warten zu überspringen. Lassen Sie die Zeit voranschreiten und überprüfen Sie die Nachricht.
<div id="root"></div>
Referenz: Test-Snippets
Referenz-Snippets für Tests (nur Anzeige): Überwachen Sie fetch und verwenden Sie Fake Timer mit Vitest.
<div id="root"></div>
Tipps und Fallstricke
- Bereinigen Sie Spy-Objekte: mockRestore nach jedem Test
- Verwenden Sie findBy* für asynchrone Benutzeroberflächen
- Wechseln Sie mit useRealTimers zurück
Best Practice zum Testen von Timern
Zusammenfassung
Zusammenfassung: Mocken Sie fetch, um Antworten zu steuern, und verwenden Sie Fake Timer, um die Zeit sofort voranzubringen. Überprüfen Sie mit findBy*/waitFor, damit asynchrone Tests stabil bleiben.
Häufig gestellte Fragen
Ist die Lektion „Fetch und Timer mocken“ kostenlos?
Ja — der vollständige Text von „Fetch und Timer mocken“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Fetch und Timer mocken“?
Simulieren Sie das Netzwerk mit Fetch-Mocks und steuern Sie die Zeit mit Fake-Timern. Schreiben Sie stabile, schnelle Tests für asynchrone Komponenten. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Fetch und Timer mocken“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React Testing Library + Vitest/Jest einrichten
- Abfragen, Events und Assertions – Formulare und asynchrone UI
- Fetch und Timer mocken