Jest конфигурация расширенно

Jest является одним из самых популярных инструментов для тестирования в экосистеме React. Он предоставляет мощные возможности для написания и выполнения тестов, а также интеграции с различными библиотеками. В сочетании с React Testing Library (RTL) он становится идеальным решением для тестирования React-компонентов, так как позволяет писать тесты, максимально приближенные к реальному взаимодействию с приложением. Правильная настройка Jest для работы с React Testing Library требует нескольких шагов, начиная от конфигурации самого Jest до интеграции с RTL.

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

Перед началом работы с Jest и React Testing Library необходимо установить все необходимые зависимости. Это можно сделать с помощью npm или yarn:

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

После установки этих зависимостей, можно приступать к настройке Jest.

Конфигурация Jest

Для полноценной работы с Jest и React Testing Library необходимо создать или отредактировать конфигурационный файл Jest. В большинстве случаев, для React-проектов, конфигурацию можно задать в package.json, но для более гибкой настройки рекомендуется использовать отдельный файл конфигурации — jest.config.js. В данном случае будет рассмотрена конфигурация с использованием файла jest.config.js.

Базовая настройка

Пример минимальной конфигурации для Jest:

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[t|j]sx?$': 'babel-jest',
  },
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
    '<rootDir>/src/setupTests.js',
  ],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  testPathIgnorePatterns: ['/node_modules/', '/build/'],
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/index.js'],
};
  • testEnvironment: ‘jsdom’ — указывает Jest использовать среду jsdom для тестирования, что позволяет эмулировать браузерные API, такие как window и document, которые необходимы для работы с React-компонентами.
  • transform: { ‘^.+.[t|j]sx?$’: ‘babel-jest’ } — настроено использование Babel для транспиляции JSX и TypeScript в обычный JavaScript.
  • setupFilesAfterEnv — список файлов, которые будут загружены после настройки среды тестирования. Здесь подключаем @testing-library/jest-dom для расширения Jest новыми матчерами, такими как .toBeInTheDocument(), а также создаём свой файл конфигурации setupTests.js, который может быть полезен для дополнительных настроек.
  • moduleFileExtensions — список расширений файлов, которые Jest будет обрабатывать.
  • testPathIgnorePatterns — паттерны для игнорирования некоторых файлов или папок, например, папки с зависимостями или сборочными артефактами.
  • coverageDirectory — путь к директории, куда будет сохраняться отчёт о покрытии тестами.
  • collectCoverageFrom — указывает, какие файлы следует отслеживать для покрытия тестами.

Дополнительные настройки

  1. Базовая настройка TypeScript

    Если проект использует TypeScript, необходимо добавить несколько настроек для работы с ним. Jest требует использования ts-jest для трансформации TypeScript-кода. Для этого нужно установить ts-jest:

    npm install --save-dev ts-jest

    После этого в конфигурации Jest нужно указать трансформатор:

    transform: {
  '^.+\\.[t|j]sx?$': 'ts-jest',
},

  2. Настройка глобальных переменных

    В тестах с React Testing Library часто приходится работать с глобальными объектами, такими как window, document или localStorage. Для настройки этих объектов можно использовать файл setupTests.js:

    import '@testing-library/jest-dom';
import { server } from './mocks/server'; // если используется Mock Service Worker (MSW)

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

    Этот файл будет автоматически загружен Jest при каждом запуске тестов благодаря настройке в setupFilesAfterEnv.

  3. Mocking и статики

    Иногда бывает полезно настроить моки для импортируемых модулей или статики. Jest предоставляет для этого функцию jest.mock(), которая позволяет заменить импорты на моки, облегчая тестирование компонентов в изоляции.

    Например, если компонент использует изображение или стиль, можно замокать его:

    jest.mock('./image.jpg', () => 'mocked-image.jpg');

    Таким образом, вместо реального изображения будет использоваться строка 'mocked-image.jpg', что позволит избежать ошибок при рендеринге тестов.

Интеграция с React Testing Library

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

Рендеринг компонента

Для рендеринга компонента используется метод render из @testing-library/react. Он возвращает объект с несколькими полезными методами для взаимодействия с компонентом.

Пример рендеринга компонента:

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

test('проверка текста в компоненте', () => {
  render(<MyComponent />);
  const textElement = screen.getByText(/hello world/i);
  expect(textElement).toBeInTheDocument();
});
  • render(<MyComponent />) — рендерит компонент.
  • screen.getByText(/hello world/i) — ищет элемент с текстом, который соответствует регулярному выражению.
  • expect(textElement).toBeInTheDocument() — проверяет, что элемент с нужным текстом присутствует в DOM.

Симуляция событий

Для симуляции действий пользователя используется библиотека @testing-library/user-event. Она предоставляет API для имитации кликов, ввода текста, выбора значений в формах и прочего.

Пример симуляции клика:

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

test('проверка клика по кнопке', () => {
  render(<MyButton />);
  const button = screen.getByRole('button');
  userEvent.click(button);
  expect(screen.getByText(/кнопка нажата/i)).toBeInTheDocument();
});

Здесь с помощью userEvent.click(button) симулируется клик по кнопке, а затем проверяется, появился ли текст, который должен отобразиться после нажатия.

Покрытие тестами и отчёты

Jest позволяет автоматически генерировать отчёты о покрытии тестами. Для этого в конфигурации нужно указать соответствующие параметры. Покрытие может быть полезным для анализа, насколько хорошо тестируются компоненты и части приложения.

Пример конфигурации для покрытия тестами:

collectCoverage: true,
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
coverageReporters: ['text', 'lcov'],

После выполнения тестов Jest сгенерирует отчёт о покрытии, который можно будет просмотреть прямо в консоли или в виде HTML-отчёта.

Заключение

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

Оглавление