vitest-visual-testing

Feed every component static fixtures instead of live data, freeze the clock with vi.useFakeTimers and vi.setSystemTime, and await the settled component state before takeSnapshot(). The @uiverify/vitest capturer already handles CSS animations, Math.random seeding, and font loading.

Pass fixed fixtures as props when the component accepts data directly, or use vi.mock on the data module the component imports internally. MSW in a setup file also works for fetch-based components; the rule is no real network request.

Yes. The capturer kills CSS animations and transitions, disables the Web Animations API, emulates prefers-reduced-motion, seeds Math.random before app code runs, and waits for fonts and images. You only handle infinite JS loops, the clock, and non-Math.random randomness.

The snapshot fired before the component settled. render() in vitest-browser-react is async, so await it, then wait for the expected content to appear before calling takeSnapshot() or letting the test end.

Prefer honoring prefers-reduced-motion, which the capturer emulates, using MotionConfig reducedMotion="user" or a useReducedMotion gate. As an escape hatch, detect capture via the window.__UI_VERIFY__ global and render a static end state.

Use the Playwright variant for real full pages with scroll, third-party scripts, SSR, and lazy loading. Vitest browser-mode tests render isolated components, so scroll-settling and third-party stubbing concerns do not apply.