Mockning av fetch och timers
Stubb nätverket med fetch-mockar och kontrollera tiden med fejkade timers. Skriv stabila och snabba tester för asynkrona komponenter.
Mockning av fetch och timers är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför mocka nätverk och tid
Mål: Mocka asynkront arbete så att testerna blir snabba och tillförlitliga.
- Stubb-svar från fetch
- Kontrollera timers med fejkade klockor
- Verifiera med findBy*/waitFor
Vanliga mönster
- fetch: spyOn global.fetch → mockResolvedValue
- Timers: vi.useFakeTimers(); flytta fram timers
- Föredra findBy* för asynkron DOM
Demo: widget som hämtar data vid klick
I tester mockar ni fetch så att data returneras direkt. Här simulerar UI:t en långsam hämtning med setTimeout.
<div id="root"></div>
Demo: timerbaserat meddelande
Använd fejkade timers i tester för att slippa vänta. Flytta fram tiden och verifiera meddelandet.
<div id="root"></div>
Referens: testkodsnuttar
Testkodsnuttar som referens (visas endast): spionera på fetch och använd fejkade timers med Vitest.
<div id="root"></div>
Tips och fallgropar
- Städa upp spioner: mockRestore efter varje test
- Använd findBy* för asynkront UI
- Byt tillbaka med useRealTimers
Bästa praxis för testning av timers
Sammanfattning
Sammanfattning: Mocka fetch för att kontrollera svaren och använd fejkade timers för att hoppa framåt i tiden direkt. Verifiera med findBy*/waitFor för stabila asynkrona tester.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Mockning av fetch och timers” gratis?
Ja – hela texten till ”Mockning av fetch och timers” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Mockning av fetch och timers”?
Stubb nätverket med fetch-mockar och kontrollera tiden med fejkade timers. Skriv stabila och snabba tester för asynkrona komponenter. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.
Hur lång tid tar lektionen ”Mockning av fetch och timers”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React Testing Library + konfiguration av Vitest/Jest
- Frågor, händelser och påståenden — formulär och asynkront gränssnitt
- Mockning av fetch och timers