Frontend testing strategy

The pyramid, corrected

       E2E (few, happy paths + money paths)
      ──── Integration (component + real store/router)
     ────── Unit (pure logic: hooks, reducers, utils)
    ──────── Types + lint (catch the rest for free)

• Types catch the "undefined is not a function" class — don't write tests for what tsc --strict already proves.
• E2E is the most expensive and flakiest layer: reserve it for the journeys whose breakage loses users or money.

Unit: pure logic only

Hooks, reducers, formatters, parsers — anything with inputs/outputs and no DOM:

test('discount applies only above threshold', () => {
  expect(priceAfterDiscount(100, { threshold: 50, pct: 10 })).toBe(90)
  expect(priceAfterDiscount(40, { threshold: 50, pct: 10 })).toBe(40)
})

• Test behavior through the public API, not internals (no asserting on private state shape).
• Edge cases are the product: empty, one, many, huge, unicode, timezone boundaries.

Integration: the workhorse

Render the component with its real providers (store, router, i18n) — mock only the network:

test('adds item and shows total', async () => {
  render(<Cart />, { wrapper: TestProviders })
  await user.click(screen.getByRole('button', { name: /add/i }))
  expect(await screen.findByText('$19.00')).toBeVisible()
})

• Query by role/name (what users perceive), never by class/test-id-first.
• findBy for async UI; never arbitrary waitFor timeouts.

E2E: few and vital

• Happy path + payment/auth/delete flows. Stable selectors (data-testid only where roles don't exist).
• One environment, seeded data, parallel-safe. If a test can't say which user journey it protects, delete it.

Flakiness is a bug, not weather

1. Re-run failing test 10× locally (--repeat) — flaky = fix or quarantine same-day.
2. Usual suspects: uncontrolled time/random (inject clocks/seed), animation races (disable motion in tests), network races (mock at the boundary, await explicit states), test-order coupling.
3. No sleep() in tests. Ever. Await the observable state.

The metrics that matter

• Coverage is a smoke detector, not a goal: 80% of changed code beats 60% global vanity.
• Track time-to-feedback (target: unit+integration < 60s locally) — slow suites get skipped, skipped suites rot.
• Mutation-style spot checks on critical utils: would the test fail if the logic broke?

Definition of done (agent checklist)

• New logic has tests at the lowest sufficient layer
• Queries by role/label; async via findBy
• No sleeps, no test-order coupling, no network beyond the mock boundary
• Flaky tests quarantined with an owner and a deadline
• PR diff covered where it matters (money/auth/data)