What a component unit test checks
A component unit test renders one component in isolation and verifies that, given some props and user actions, it produces the right output. The goal is fast, focused feedback about a single unit of behavior, not the whole app wired together.
- Arrange: render the component with chosen props or state.
- Act: simulate a click, type into a field, or fire an event.
- Assert: check the visible text, roles, or callbacks fired.
Test behavior, not internals
Good component tests assert on what the user perceives, such as visible labels and accessible roles, rather than private state or method names. This keeps tests stable when you refactor the implementation but keep the behavior. Query by accessible role or label so the test mirrors how a real person finds elements.
- Prefer queries like by role and by label text.
- Avoid asserting on class names or component instance fields.
- Mock only the boundaries the component truly depends on.
Because each test exercises a small surface, failures point straight at the broken unit. Keep them deterministic so they never depend on timers or network.
Key idea
A component unit test renders one component, drives inputs, and asserts on user visible output rather than private internals.