React testing library

Skill a5c-ai/babysitter/library/specializations/web-development/skills/react-testing-library

React Testing Library patterns, queries, user events, and accessibility testing.From its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill react-testing-library

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.6 KB, 260 tokens by cl100k_base, as published. Nobody here has run it

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

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), '[email protected]');
    await user.type(screen.getByLabelText(/password/i), 'password123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        email: '[email protected]',
        password: 'password123',
      });
    });
  });
});

Query Priority

getByRole (accessibility)
getByLabelText (forms)
getByPlaceholderText
getByText
getByTestId (last resort)

Target Processes

react-testing
unit-testing
accessibility-testing

What ships with it: 1 file

563 B alongside SKILL.md

README.md563 B