Review & Cheat Sheet: Testing Strategies

[!NOTE] This module explores the core principles of Review & Cheat Sheet: Testing Strategies, deriving solutions from first principles and hardware constraints to build world-class, production-ready expertise.

1. Key Takeaways

  • Test Behavior, Not Implementation: Avoid testing internal state (props, state). Test what the user sees (text, buttons).
  • The Testing Trophy: Focus heavily on Integration Tests using React Testing Library (RTL). They give the best return on investment (ROI).
  • Query Priority: Always prefer getByRole for accessibility. Use getByTestId only as a last resort.
  • Async Testing: Use findBy... or waitFor for elements that appear after an API call.
  • E2E for Critical Paths: Use Playwright for “happy path” user flows (Login → Checkout). Use auto-waiting to avoid flakiness.
  • Mock Network, Not Client: Use MSW to intercept requests at the network layer. This tests your actual data fetching logic.
  • Global Setup: Use Playwright’s global setup to handle authentication once and reuse state across tests.

2. Interactive Flashcards

Question

Click to flip

Answer

1 / 5

3. Cheat Sheet: RTL Queries

Type Single Element Multiple Elements Async (Wait)? Returns if Missing Use Case
Get getBy... getAllBy... No Error Standard assertion
Query queryBy... queryAllBy... No null Assert absence (not.toBeInTheDocument)
Find findBy... findAllBy... Yes Error (timeout) Async elements (API data)

Common Matchers (jest-dom)

expect(element).toBeInTheDocument();
expect(element).toBeVisible();
expect(element).toHaveTextContent(/hello/i);
expect(element).toHaveAttribute('src', 'logo.png');
expect(element).toBeDisabled();
expect(input).toHaveValue('user input');

4. Quick Revision

  1. Unit Tests: Test logic in isolation.
  2. Integration Tests: Test components working together (RTL). Focus here.
  3. E2E Tests: Test full user flows (Playwright).
  4. Static Analysis: ESLint/TypeScript catch typos.

React Glossary