Frontend Testing — Senior Interview Prep
How to test frontend code so the tests catch real bugs and survive refactors. The senior framing: test behavior, not implementation. Mount components with the real DOM, query by role (the way a screen reader does), mock the network not your functions, and reserve E2E for the few critical user journeys.
Files
The senior cheat sheet
| Concern | Tool |
|---|---|
| Unit logic (utilities, reducers, pure functions) | Vitest |
| Component behavior | Testing Library + Vitest |
| Custom hook behavior | renderHook + Vitest |
| Integration with network | Testing Library + MSW |
| Cross-browser, full user journey | Playwright |
| Accessibility static analysis | axe-core in unit tests + CI |
| Visual diffs | Chromatic / Percy / Playwright snapshots |
Pick by what you’re verifying, not by what feels comfortable. Reach for E2E sparingly — they’re the slowest and most brittle tier; most tests should be integration-level.
Cross-references
- Vue-specific testing: Testing — Vue Test Utils + Vitest
- Backend testing strategy (mirror): Strategy
- React internals (for testing rendering): React