В этой статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование.
Jest на проектах React и Next (настройка тестовой среды)
Unit-тесты — это основа тестирования в современной веб-разработке. Они позволяют проверять корректность работы отдельных функций, модулей или компонентов в изоляции от остальной части приложения. Одним из самых распространённых инструментов для написания таких тестов в JavaScript является Jest — он быстро запускается, поддерживает снимки (snapshot-тесты) и легко интегрируется с большинством современных фреймворков.
Установка Jest
Для начала работы с Jest необходимо установить его в ваш проект:
После установки Jest будет добавлен в ваш проект как dev-зависимость для разработки.
Настройка Jest
Jest не требует сложной настройки и работает «из коробки». Мы рассмотрим более изящный вариант, который позволит настроить Jest под конкретный проект.
Создание конфигурации Jest:
При создании конфигурационного файла будут заданы вопросы:
- Хотим ли мы установить скрипт test в package.json — yes
- Используем ли мы TypeScript — yes
- В качестве тестовой среды выберем — jsdom
- Хотим ли мы получать отчёт по покрытию тестами — no
- Выбираем транслятор кода — babel
- Хотим ли мы очищать моки после каждого теста — yes
На этом установка завершена, мы получили файл jest.config.ts, в котором практически всё закомментировано. Пройдемся по файлу и раскомментируем нужные параметры.
Конфигурация, которая получилась:
Расскажем о некоторых настройках:
- Для настройки jest мы будем создавать несколько файлов, поэтому вынесем конфигурационный файл из корня проекта в отдельную папку. В rootDir указываем путь до корневой папки проекта, затем добавляем путь до конфигурационного файла в скрипт запуска тестов в package.json в нашем случае это:
- testMatch — регулярное выражение, по которому определяются файлы с тестами. У стандартных шаблонов есть различия между macOS и Windows, поэтому используем универсальное выражение с явным указанием корневой папки.
- modulePaths — Будем использовать абсолютные импорты в тестах.
Прежде чем начать писать unit-тесты, добавим соответствующую настройку в корневой файл .eslintrc.js.
Если вы решили оставить закомментированными правила в конфигурационном файле, добавьте правило для предотвращения ошибок, вызванных длиной строки:
Создадим тестовый файл testing.test.ts и напишем простой тест для проверки настроек.
Если вы настраиваете проект на React, то на данном этапе уже можно запустить и получить успешно пройденный тест. А для проекта на Next.js устанавливаем дополнительные пакеты:
Внесем коррективы в jest.config.ts согласно документации.
В тестовом файле testing.test.ts возникает ошибка на describe, потому что TypeScript рассматривает файл как глобальный скрипт, а не как модуль. Чтобы исправить эту ошибку временно, достаточно добавить любой импорт или экспорт в файл.
Теперь можем запустить тесты и на Next.js
И получаем отчет об успешно пройденном тесте.
Добавим провальный тест:
Выполняем команду
и получаем отчет, в котором указано, что один тест прошел успешно, а второй провалился.
Создадим тестовую функцию:
Используем ее для тестирования
В проекте на React среда разработки подскажет, что Jest не знает о наличии TypeScript в проекте. Для этого устанавливаем пакет:
Добавляем пресет в файле babel.config.json
Запускаем тесты
И всё работает отлично — функция импортировалась, два теста прошли успешно, один провалился.
Статья по теме
🧪 Успешное тестирование: основы и передовые приемы Jest. Часть 1
Тестирование компонентов интерфейса React Testing Library(RTL)
Установка:
Рядом с файлом конфигурации Jest создаём файл setupTests.ts и добавляем в него:
Добавляем в jest.config.ts путь до файла
Свяжем setupTests.ts с tsconfig.json. Добавим с указанием пути до файла.
Теперь мы можем использовать все функции для проверки, связанные с использованием DOM-дерева — такие как проверка стилей, класса, контента или, например, находится ли элемент в DOM-дереве — toBeInTheDocument().
Функция render из библиотеки RTL (React Testing Library) позволяет нам отрисовать отдельный элемент интерфейса, а также предоставляет объект screen с набором методов, с помощью которых можно получать данные об этом элементе.
На проекте Next.js можно запускать тесты.
Для React-проекта перед запуском тестов установим дополнительный пакет:
И добавим пресет в массив файла babel.config.json
Установим пакет для настройки работы с scss:
Добавляем в файл jest.config.ts настройку для обработки scss:
Ниже представлена команда, которая запускает тесты для указанного файла. Для запуска всех unit-тестов используйте команду npm run test:unit.
Чтобы работать с компонентами, содержащими SVG-файлы в React, добавим соответствующую настройку в конфигурацию Jest.
Здесь мы описываем, что в случае использования расширения .svg будет подключен файл, расположенный по указанному пути. Ну и, собственно, создаём компонент который будет использоваться вместо svg файла.
В случае с Next.js мы можем создавать моки для каждого используемого в компоненте svg.
Но каждый раз создавать моки для каждой иконки не очень удобно, чтобы этого избежать переделаем файл jest.config.ts:
Все настройки Jest мы определили в объекте customJestConfig, а функцию createJestConfig оставили без изменений, чтобы учитывать стандарты Next.js.
👨💻🎨 Библиотека фронтендера
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»
Создание конфигурации jestConfig:
nextJestConfig создаёт базовую конфигурацию Jest для проекта на Next.js, учитывая все необходимые оптимизации и специфику работы с использованием функции next/jest. В параметрах передаём наш объект конфигурации.
await гарантирует, что в nextJestConfig будет содержаться полная конфигурация после выполнения асинхронной операции.
Запускаем тест:
Тест проходит успешно
Чтобы запускать тесты для асинхронных операций на React, нам не требуется менять конфиг подобным образом мы можем просто установить пакет:
и импортировать его в setypTests.ts
Теперь мы можем удалить наши временные файлы для тестирования настроек — среда разработки готова к unit тестированию.
Заключение
Jest — это мощный и гибкий инструмент для написания unit-тестов в JavaScript. Он прост в настройке, с богатым набором функций и отличной интеграцией с современными фреймворками, такими как React и Next.js. Использование Jest не только улучшает качество кода и уменьшает количество ошибок, но и ускоряет процесс разработки, позволяя сосредоточиться на функциональности, а не на отладке. Начать писать unit-тесты с Jest можно быстро, и уже после нескольких тестов вы заметите, как это упрощает поддержку и развитие вашего приложения.