From static checks to production: the trophy and the pyramid, unit, integration and end-to-end tests, doubles and MSW, contracts, visual and accessibility tests, flakes, and testing with real traffic.
What each kind of test is for and where it sits in the portfolio.
A test portfolio weighted toward integration tests, on a base of static checks, with fewer unit and end-to-end tests at the edges.
in practiceKent C. Dodds' alternative to the test pyramid for UI code; most confidence per minute from integration tests.
A test of one function or module in isolation, fast and deterministic.
in practiceFormatters, reducers, validators, money arithmetic; Vitest or Jest.
A test rendering a component with its real children and a mocked network, driven like a user.
in practiceTesting Library + MSW; "fill the form, click pay, see the receipt".
A test driving a real browser through the deployed app, from login to the outcome.
in practicePlaywright and Cypress suites against preview deployments; the critical-path smoke tests.
Helpers that query the DOM the way users and assistive tech find things (by role, label, text), not by implementation details.
in practicegetByRole("button", {name: /pay/i}); tests that survive refactors and double as accessibility checks.
Intercepting network requests at the network layer with handlers, so tests and dev use the real fetch code against fake responses.
in practiceMSW handlers shared by tests, Storybook and local development.
Stand-ins for real dependencies: stubs return canned values, spies record calls, mocks assert expectations, fakes are working light implementations.
in practicevi.fn(), an in-memory repository, a fake clock.
Replacing setTimeout, Date and friends with a controllable clock so time-based code can be tested instantly and deterministically.
in practiceDebounce, retries with backoff, session expiry tests.
Saving serialised output and failing when it changes; cheap to write, easy to rubber-stamp.
in practiceLarge component snapshots updated blindly; small inline snapshots for serialisers are fine.
Checking that a consumer and provider agree on an API's shape, so frontend and backend can change independently without breaking each other.
in practicePact; OpenAPI schemas validated in both repos; generated typed clients.
Generating many random inputs to check that a property always holds, and shrinking failures to the smallest example.
in practicefast-check for parsers, money math, sorting, CRDT merges.
Changing the code in small ways (flipping a > to >=) and checking that some test fails; surviving mutants mark untested logic.
in practiceStryker; a better signal than line coverage for critical code.
Tests that need a browser, a screenshot or real traffic, and the problems they bring.
Screenshotting components or pages and diffing them against approved baselines to catch unintended visual changes.
in practiceChromatic, Playwright toHaveScreenshot, Percy; design-system PRs.
A workshop for rendering components in isolation with their states as stories, which double as docs and test cases.
in practiceDesign-system catalogues; stories run as interaction and visual tests.
A test that passes and fails without code changes, from timing, order dependence, shared state or real network.
in practiceRetries hiding races; quarantine lists; the main destroyer of trust in CI.
The share of lines, branches or functions executed by tests; a map of what is untested, not a measure of quality.
in practiceIstanbul and V8 coverage reports; coverage gates that encourage assertion-free tests.
Each test sets up its own state and does not depend on others or on order, so tests can run in parallel and in any sequence.
in practiceLeaking module state between tests; fresh QueryClient per test.
Reusable setup data and builders that create valid objects with overridable fields.
in practicebuildUser({ kycTier: 2 }); Playwright fixtures for logged-in pages.
Running axe-core rules in unit, component or end-to-end tests to catch roughly a third of WCAG failures automatically.
in practicejest-axe, @axe-core/playwright, Storybook a11y addon; the rest needs manual passes.
Running Lighthouse against previews in CI with assertions on scores and metrics, failing PRs that regress.
in practiceMedian of three runs; budgets on LCP, TBT, CLS and bytes.
A small, fast check that the most important paths work after a deploy, before deeper tests or traffic.
in practicePost-deploy login, search and checkout checks; synthetic monitors every few minutes.
Verifying behaviour with real traffic under control: canaries, feature flags, synthetic monitors and RUM alerts.
in practiceThe ring halt on a crash-free drop; dark launches.
The three-part shape of a readable test: set up, do one thing, check the outcome.
in practiceTests that read like specifications; one behaviour per test.
The classic portfolio shape: many unit tests, fewer integration tests, few end-to-end tests, ordered by speed and cost.
in practiceBackend services; contrasted with the trophy for UI.