Mocking Fetch & Timers
Stub network with fetch mocks and control time with fake timers; write stable, fast tests for async components.
Mocking Fetch & Timers is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why mock network & time
Goal: Mock async work so tests are fast and reliable.
- Stub fetch responses
- Control timers with fake clocks
- Assert using findBy*/waitFor
Common patterns
- fetch: spyOn global.fetch → mockResolvedValue
- Timers: vi.useFakeTimers(); advance timers
- Prefer findBy* for async DOM
Demo: fetch-on-click widget
In tests, mock fetch to return data instantly. Here the UI simulates a slow fetch with setTimeout.
<div id="root"></div>
Demo: timer-based message
Use fake timers in tests to skip waiting. Advance time and assert the message.
<div id="root"></div>
Reference: test snippets
Reference test snippets (display only): spy on fetch and fake timers with Vitest.
<div id="root"></div>
Tips & gotchas
- Clean up spies: mockRestore after each test
- Use findBy* for async UI
- Switch back with useRealTimers
Timers testing best practice
Recap
Recap: Mock fetch to control responses and use fake timers to jump time instantly. Assert with findBy*/waitFor for stable async tests.
Frequently asked questions
Is the “Mocking Fetch & Timers” lesson free?
Yes — the full text of “Mocking Fetch & Timers” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Mocking Fetch & Timers”?
Stub network with fetch mocks and control time with fake timers; write stable, fast tests for async components. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Mocking Fetch & Timers” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- React Testing Library + Vitest/Jest Setup
- Queries, Events, Assertions — Forms & Async UI
- Mocking Fetch & Timers