Настройка окружения: package.json, jest.config.js, setup файлы

Для эффективного тестирования React-приложений необходимо корректное окружение. Основой служат package.json, конфигурационные файлы Jest и setup-файлы, которые обеспечивают интеграцию тестового фреймворка с React Testing Library.

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

Базовый набор для тестирования React-компонентов включает:

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

При использовании TypeScript добавляются типы:

npm install --save-dev @types/jest ts-jest

Настройка package.json

package.json хранит информацию о скриптах и зависимостях. Для тестирования React-приложений важно определить скрипт для запуска тестов:

{
  "scripts": {
    "test": "jest --watchAll"
  },
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
    "testEnvironment": "jsdom",
    "moduleFileExtensions": ["js", "jsx", "ts", "tsx", "json"],
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
    }
  }
}

Ключевые моменты:

  • setupFilesAfterEnv – массив путей к файлам, которые будут выполняться до запуска тестов, например подключение @testing-library/jest-dom.
  • testEnvironment – среда выполнения тестов. Для React используется jsdom.
  • transform – указание Jest, как обрабатывать JSX и TypeScript через Babel.

Создание jest.config.js

Для более сложных проектов часто удобнее выделить конфигурацию Jest в отдельный файл:

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
  },
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  },
  testPathIgnorePatterns: ['/node_modules/', '/build/']
};

Пояснения к важным полям:

  • moduleNameMapper – позволяет Jest корректно обрабатывать импорты CSS-модулей.
  • testPathIgnorePatterns – исключает папки node_modules и build из поиска тестов.
  • setupFilesAfterEnv – точка подключения глобальных расширений и кастомных матчеров.

Настройка setup-файлов

Setup-файлы обеспечивают глобальное расширение возможностей тестирования. Создается файл, например src/setupTests.js:

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

  • Подключение jest-dom добавляет удобные матчеры:

    • toBeInTheDocument()
    • toHaveTextContent()
    • toHaveAttribute()

Дополнительно в setup-файле можно создавать глобальные моки, например для fetch или localStorage:

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({})
  })
);

Организация структуры проекта

Рекомендуемая структура тестов в React-проекте:

src/
 ├─ components/
 │   ├─ Button.jsx
 │   └─ Button.test.jsx
 ├─ utils/
 │   └─ helpers.test.js
 └─ setupTests.js
  • Тестовые файлы располагаются рядом с компонентами для удобства.
  • Все тесты используют один общий setup-файл.

Использование Babel с Jest

Если проект использует современный синтаксис JSX или ESModules, необходим Babel. Пример .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
  • @babel/preset-env – транспиляция современного JS.
  • @babel/preset-react – поддержка JSX.

Для TypeScript необходимо добавить:

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

Итоговые рекомендации

  1. Все зависимости для тестирования должны быть установлены локально, чтобы избежать конфликтов версий.
  2. Setup-файлы подключаются один раз, что позволяет использовать глобальные матчеры и моки.
  3. Jest с React Testing Library требует jsdom, чтобы симулировать браузерное окружение.
  4. Структура проекта влияет на удобство поддержки тестов и масштабируемость.

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

Оглавление