react-testing-library

React Testing Library patterns, queries, user events, and accessibility testing.

509 stars

Best use case

react-testing-library is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

React Testing Library patterns, queries, user events, and accessibility testing.

Teams using react-testing-library should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/react-testing-library/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/react-testing-library/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/react-testing-library/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How react-testing-library Compares

Feature / Agentreact-testing-libraryStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

React Testing Library patterns, queries, user events, and accessibility testing.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# React Testing Library Skill

Expert assistance for testing React components.

## Capabilities

- Write user-centric tests
- Use proper queries
- Handle async operations
- Test accessibility
- Mock dependencies

## Test Patterns

```typescript
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('LoginForm', () => {
  it('should submit form with valid data', async () => {
    const onSubmit = vi.fn();
    const user = userEvent.setup();

    render(<LoginForm onSubmit={onSubmit} />);

    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
    await user.type(screen.getByLabelText(/password/i), 'password123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        email: 'test@example.com',
        password: 'password123',
      });
    });
  });
});
```

## Query Priority

1. getByRole (accessibility)
2. getByLabelText (forms)
3. getByPlaceholderText
4. getByText
5. getByTestId (last resort)

## Target Processes

- react-testing
- unit-testing
- accessibility-testing

Related Skills

react-server-components

509
from a5c-ai/babysitter

React Server Components patterns including streaming, data fetching, client/server component composition, and performance optimization.

react-query

509
from a5c-ai/babysitter

TanStack Query (React Query) patterns for server state management, caching, mutations, optimistic updates, and infinite queries.

react-hooks

509
from a5c-ai/babysitter

Deep expertise in React hooks patterns including custom hooks, composition, optimization, and testing strategies.

react-development

509
from a5c-ai/babysitter

Specialized skill for React component development, hooks patterns, state management, context API, performance optimization, and modern React best practices.

cloud-security-testing

509
from a5c-ai/babysitter

Multi-cloud security assessment and penetration testing capabilities. Execute Prowler/ScoutSuite assessments, analyze IAM policies, identify cloud misconfigurations, test permissions, and enumerate cloud resources across AWS/GCP/Azure.

Stryker Mutation Testing

509
from a5c-ai/babysitter

Stryker mutation testing for assessing test suite quality and effectiveness

pytest Testing

509
from a5c-ai/babysitter

Expert pytest framework for Python unit, integration, and functional testing

Playwright E2E Testing

509
from a5c-ai/babysitter

Deep integration with Playwright for browser automation and end-to-end testing

Percy Visual Testing

509
from a5c-ai/babysitter

Percy visual testing platform integration for visual regression detection

pact-contract-testing

509
from a5c-ai/babysitter

Consumer-driven contract testing with Pact framework. Generate consumer contracts, configure Pact Broker publishing, execute provider verification, detect breaking changes, and integrate with CI/CD pipelines.

k6 Performance Testing

509
from a5c-ai/babysitter

k6 load testing expertise for performance validation and analysis

JMeter Performance Testing

509
from a5c-ai/babysitter

Apache JMeter expertise for enterprise-grade load and performance testing