{
  "instruction": "Follow Testing Library best practices for React component tests",
  "relevant_when": "Agent writes or modifies component tests using Testing Library",
  "context": "Testing Library tests should use accessible queries, userEvent for interactions, proper async patterns, and avoid implementation details.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/testing-library-patterns/SKILL.md",
      "tile": "tessl-labs/testing-library-patterns@0.2.0"
    }
  ],
  "checklist": [
    {
      "name": "role-queries-preferred",
      "rule": "Agent uses getByRole as the primary query method with name option using case-insensitive regex (e.g., getByRole('button', { name: /submit/i }))",
      "relevant_when": "Agent writes Testing Library queries to find elements"
    },
    {
      "name": "regex-name-matchers",
      "rule": "Agent uses case-insensitive regex patterns (/text/i) instead of exact strings for query name options",
      "relevant_when": "Agent passes name or text options to Testing Library queries"
    },
    {
      "name": "user-event-setup-before-render",
      "rule": "Agent calls userEvent.setup() before render(), not after, and stores the result in a variable",
      "relevant_when": "Agent simulates user interactions in component tests"
    },
    {
      "name": "user-event-actions-awaited",
      "rule": "Agent awaits every userEvent action (user.click, user.type, etc.) since they return promises",
      "relevant_when": "Agent uses userEvent to simulate clicks, typing, or other interactions"
    },
    {
      "name": "no-fire-event",
      "rule": "Agent uses userEvent instead of fireEvent for user interactions since userEvent simulates the full browser event sequence",
      "relevant_when": "Agent simulates user interactions like clicks, typing, or form submissions"
    },
    {
      "name": "find-by-for-async",
      "rule": "Agent uses findBy* queries (which return promises) when waiting for elements that appear after async operations like data fetching",
      "relevant_when": "Agent tests components that load data asynchronously or show content after state updates"
    },
    {
      "name": "wait-for-assertions-only",
      "rule": "Agent only puts assertions inside waitFor callbacks, never side effects like clicks or API calls",
      "relevant_when": "Agent uses waitFor to wait for a condition to be met"
    },
    {
      "name": "query-by-for-absence",
      "rule": "Agent uses queryBy* (not getBy*) when asserting an element is NOT in the document, since getBy* throws when the element is missing",
      "relevant_when": "Agent asserts that an element is absent or has been removed from the DOM"
    },
    {
      "name": "within-for-scoping",
      "rule": "Agent uses within() to scope queries to a specific container when the page has multiple elements with similar text or roles",
      "relevant_when": "Agent queries elements in a page with repeated content, multiple sections, or data tables"
    },
    {
      "name": "to-be-visible-for-visibility",
      "rule": "Agent uses toBeVisible() instead of toBeInTheDocument() when testing that an element is actually visible to the user (not hidden by CSS)",
      "relevant_when": "Agent asserts that a modal, dialog, dropdown, or conditionally shown element is visible"
    },
    {
      "name": "custom-render-wrapper",
      "rule": "Agent creates or uses a custom render wrapper that provides necessary context providers (Router, Theme, etc.) instead of wrapping each test manually",
      "relevant_when": "Agent tests components that depend on React context providers like Router, Theme, or Auth"
    },
    {
      "name": "loading-and-error-states-tested",
      "rule": "Agent tests both loading states and error states, using findBy* to wait for async content and queryBy* to assert loading indicator removal",
      "relevant_when": "Agent tests components that fetch data and can show loading or error states"
    },
    {
      "name": "no-implementation-details",
      "rule": "Agent does not test component state, props, class names, component names, or use container.querySelector/container.innerHTML",
      "relevant_when": "Agent writes any Testing Library component test"
    }
  ]
}