react-testing-helper

name	react-testing-helper
description	Helps write and debug React component tests using React Testing Library. Use when writing unit tests for React components, debugging test failures, or setting up testing infrastructure.
homepage	https://testing-library.com/react
metadata	{"clawdbot.emoji":"🧪","clawdbot.requires":{"packages":["@testing-library/react","@testing-library/jest-dom"]}}

React Testing Helper

A comprehensive skill for writing effective React component tests.

When to Use

• Writing unit tests for React components
• Debugging failing component tests
• Setting up React Testing Library
• Testing user interactions and async behavior

Quick Reference

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

// Basic render
render(<MyComponent prop="value" />);

// Query elements
screen.getByRole('button', { name: /submit/i });
screen.getByText(/welcome/i);
screen.getByTestId('my-element');

// User interactions
await userEvent.click(button);
await userEvent.type(input, 'hello');

// Async assertions
await waitFor(() => {
  expect(screen.getByText('loaded')).toBeInTheDocument();
});

Best Practices

1. Query by accessibility: Prefer getByRole, getByLabelText over getByTestId
2. Test behavior, not implementation: Focus on what users see and do
3. Use userEvent over fireEvent: More realistic user interactions
4. Avoid testing implementation details: Don't test state or internal methods

Common Patterns

Testing Forms

test('submits form with user data', async () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  await userEvent.type(screen.getByLabelText(/email/i), '[e-mail]');
  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: '[e-mail]',
    password: 'password123'
  });
});

Testing Async Components

test('loads and displays data', async () => {
  render(<DataLoader />);

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText(/data loaded/i)).toBeInTheDocument();
  });
});

Troubleshooting

• Element not found: Use screen.debug() to see current DOM
• Act warnings: Wrap state updates in act() or use waitFor
• Stale queries: Re-query elements after state changes