react-testing

Render the component with its production providers, interact via accessible queries like getByRole and userEvent, and assert visible output or observable side effects. Avoid inspecting component state, props, or render counts, since those are implementation details.

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 in the same repo.

Mock Service Worker intercepts requests at the network layer using setupServer with http handlers, so components and fetch logic run as in production. Configure onUnhandledRequest to error and override handlers per test with server.use for error-state scenarios.

Use Playwright Component Testing or E2E when JSDOM cannot handle the scenario: real layout, CSS transitions, scrolling, drag-and-drop, iframes, downloads, or multi-page user flows. Hooks, presentational components, and form logic stay in RTL.

Flakiness usually comes from setTimeout-based assertions or unwrapped state updates. Use findBy queries for elements appearing after async work, waitFor for side effects, and act around state-changing hook calls instead of arbitrary delays.

Avoid DOM snapshots for components because they break on styling changes and test structure rather than behavior. Snapshots are acceptable for pure serialization functions or generated config; use Playwright screenshots or Chromatic for visual regression.