ecc-react-testing

Render the component with its production providers, query elements by role or label, interact using userEvent, and assert on visible output or observable side effects. Avoid inspecting component state, props, or render counts.

Set up an MSW server with request handlers in your test setup file, then override handlers per test with server.use for error or edge cases. Configure onUnhandledRequest to error so unmocked requests fail loudly.

Vitest suits Vite, Remix, and modern ESM setups with faster execution and a Jest-compatible API. Jest remains the default for Next.js, CRA, and established repositories. Pick one runner rather than mixing both.

Use renderHook from React Testing Library, wrap state-changing calls in act, and test only through the hook's public API. For hooks using context like React Query, pass a wrapper with a QueryClient created once per test.

Use Playwright Component Testing when tests need real layout, browser animations, scrolling, drag-and-drop, iframes, or downloads, since JSDOM cannot render these. Keep hooks, forms, and presentational components in RTL.

Snapshots of rendered DOM break on every styling change, get rubber-stamped in review, and test implementation details rather than behavior. Use visual regression tools like Playwright screenshots or Chromatic for appearance checks instead.