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.