React Testing Techniques

Best practices for testing React components with Vitest, React Testing Library (RTL), and Mock Service Worker (MSW).

Core Principles

Test Like a User

Write tests that interact with components the way users do. Avoid testing implementation details.

• Query elements by accessible roles, labels, and text - not by test IDs or class names
• Simulate real user interactions with userEvent, not fireEvent
• Test behavior and outcomes, not internal state or method calls
• Prefer integration tests over isolated unit tests

Prefer Integration Over Mocking

Combine multiple components and use MSW for API mocking at the network level. Avoid mocking component internals, hooks, or services unless absolutely necessary.