Quality & Testing

How to test UI so the tests reflect what users actually experience.

• Visual Regression Testing: Snapshot diffing (Chromatic, Percy, Playwright snapshots) to catch unintended UI changes. Pixels are the source of truth for appearance — assert on them.
• Testing Trophy (Kent C. Dodds): For UI, favor integration tests over the classic pyramid. Shape (bottom → top): static (types/lint) → unit → integration (the bulk) → e2e. Test behavior users experience, not implementation details.

How to apply

• Default UI tests to the integration layer: render the component with its real collaborators, interact like a user, assert on visible outcomes.
• Avoid testing implementation details (internal state, private methods) — they break on refactors that don't change behavior.
• Add visual regression snapshots for components where appearance is the contract (design-system primitives, marketing pages).
• Keep e2e few and high-value (critical flows only); lean on static checks (types, lint) as the cheap first line.