CodePark/ questions / Strategy & test types
START PRACTICINGPRACTICE
Frontend question · Testing › Strategy & test types

What is the testing pyramid, what is the testing trophy, and why do many frontend teams prefer the trophy?

The pyramid says: mostly unit tests. The trophy says: mostly integration tests. Many frontend teams prefer the trophy because most UI bugs live where pieces connect.

The testing pyramid has three layers:

  • Many fast unit tests at the base.
  • Fewer integration tests in the middle.
  • Very few slow E2E (end-to-end) tests at the top.

The pyramid optimises for speed and cost.

The testing trophy was made popular by Kent C. Dodds. It has four layers, from bottom to top:

  • Static analysis, such as TypeScript and ESLint. These tools find bugs without running the code.
  • Unit tests.
  • A large integration layer. This is the biggest part.
  • A small E2E layer on top.

Why frontend teams like the trophy: most UI bugs live in how components, state and data fetching fit together. Isolated unit tests miss these bugs. Tools like Testing Library and MSW (Mock Service Worker) make integration tests fast enough to run often. So each test gives you more confidence.

Both shapes share the same idea: pick the cheapest test that gives you real confidence.

  • The pyramid has many unit tests, fewer integration tests and few E2E tests.
  • The trophy has static analysis, unit, integration (the largest layer) and E2E.
  • Static analysis like TypeScript and ESLint catches whole classes of bugs for free.
  • UI bugs often live where pieces connect, so integration tests catch them.
  • The goal is the most confidence for the cost, not a fixed ratio of test types.