patterntypescriptTip
Testing diamond: frontend-heavy apps need more integration tests than unit tests
Viewed 0 times
testing diamondtesting trophyfrontend testingcomponent integrationreact testing library
Problem
The classic test pyramid assumes business logic is in pure functions. Modern React/Vue apps push logic into component trees, hooks, and context — unit testing these in isolation requires so much mocking that the tests lose value.
Solution
Apply the testing diamond (or testing trophy): a wide middle layer of integration tests that render components with real children and real hooks, a thin unit layer for pure utilities, and a thin E2E layer for critical paths. Use React Testing Library or Vue Test Utils to test component subtrees without a browser.
Why
Component integration tests catch breakage at the composition boundary — the most common failure point in frontend apps — without the overhead of a full browser. They are faster than E2E and more realistic than heavily mocked unit tests.
Gotchas
- Integration tests still need msw or similar to mock network calls — don't let them hit real APIs
- Rendering large component trees in jsdom can be slow; split into smaller trees if tests exceed 100ms
- The diamond applies to UI-heavy code; pure domain logic still benefits from a traditional pyramid
Revisions (0)
No revisions yet.