Beyond a single component
Integration tests render several components together so you can verify they cooperate. A form, its validation, and a results list might each pass their own unit tests yet fail to talk to each other. Integration tests catch the seams between units.
- They run against a simulated DOM so events bubble like in a browser.
- They exercise real wiring such as context providers and shared state.
- They stub only true external boundaries like the network.
What integration tests reveal
These tests find bugs that live between units: a prop passed with the wrong shape, an event that never reaches its handler, or state that one component updates but another never reads. Because the components share a real DOM tree, the test sees the same rendered result a user would.
- Confidence: a passing suite means the pieces actually connect.
- Cost: slower than unit tests and harder to pinpoint failures.
- Scope: keep them to a feature slice, not the entire app.
Drive the test through user actions and assert on the combined output. Avoid reaching into internals, since the point is to confirm the parts integrate as a whole.
Key idea
Integration tests render multiple components in a real DOM and confirm they cooperate through events and shared state.