Mocking av Fetch og timere
Stubb nettverket med fetch-mocker, og styr tiden med falske timere. Skriv stabile og raske tester for asynkrone komponenter.
Mocking av Fetch og timere er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 3 leksjoner.
Hvorfor mocke nettverk og tid
Mål: Mocke asynkront arbeid slik at testene blir raske og pålitelige.
- Sett opp svar fra fetch
- Kontroller tidtakere med falske klokker
- Verifiser med findBy*/waitFor
Vanlige mønstre
- fetch: spyOn global.fetch → mockResolvedValue
- Tidtakere: vi.useFakeTimers(); gå frem i tid
- Foretrekk findBy* for asynkront DOM-innhold
Demonstrasjon: komponent som henter ved klikk
I tester bør De mock fetch slik at data returneres umiddelbart. Her simulerer brukergrensesnittet en langsom henting med setTimeout.
<div id="root"></div>
Demonstrasjon: tidsbasert melding
Bruk falske tidtakere i testene for å slippe å vente. Gå frem i tid og verifiser meldingen.
<div id="root"></div>
Referanse: testutdrag
Referanseutdrag fra tester (vises kun): bruk spy på fetch og falske tidtakere med Vitest.
<div id="root"></div>
Tips og fallgruver
- Rydd opp i spioner: mockRestore etter hver test
- Bruk findBy* for asynkrone brukergrensesnitt
- Bytt tilbake med useRealTimers
Beste praksis for testing av tidtakere
Oppsummering
Oppsummering: Mock fetch for å kontrollere svarene, og bruk falske tidtakere til å hoppe umiddelbart frem i tid. Verifiser med findBy*/waitFor for stabile asynkrone tester.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Mocking av Fetch og timere» gratis?
Ja – hele teksten i «Mocking av Fetch og timere» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Mocking av Fetch og timere»?
Stubb nettverket med fetch-mocker, og styr tiden med falske timere. Skriv stabile og raske tester for asynkrone komponenter. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Mocking av Fetch og timere»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Oppsett av React Testing Library + Vitest/Jest
- Forespørsler, hendelser og påstander – skjemaer og asynkront brukergrensesnitt
- Mocking av Fetch og timere