accelint-react-testing_skill

Overview

This skill provides concise, opinionated guidance for writing, reviewing, and refactoring React component tests using Testing Library. It enforces accessibility-first query selection, realistic user interactions, and reliable async handling to produce maintainable, user-centric tests. Use it to detect anti-patterns and apply concrete fixes or generate standardized review reports.

How this skill works

The skill inspects test files and patterns such as render(), screen, fireEvent, userEvent, waitFor, and *.test.tsx files. It flags unsafe patterns (testId-first queries, fireEvent over userEvent, container usage, implementation-focused asserts) and recommends replacements following query priority and async best practices. It can also run audit scripts to produce a prioritized report with impact and remediation guidance.

When to use it

• Writing new component tests to guarantee accessibility and user-centric behavior
• Reviewing or refactoring test suites that use render(), container, or destructured queries
• Fixing flaky async tests that misuse waitFor or getBy vs findBy
• Converting fireEvent usage to realistic userEvent interactions
• Creating or documenting custom render helpers for provider-wrapped components

Best practices

• Prefer accessible queries: getByRole > getByLabelText > getByText > getByTestId (last resort)
• Always use screen.* queries instead of destructured returns from render() to avoid stale queries
• Use userEvent for interactions to simulate real event sequences; avoid fireEvent when userEvent is available
• Use findBy* for elements that appear asynchronously; use waitFor only when findBy/findByElementToBeRemoved don't apply
• Never assert implementation details (state variables, internals); test outcomes users see and do
• Document custom render utilities and required provider shapes; centralize provider setup in test utils

Example use cases

• Audit a repository for testId overuse and generate fixes to replace with getByRole/getByLabelText
• Refactor flaky tests that relied on container or destructured queries to use screen and findBy
• Replace fireEvent sequences with userEvent to catch interaction regressions
• Create a custom renderWithProviders utility and document required contexts and types
• Produce a prioritized review report showing accessibility confidence, test reliability, and remediation steps