Loading, success and error with an injected fake API
Each fake answers after 200 ms, so findBy and waitForElementToBeRemoved really wait. The third test wraps the fake to record its arguments: what vi.fn() does in Vitest.
Async UI is tested by waiting for what the user will finally see with findBy and waitFor; the network is replaced with fakes (injected functions, vi.fn/vi.mock, or MSW), timers with fake timers, and an act(...) warning means an update happened that your test didn't wait for.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a test (live helper style) for a Weather component that receives getWeather and shows Pune: 31 °C. Use a fake that resolves after 100 ms.
Write the MSW handler and a test override that makes GET https://api.example.com/todos return an empty array, and assert the component shows No todos yet.
Explain it without notes
How do you test a component that loads data in an effect?
Compare injecting a fake, vi.mock, and MSW for mocking network calls.
What does the "not wrapped in act(...)" warning mean and how do you fix it properly?
How do fake timers work and what do you need to do when combining them with user-event?
Preview
Console
Nothing logged yet.Expected console output
✓ shows loading, then the user's name
✓ shows an alert when loading fails
✓ asks for the right user