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

#	Topic
01	Testing strategy and the pyramid for frontend
02	Vitest vs Jest — runners and setup
03	React Testing Library — query priority, role-based queries
04	`user-event` vs `fireEvent`
05	MSW — network mocking the right way
06	Testing async UI — `waitFor`, `findBy*`, races
07	Testing custom hooks (`renderHook`, `act`)
08	Snapshot testing — when and how (sparingly)
09	E2E testing with Playwright
10	A11y testing + visual regression in CI

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: ../06_vue/14_testing.md
Backend testing strategy (mirror): ../../backend/05_testing/strategy/
React internals (for testing rendering): ../05_react/