testing-react

Testing React Applications

Extends core/rules/testing.mdc with React-specific testing patterns using React Testing Library.

---

Component Testing Principles

• Test behavior, not implementation: Focus on what the user sees and does
• Avoid testing internal state: Test outputs (rendered DOM, calls to callbacks)
• Use accessible queries: Prefer getByRole, getByLabelText over getByTestId
• Write tests that resemble how users interact: Click buttons, type in inputs, see text

---

React Testing Library Queries

Query Priority (from most to least preferred)

import { render, screen } from '@testing-library/react';

// 1. Accessible by everyone (best)
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email address');
screen.getByPlaceholderText('Enter email');
screen.getByText('Welcome');

// 2. Semantic queries
screen.getByAltText('Profile picture');
screen.getByTitle('Close dialog');

// 3. Test IDs (last resort)
screen.getByTestId('custom-element');

Query Variants

// getBy* - throws error if not found
const button = screen.getByRole('button');

// queryBy* - returns null if not found
const button = screen.queryByRole('button');
expect(button).not.toBeInTheDocument();

// findBy* - async, waits for element
const button = await screen.findByRole('button');

// getAllBy*, queryAllBy*, findAllBy* - for multiple elements
const items = screen.getAllByRole('listitem');

---

Testing Components

Basic Component Test

import { render, screen } from '@testing-library/react';
import { UserProfile } from './UserProfile';

describe('UserProfile', () => {
  it('should display user name and email', () => {
    render(<UserProfile name="John Doe" email="[email protected]" />);

    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('[email protected]')).toBeInTheDocument();
  });
});

Testing User Interactions

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

describe('LoginForm', () => {
  it('should call onSubmit with email and password', async () => {
    const user = userEvent.setup();
    const handleSubmit = jest.fn();

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

    await user.type(screen.getByLabelText('Email'), '[email protected]');
    await user.type(screen.getByLabelText('Password'), 'password123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));

    expect(handleSubmit).toHaveBeenCalledWith({
      email: '[email protected]',
      password: 'password123',
    });
  });
});