New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A component that checks window.matchMedia crashes the moment its test runs, because jsdom never built that API.
What you'll have at the end
The same component test passing, with matchMedia stubbed in a setup file, plus a version of that stub controllable enough to test both layouts and a live breakpoint change, reset cleanly between tests.
You need
A Vitest suite already running against the jsdom environment, testing a component (or a small reusable hook inside it) that reads window.matchMedia the moment it mounts.
Not covered
Faking a layout-measuring API like the resize or intersection observers, which report element geometry rather than a single boolean match and need a differently shaped fake.
Get your first Vitest test passing against a real component
when there is no green baseline test yet: this recipe assumes the environment and matchers are already wired up and starts from there
One slow test in the suite is still hitting the real network
when the same component also makes a real network call during the test, since a missing browser property and an unmocked network request are two different leaks into the real environment that need two different fixes
Checked 25 Aug 2026
Part of the Vitest Testing Framework cookbook