testing-rtl-msw

RTL query conventions and the MSW network-mocking contract used by every unit/component test in this template. test-author loads this skill automatically.

Files1

View on GitHub

SKILL.md

GitHub
  • Query priority (matches RTL's own recommendation): getByRole with an accessible name first (screen.getByRole("button", { name: /subscribe/i })), then getByLabelText, getByText; reach for data-testid (getByTestId) only when no accessible query exists — see tests/unit/subscribe-dialog.test.tsx and the one deliberate exception, data-testid="subscriber-count" on plain display text with no other role.
  • Every test that touches a component using fetch needs the MSW server running (tests/unit/setup.ts already wires beforeAll(() => server.listen(...)), afterEach(() => server.resetHandlers())) — you do not set this up per-test file, it's global.
  • onUnhandledRequest: "error" is deliberate and must never be weakened to "warn" or "bypass" in this template: a test that reaches real network is a failing test, not a passing one with a warning. Add a handler in src/mocks/handlers.ts instead.
  • Reset any mutable mock state between tests (resetSubscriberCount() in tests/unit/setup.ts's afterEach) — a test must never depend on execution order.
  • Wrap components under test with the app's real providers via the shared renderWithProviders helper (tests/unit/test-utils.tsx), not a bespoke wrapper per test file — keeps QueryClient defaults (retry: false) consistent everywhere.
  • Prefer userEvent (@testing-library/user-event) over fireEvent for anything a real user would do (click, type) — it dispatches the fuller sequence of events real interaction produces.
  • A test's it(...) description should read as a behavior, and a // covers: EARS-N comment ties it back to specs/<feature>/spec.md (SPEC.md §8's testability contract) — reviewer checks this traceability.

Related in other

limits-colimits

Context management for Claude Code. Hooks maintain state via ledgers and handoffs. MCP execution without context polluti...

by parcadei
3,392

ddttom-allaboutv2-claude-skills-block-collection-and-party

The Block Collection and Block Party are repositories for existing AEM blocks, build tools, code snippets, integration p...

by mattnigh
20

nodnarbnitram-claude-code-extensions-claude-skills-esphome-confi

This skill should be used when the user asks to "create an esphome config", "set up an esp32 device", "configure esphome...

by mattnigh
20