The Testing Pyramid Revisited

Write tests.Not too many.Mostly integration.The classic advice holds up, but tools like Cypress and Playwright change the cost dynamic.E2E tests used to be flaky and slow.Now they are robust and fast(er).

The Classic Pyramid

Mike Cohn's original pyramid (2009) looked like this:

70 % Unit Tests: Fast, cheap, isolated.
20 % Integration Tests: Test connection between two units.
10 % UI / E2E Tests: Slow, expensive, flaky.

This made sense when E2E tests required Selenium and took 3 hours to run.

The Testing Trophy(The Modern Web)

Kent C.Dodds introduced the "Testing Trophy."
Shape: Bottom (Static Analysis), Middle (Integration - HUGE), Top (E2E), Tiny Top (Unit).
Philosophy: Integration tests provide the best ROI.
If I test that my Button component renders, I have low confidence.
If I test that clicking the Button submits the Form and shows a Success Message, I have high confidence.

Why Integration> Unit ?

Bugs mostly happen at the boundaries .
The Frontend code works.The Backend code works.But when the Frontend calls the Backend with a string instead of a number, it blows up.
Unit tests mock these boundaries(fake APIs).Integration tests render the real component and hit a "real"(or msw - intercepted) API.They prove the system works together.

Unit Tests: Just for Logic

Unit tests still have a place: Pure Functions .
Test your calculateTotal(price, tax) function with 100 unit tests. It's fast math.
But don't unit test that <div> has class bg-red-500. That's testing implementation details.If you change the class tobg - red - 600 for design reasons, your test breaks, but the app isn't broken. This is a "False Negative."

Visual Regression Testing

A new layer involves tools like Percy or Chromatic.They take a screenshot of your component and compare it pixel - by - pixel with the last build.This catches "CSS Side Effect" bugs that no functional test can catch (e.g., a button slipping to a new line).

Conclusion

Don't chase 100% Code Coverage. It is a vanity metric. Usage Coverage> Code Coverage. Test the critical paths that make you money (Checkout, Sign Up, Data Saving). If the Settings page has a bug, you can live. If Checkout is broken, you die.