react-testing

Render the component with render(), query elements using getByRole for accessibility, and simulate interactions with userEvent.setup(). Assert outcomes with jest-dom matchers like toBeInTheDocument(). Vitest provides the runner with jsdom as the browser environment.

userEvent simulates full realistic interaction sequences including focus management and per-character typing, while fireEvent dispatches a single synthetic event. Always prefer userEvent with await, since every method is asynchronous.

Assert the loading indicator first, then use findByText or waitFor to wait for the resolved content, and verify the loading state disappears. Never use setTimeout, which makes tests flaky.

MSW intercepts requests at the network level using handlers defined with http.get and HttpResponse.json. Override handlers per test with server.use() to simulate errors or slow networks, and reset them after each test with server.resetHandlers().

Submit the form with userEvent, assert the submit button is disabled during the pending state, then use findByText to verify the success or error message returned by the server action. Wrap async assertions in waitFor when checking multiple states.

Use renderHook for complex reusable hooks with isolated logic, providing a wrapper when the hook needs context providers. Prefer component tests for simple useState wrappers or hooks tightly coupled to a component.