← Lessons

quiz vs the machine

Silver1100

Frontend

The Testing Pyramid for Frontend

Balance many fast unit tests, fewer integration tests, and a thin layer of end to end checks.

4 min read · intro · beat Silver to climb

A budget for confidence

The testing pyramid is a shape that guides how to spend your testing effort. Many fast unit tests form the wide base, fewer integration tests sit in the middle, and a thin layer of end to end tests caps the top. The shape reflects cost: lower tests are cheaper and faster.

  • Base: lots of unit tests, milliseconds each.
  • Middle: integration tests that wire components together.
  • Top: a few end to end tests for critical journeys.

Why the shape matters

An inverted pyramid, heavy on end to end tests, is slow and flaky and gives feedback minutes after a change. A healthy pyramid catches most bugs at the cheap layers and reserves expensive tests for what only they can verify.

  • Push each check to the lowest layer that can prove it.
  • Use end to end tests for whole journey confidence, not unit details.
  • Watch the run time of your suite as a signal of balance.

The pyramid is a heuristic, not a law. The point is to bias toward fast, focused tests and use slow ones deliberately. An ice cream cone shape, all manual and end to end, is the anti pattern to avoid.

Key idea

Bias toward many fast unit tests, fewer integration tests, and a thin cap of end to end tests for critical journeys.

Check yourself

Answer to earn rating on the learn ladder.

1. What does a healthy testing pyramid look like?

2. Why is an inverted pyramid an anti pattern?