Modern test suites mix component and E2E tests at different ratios. Component tests give fast feedback on UI units; E2E tests give high signal on user journeys. This guide explains when to invest in each, with code samples and a real ratio recommendation.
What is component testing?
A component test mounts a single UI component in isolation and asserts on its behaviour. No server, no router, no full app. Cypress Component Testing supports React, Vue, Angular, and Svelte.
Component vs E2E trade-offs
- Component — fast (sub-second), cheap to maintain, narrow scope.
- E2E — slow (seconds to minutes), catches integration issues, broad scope.
A practical ratio
- 70% component tests (covers UI logic in isolation).
- 20% integration tests (covers flows across 2-3 components + API mocks).
- 10% E2E tests (covers the critical user journeys end to end).
Code example: Cypress component test
Further reading
Authoritative sources
Related Tutorsbot tutorials
Share:
