React/TypeScript Testing

1. Philosophy

Core Principles

• Trustworthiness > coverage — A small suite you trust beats a large suite full of false confidence. Every test should catch a real bug if one existed.
• 5 good Playwright e2e tests > 100 component tests with heavy mocking — End-to-end tests exercise the real system. Component tests with mocked-out everything prove very little.
• Pareto principle — Write the fewest tests that cover 80% of what matters. Focus on critical user paths and known-fragile areas.
• Component tests for interaction logic — Use component tests where they shine: verifying that clicks, keyboard input, and conditional rendering work correctly.
• Real over mocked — MSW over module mocks. Rendered over shallow. Real stores over fake ones. The closer a test is to production, the more it proves.
• Test behavior, not implementation — Assert what the user sees and experiences, not internal state, CSS classes, or component structure.

2. Testing Pyramid