Agent skill

react-testing-library

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

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/skills/other/react-testing-library

SKILL.md

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

Didn't find tool you were looking for?

Be as detailed as possible for better results