Testing Strategy - The Testing Trophy
The Testing Trophy (Kent C. Dodds) is the most useful mental model for React testing: integration tests give the best confidence-to-cost ratio, with fewer unit tests for pure logic and selective E2E tests for critical paths. Pyramid-heavy unit testing for React UI is an anti-pattern.
The Testing Trophy
- Static analysis (ESLint, TypeScript): catches most errors for free before any code runs. Zero test maintenance cost. Always run in CI
- Unit tests: test pure functions, business logic, utilities in isolation. Fast, deterministic, no DOM needed. Avoid unit-testing implementation details of components
- Integration tests (majority): test React components as a user sees them - render, interact, assert. Use RTL + MSW. These give the best confidence for the least maintenance
- End-to-end tests (targeted): test complete user flows in a real browser. Expensive to write and maintain, but critical for checkout, auth, and signup flows
- Rule: Test BEHAVIOR, not implementation. Ask 'does this work for a user?' not 'are these internals correct?' Tests testing internals break on refactors, giving no value
- What NOT to test: implementation details (useState names, internal methods), third-party library behavior (React Router, react-hook-form - they have their own tests), trivial rendering without behavior
Tip
Tip
Practice Testing Strategy The Testing Trophy in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Use console.table for objects. console.time to profile. debugger; for breakpoints. Chrome DevTools > console.log.
Practice Task
Note
Practice Task - (1) Write a working example of Testing Strategy The Testing Trophy from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Testing Strategy The Testing Trophy is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react code.
Key Takeaways
- The Testing Trophy (Kent C.
- Static analysis (ESLint, TypeScript): catches most errors for free before any code runs. Zero test maintenance cost. Always run in CI
- Unit tests: test pure functions, business logic, utilities in isolation. Fast, deterministic, no DOM needed. Avoid unit-testing implementation details of components
- Integration tests (majority): test React components as a user sees them - render, interact, assert. Use RTL + MSW. These give the best confidence for the least maintenance