Как тестировать React приложение?

Стратегия тестирования React-приложений

Тестирование React-приложений требует многоуровневого подхода, охватывающего компоненты, логику и интеграцию. Современная практика предполагает комбинацию инструментов и методологий.

Уровни тестирования

1. Модульные тесты (Unit Testing)

Jest - основной инструмент, предоставляющий среду выполнения, ассерты и моки.

// Компонент с тестами
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with correct label', () => {
    render(<Button label="Click me" />);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  test('calls onClick handler', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick} label="Click" />);
    screen.getByText('Click').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

2. Тестирование компонентов (Component Testing)

React Testing Library (RTL) - философия тестирования через поведение, а не реализации.

Принципы RTL:

• Тестируйте так, как это делает пользователь
• Избегайте тестирования внутреннего состояния
• Используйте доступные query (getBy, findBy, queryBy)
• Мокируйте только внешние зависимости

// Тестирование формы
import userEvent from '@testing-library/user-event';

test('form submission', async () => {
  const user = userEvent.setup();
  const onSubmit = jest.fn();
  
  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: /submit/i }));
  
  expect(onSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

3. Интеграционное тестирование

Cypress или Playwright для тестирования пользовательских сценариев:

// Cypress тест
describe('Shopping Cart', () => {
  it('adds item to cart', () => {
    cy.visit('/products');
    cy.get('[data-testid="product-1"]').click();
    cy.get('[data-testid="add-to-cart"]').click();
    cy.get('[data-testid="cart-count"]').should('contain', '1');
  });
});

Ключевые аспекты тестирования

Мокирование зависимостей

• API вызовы через jest.mock() или MSW (Mock Service Worker)
• Контекст и роутинг через создание тестовых оберток

// Мокирование API
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.json({ name: 'John Doe' }));
  })
);

Тестирование хуков

Используйте @testing-library/react-hooks для кастомных хуков:

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

test('increments counter', () => {
  const { result } = renderHook(() => useCounter());
  
  act(() => {
    result.current.increment();
  });
  
  expect(result.current.count).toBe(1);
});

Тестирование производительности

• Используйте why-did-you-render для отслеживания лишних ререндеров
• Тестируйте мемоизированные значения с помощью jest.spyOn

Практические рекомендации

Структура тестов:

• Тесты рядом с компонентами (Component.test.js) или отдельной директорией __tests__
• Describe-It структура для организации тест-кейсов
• Setup/Teardown логика для изоляции тестов

Тестовое покрытие:

• 80/20 правило: сосредоточьтесь на критической логике
• Обязательно тестируйте:
  • Условный рендеринг
  • Обработчики событий
  • Асинхронные операции
  • Состояние загрузки и ошибок
• Избегайте тестирования:
  • Случайных текстовых строк
  • Третьесторонних библиотек
  • Реализационных деталей React

Continuous Integration:

• Настройте pre-commit хуки с Husky
• Интегрируйте тесты в CI/CD пайплайн
• Используйте пороговые значения покрытия кода

// package.json
{
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    }
  }
}

Распространенные антипаттерны

1. Тестирование внутреннего состояния - вместо этого тестируйте публичное API
2. Избыточные снапшот-тесты - используйте точечно для критических компонентов
3. Отсутствие cleanup - всегда очищайте моки и подписки
4. Слишком мелкие тесты - группируйте связанные проверки

Современные тренды

• Component-Driven Development с Storybook для визуального тестирования
• Visual regression testing с Chromatic или Loki
• E2E тестирование с Playwright для кросс-браузерной проверки
• Тестирование доступности (a11y) с jest-axe

Эффективное тестирование React-приложений требует баланса между скоростью выполнения, надежностью и стоимостью поддержки. Начинайте с модульных тестов критической логики, добавляйте интеграционные тесты ключевых пользовательских сценариев и используйте E2E тесты для проверки основных потоков. Помните, что цель тестирования - не 100% покрытие, а уверенность в изменениях и предотвращение регрессий.