react-testing

Render the component with the same providers it uses in production, query elements by role or label, interact with userEvent, and assert on visible output. Avoid inspecting state, props, or render counts since those are implementation details.

Vitest suits Vite, Remix, and modern setups with faster runs and native ESM, while Jest remains the default for Next.js, CRA, and established repos. Pick one runner rather than mixing both in the same project.

Use Mock Service Worker to intercept requests at the network layer so components and fetch libraries behave as in production. Configure onUnhandledRequest to error so unmocked requests fail loudly, and override handlers per test for error states.

Use Playwright when tests need real layout, CSS transitions, scrolling, drag-and-drop, iframes, or downloads, since JSDOM cannot handle these. Keep hooks, presentational components, and form logic in RTL, and reserve Playwright for layout-sensitive components and full user flows.

Flakiness occurs when the QueryClient is created inside the wrapper closure, resetting cache state on every render. Instantiate the QueryClient once per test outside the wrapper and disable retries in its default options.

Snapshot tests of rendered output break on every styling change and test DOM structure rather than behavior, so they are discouraged. Reserve snapshots for pure serialization functions and use Playwright screenshots or visual regression tools for components.