Установка и настройка React Testing Library

React Testing Library — это популярная библиотека для тестирования компонентов React. В отличие от других решений, она фокусируется на том, как компоненты взаимодействуют с пользователем, а не на том, как они реализованы изнутри. Эта библиотека помогает писать тесты, которые приближены к реальному поведению пользователей.

Установка

Для начала необходимо установить библиотеку React Testing Library и другие необходимые инструменты. Обычно она используется в связке с Jest, который является стандартом для тестирования в экосистеме React.

Для установки React Testing Library в проект нужно выполнить следующие шаги:

  1. Установить саму библиотеку и зависимости для тестирования:

    npm install --save-dev @testing-library/react @testing-library/jest-dom
    • @testing-library/react — это сама библиотека для работы с компонентами React.
    • @testing-library/jest-dom — это набор удобных матчеров для Jest, который позволяет использовать более читаемые и понятные утверждения, такие как toBeInTheDocument() и другие.

  2. Убедиться, что Jest настроен для работы с React. Если Jest ещё не установлен, то это можно сделать с помощью команды:

    npm install --save-dev jest

  3. Настроить Jest для работы с JSX. Это делается путём добавления в проект конфигурации Babel, если она ещё не была настроена. Установите необходимые пакеты:

    npm install --save-dev @babel/preset-react babel-jest

  4. Создайте файл конфигурации для Babel, например, .babelrc или настройте его в package.json. Пример конфигурации:

    {
  "presets": ["@babel/preset-react"]
}

  5. Важно настроить Jest для работы с современными возможностями JavaScript, такими как ESModules. Для этого добавьте в package.json следующий раздел:

    "jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

  6. Чтобы не писать каждый раз import '@testing-library/jest-dom'; в каждом тесте, можно добавить его в глобальные настройки Jest. Для этого создайте или отредактируйте файл setupTests.js:

    import '@testing-library/jest-dom';

    В package.json укажите, что Jest должен использовать этот файл для настроек:

    "jest": {
  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

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

React Testing Library ориентирована на тестирование компонентов с точки зрения их рендеринга и взаимодействия с пользователем. Поэтому тесты должны быть описаны таким образом, чтобы имитировать реальные действия пользователя: клики, заполнение форм, проверка отображаемого контента и т. д.

Пример простой настройки теста:

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

test('компонент отображает текст', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/Привет, мир!/i);
  expect(linkElement).toBeInTheDocument();
});

В данном примере тестируется, что компонент MyComponent рендерит текст “Привет, мир!”.

Основные функции React Testing Library

  1. render() — эта функция рендерит компонент в DOM для выполнения тестов. Она возвращает объект, содержащий несколько полезных методов для поиска элементов, взаимодействия с ними и проверки их состояния.

    Пример:

    const { getByText } = render(<MyComponent />);

  2. screen — объект, который используется для получения элементов из рендера. Это глобальная переменная, которая предоставляет несколько методов для поиска элементов, таких как getByText, getByRole, getByLabelText и другие.

    Пример использования screen:

    const linkElement = screen.getByText(/Привет, мир!/i);
expect(linkElement).toBeInTheDocument();

  3. fireEvent() — метод, который имитирует события, такие как клик или изменение. Этот метод позволяет протестировать взаимодействие с элементами в вашем компоненте.

    Пример:

    fireEvent.click(buttonElement);

  4. userEvent — более продвинутый способ имитации событий, который более точно отражает действия пользователя. Он предоставляет удобные функции для симуляции кликов, набора текста и других действий, связанных с пользовательским интерфейсом.

    Пример:

    import userEvent from '@testing-library/user-event';

userEvent.click(buttonElement);

Примеры взаимодействий

Тестирование взаимодействий с компонентами — одна из ключевых особенностей React Testing Library.

  1. Клик по кнопке:

    Чтобы протестировать клик по кнопке, нужно сначала найти кнопку в DOM и затем вызвать событие click:

    test('клик по кнопке увеличивает счетчик', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /увеличить/i });
  userEvent.click(button);
  const count = screen.getByText(/счетчик: 1/i);
  expect(count).toBeInTheDocument();
});

  2. Заполнение формы:

    Для проверки формы можно использовать методы поиска элементов по имени или метке.

    test('заполнение формы и отправка данных', () => {
  render(<Form />);
  const input = screen.getByLabelText(/имя/i);
  userEvent.type(input, 'Иван');
  const submitButton = screen.getByRole('button', { name: /отправить/i });
  userEvent.click(submitButton);
  const successMessage = screen.getByText(/форма отправлена!/i);
  expect(successMessage).toBeInTheDocument();
});

Советы по написанию тестов

  • Пиши тесты с точки зрения пользователя. Не проверяйте внутреннее состояние компонента или его методы. Лучше всего сосредоточиться на том, что видит и с чем взаимодействует пользователь.

  • Используй роли и доступность. Методы поиска элементов, такие как getByRole, помогают не только с доступностью, но и с более стабильными тестами. Всегда по возможности используйте роль элемента для поиска, а не конкретные стили или классы.

  • Обрабатывай асинхронные операции. Для компонентов, которые используют асинхронные операции (например, запросы к серверу), используйте findBy* методы или waitFor.

    test('загружаются данные', async () => {
  render(<DataComponent />);
  const loadingText = screen.getByText(/загрузка/i);
  expect(loadingText).toBeInTheDocument();
  const data = await screen.findByText(/данные загружены/i);
  expect(data).toBeInTheDocument();
});

  • Очистка после тестов. Jest автоматически очищает DOM между тестами, но если вы используете внешние библиотеки или компоненты с эффектами, убедитесь, что все ресурсы очищаются после выполнения тестов.

Заключение

React Testing Library фокусируется на написании тестов, которые отражают реальное поведение пользователей. Вместо того чтобы проверять внутреннюю реализацию компонентов, она ориентируется на проверку визуальных изменений, событий и взаимодействий с пользователем. Это позволяет создавать более устойчивые и легко поддерживаемые тесты, которые помогают выявлять ошибки на уровне интерфейса.

Оглавление