Testing Craft Path

Testing craft is choosing the cheapest test that catches the bug that matters. This path builds judgment, not only syntax.

Interview map: Testing interview questions. Pyramid: Testing pyramid.

Stage 1 — Mindset

Goals: Risk-based testing; avoid implementation-detail tests.

• Testing pyramid for frontend
• Coverage metrics pitfalls
• What is a regression worth automating?

Checkpoint: Write a one-pager test strategy for an app you know.

Stage 2 — Pure logic unit tests

• Unit testing pure logic
• Extract parsers, pricing, validators from UI
• Table-driven cases; edge empties

Checkpoint: 100% of a pure module tested without rendering React.

Stage 3 — Testing Library fluency

• Testing Library
• Queries priority
• user-event vs fireEvent
• test ids as last resort
• Integration testing UI

Checkpoint: RTL tests for a form: validation, submit success, submit error.

Stage 4 — Async & network

• Mocking fetch
• MSW
• Fake timers for debounce
• Loading/empty/error matrix

Checkpoint: Autocomplete tests with delayed MSW responses + debounce timers — Autocomplete.

Stage 5 — Component workshops

• Component testing Storybook
• Snapshot testing when useful
• Visual regression testing

Checkpoint: Storybook stories for Button variants + optional visual baseline.

Stage 6 — E2E selectively

• E2E testing tradeoffs
• Playwright vs Cypress overview
• Auth setup patterns; seed data
• Keep suite small and stable

Checkpoint: One smoke e2e for critical path in CI.

Stage 7 — Accessibility testing

• Accessibility testing in CI
• Automated axe limits
• Manual keyboard checklist still required — Keyboard checklist

Checkpoint: axe gate on Storybook or critical routes; document false positives.

Stage 8 — Contracts & multi-team

• Contract testing APIs
• Consumer-driven ideas when FE/BE decouple

Checkpoint: Contract or shared OpenAPI validation in pipeline (team-appropriate).

Stage 9 — Flake ops

• Flaky tests common causes
• Quarantine policy; fix SLO
• Parallelism, isolation, no shared mutable server state

Checkpoint: Kill or fix top 3 flaky tests; track flake rate.

Stage 10 — Interview & culture

• Testing interview questions
• Teach the team query priority
• Review PRs for brittle selectors

Suggested portfolio

1. App with unit + RTL + MSW + one e2e
2. Before/after flake reduction notes
3. A11y CI demo

Adoption plan for a brownfield app

Don’t “add testing” as a vague Q3 goal. Sequence:

1. Protect money path — one e2e or heavy integration on checkout/login
2. Extract pure logic — unit tests where bugs actually cluster
3. RTL for new features only — stop the bleeding
4. MSW shared handlers — one fake API for Storybook + tests
5. Flake burn-down — weekly until green is trustworthy
6. A11y CI — after query discipline exists (roles/labels present)

Document the strategy so new hires don’t invent a second pyramid.

Review checklist for test PRs

Ask	Red flag
Does this fail when the bug returns?	Asserts on class names only
Is it user-centric?	Tests internal state hooks directly
Is async waiting correct?	Fixed sleep(3000)
Is network controlled?	Hits real staging by accident
Is it isolated?	Order-dependent suite

What to skip early

• 90% coverage mandates
• Snapshotting entire pages
• E2E for every unit-level branch
• Mocking every module until nothing is real
• Visual regression before stable design tokens

Related on this site

• React career path
• A11y specialist path
• Machine coding hub
• Testing interview questions
• Interview hub

Further reading

• Testing Library docs
• Playwright best practices
• MSW docs

Great suites enable refactors. If tests scream when you rename a CSS class, the craft is wrong.