Component behavior tests

Component behavior tests ask what a user can see and do: labels, roles, disabled states, loading spinners, validation messages, and callbacks fired on submit. Render with providers the component expects—router, query client, theme—and simulate events with user-event.

Focus on one component or small tree; stub distant children only when their details are irrelevant to the behavior under test.

On interviews: write a test plan for a form with async submit, error retry, and optimistic UI without peeking at React state.

Common pitfalls: testing CSS class names, not awaiting microtasks after click, and shallow rendering that omits context providers.

The trade-off is speed and locality versus missing bugs in parent-child integration—know when to promote to page-level test.

Checklist:

• Query by accessible roles and names.
• Cover loading, error, and success states.
• Assert side effects (called handlers), not implementation.