React Testing Best Practices

Effective tests give confidence without slowing development. Here's how to test React applications.

Testing Philosophy#

// Test behavior, not implementation
// Bad: Testing implementation details
test('button has onClick handler', () => {
  const wrapper = shallow(<Button />);
  expect(wrapper.instance().handleClick).toBeDefined();
});

// Good: Testing behavior
test('calls onSubmit when clicked', async () => {
  const handleSubmit = jest.fn();
  render(<Button onSubmit={handleSubmit}>Submit</Button>);

  await userEvent.click(screen.getByRole('button'));

  expect(handleSubmit).toHaveBeenCalledTimes(1);
});

Component Testing#

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

// Basic render test
test('renders greeting', () => {
  render(<Greeting name="Alice" />);

  expect(screen.getByText(/hello, alice/i)).toBeInTheDocument();
});

// Testing interactions
test('increments counter on click', async () => {
  const user = userEvent.setup();
  render(<Counter />);

  const button = screen.getByRole('button', { name: /increment/i });
  await user.click(button);

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

// Testing form submission
test('submits form with user data', async () => {
  const user = userEvent.setup();
  const handleSubmit = jest.fn();

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

  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 }));

  expect(handleSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123',
  });
});

// Testing conditional rendering
test('shows error message on invalid input', async () => {
  const user = userEvent.setup();
  render(<EmailInput />);

  const input = screen.getByLabelText(/email/i);
  await user.type(input, 'invalid-email');
  await user.tab(); // Blur to trigger validation

  expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
});

Async Testing#

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

// Testing loading states
test('shows loading then data', async () => {
  render(<UserProfile userId="1" />);

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

  // Wait for data
  await waitFor(() => {
    expect(screen.getByText('Alice')).toBeInTheDocument();
  });

  // Loading should be gone
  expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});

// Testing with findBy (waits automatically)
test('loads and displays user', async () => {
  render(<UserProfile userId="1" />);

  const userName = await screen.findByText('Alice');
  expect(userName).toBeInTheDocument();
});

// Testing error states
test('shows error on fetch failure', async () => {
  server.use(
    rest.get('/api/user', (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  render(<UserProfile userId="1" />);

  await waitFor(() => {
    expect(screen.getByText(/error loading user/i)).toBeInTheDocument();
  });
});

Mocking#

// Mock modules
jest.mock('./api', () => ({
  fetchUser: jest.fn(),
}));

import { fetchUser } from './api';

beforeEach(() => {
  (fetchUser as jest.Mock).mockClear();
});

test('fetches user on mount', async () => {
  (fetchUser as jest.Mock).mockResolvedValue({ name: 'Alice' });

  render(<UserProfile userId="1" />);

  await waitFor(() => {
    expect(fetchUser).toHaveBeenCalledWith('1');
  });
});

// Mock child components
jest.mock('./HeavyComponent', () => ({
  HeavyComponent: () => <div data-testid="mock-heavy">Mocked</div>,
}));

// Mock hooks
jest.mock('./useAuth', () => ({
  useAuth: () => ({
    user: { id: '1', name: 'Alice' },
    isAuthenticated: true,
  }),
}));

// Mock with implementation
const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockNavigate,
}));

test('navigates on success', async () => {
  render(<LoginForm />);
  // ... submit form

  await waitFor(() => {
    expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
  });
});

Testing Hooks#

import { renderHook, act } from '@testing-library/react';

// Basic hook test
test('useCounter increments', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

// Hook with dependencies
test('useCounter starts with initial value', () => {
  const { result } = renderHook(() => useCounter(10));

  expect(result.current.count).toBe(10);
});

// Hook with changing props
test('useCounter resets on prop change', () => {
  const { result, rerender } = renderHook(
    ({ initial }) => useCounter(initial),
    { initialProps: { initial: 0 } }
  );

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  rerender({ initial: 10 });

  expect(result.current.count).toBe(10);
});

// Async hook
test('useFetch returns data', async () => {
  const { result } = renderHook(() => useFetch('/api/data'));

  expect(result.current.loading).toBe(true);

  await waitFor(() => {
    expect(result.current.loading).toBe(false);
  });

  expect(result.current.data).toEqual({ id: 1 });
});

// Hook with wrapper (for context)
test('useUser returns user from context', () => {
  const wrapper = ({ children }) => (
    <UserProvider value={{ name: 'Alice' }}>
      {children}
    </UserProvider>
  );

  const { result } = renderHook(() => useUser(), { wrapper });

  expect(result.current.name).toBe('Alice');
});

Testing with Context#

// Create test wrapper
function renderWithProviders(
  ui: React.ReactElement,
  {
    initialState = {},
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }: { children: React.ReactNode }) {
    return (
      <ThemeProvider>
        <AuthProvider initialState={initialState}>
          <Router>
            {children}
          </Router>
        </AuthProvider>
      </ThemeProvider>
    );
  }

  return render(ui, { wrapper: Wrapper, ...renderOptions });
}

