intermediate
Component tests
Select test boundaries, mock network or time deliberately, and assert behavior instead of internals.
Component tests sit between unit tests of pure helpers and full end-to-end flows. Choose the smallest render tree that proves the contract — mock network at the boundary, not every child. Fake timers for debounce; MSW for HTTP realism.
Assert outcomes users see: text, aria attributes, disabled buttons. Snapshot entire trees sparingly; they hide meaningful regressions. One behavior per test keeps failures diagnosable.
On interviews, explain the concept with a concrete example and name the behavior interviewers probe.
Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.
The trade-off is often clarity versus reuse or explicit props versus convenience.
Checklist:
- Mock IO at system boundaries.
- Assert visible behavior and a11y state.
- Keep tests focused and independent.