// Use in tests
test('shows user name', () => {
  renderWithProviders(<UserMenu />, {
    initialState: { user: { name: 'Alice' } },
  });

  expect(screen.getByText('Alice')).toBeInTheDocument();
});

Integration Tests#

// Test full user flow
test('complete checkout flow', async () => {
  const user = userEvent.setup();

  renderWithProviders(<App />);

  // Add item to cart
  await user.click(screen.getByRole('button', { name: /add to cart/i }));

  // Go to cart
  await user.click(screen.getByRole('link', { name: /cart/i }));

  // Proceed to checkout
  await user.click(screen.getByRole('button', { name: /checkout/i }));

  // Fill shipping info
  await user.type(screen.getByLabelText(/address/i), '123 Main St');
  await user.click(screen.getByRole('button', { name: /continue/i }));

  // Fill payment info
  await user.type(screen.getByLabelText(/card number/i), '4242424242424242');
  await user.click(screen.getByRole('button', { name: /place order/i }));

  // Verify success
  await waitFor(() => {
    expect(screen.getByText(/order confirmed/i)).toBeInTheDocument();
  });
});

MSW for API Mocking#

import { rest } from 'msw';
import { setupServer } from 'msw/node';

// Setup server
const server = setupServer(
  rest.get('/api/users', (req, res, ctx) => {
    return res(ctx.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ]));
  }),

  rest.post('/api/users', async (req, res, ctx) => {
    const { name } = await req.json();
    return res(ctx.json({ id: 3, name }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// Use in tests
test('creates new user', async () => {
  const user = userEvent.setup();

  render(<CreateUserForm />);

  await user.type(screen.getByLabelText(/name/i), 'Charlie');
  await user.click(screen.getByRole('button', { name: /create/i }));

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

// Override handlers in specific tests
test('handles server error', async () => {
  server.use(
    rest.post('/api/users', (req, res, ctx) => {
      return res(ctx.status(500), ctx.json({ error: 'Server error' }));
    })
  );

  render(<CreateUserForm />);
  // ... test error handling
});

Snapshot Testing#

// Use sparingly, for stable UI
test('renders correctly', () => {
  const { container } = render(<Icon name="star" />);
  expect(container.firstChild).toMatchSnapshot();
});

// Inline snapshots
test('formats date correctly', () => {
  expect(formatDate(new Date('2024-01-15'))).toMatchInlineSnapshot(
    `"January 15, 2024"`
  );
});

Accessibility Testing#

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('has no accessibility violations', async () => {
  const { container } = render(<Form />);
  const results = await axe(container);

  expect(results).toHaveNoViolations();
});

// Test specific accessibility
test('form inputs have labels', () => {
  render(<LoginForm />);

  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
});

test('buttons are keyboard accessible', async () => {
  const user = userEvent.setup();
  const handleClick = jest.fn();

  render(<Button onClick={handleClick}>Click me</Button>);

  const button = screen.getByRole('button');
  button.focus();

  await user.keyboard('{Enter}');

  expect(handleClick).toHaveBeenCalled();
});

Best Practices#

Principles:
✓ Test behavior, not implementation
✓ Write tests from user perspective
✓ Use semantic queries (getByRole, getByLabelText)
✓ Avoid testing internal state

Organization:
✓ One assertion per test when possible
✓ Use descriptive test names
✓ Group related tests with describe
✓ Keep tests independent

Performance:
✓ Mock expensive operations
✓ Use beforeEach for setup
✓ Clean up after tests
✓ Run tests in parallel

Coverage:
✓ Focus on critical paths
✓ Test error states
✓ Test edge cases
✓ Don't chase 100% coverage

Effective React testing focuses on user behavior rather than implementation details. Use Testing Library's semantic queries, mock external dependencies with MSW, and test hooks with renderHook. Write integration tests for critical flows and keep tests maintainable by avoiding implementation details.