Jenkins с React тестами

Jenkins является одним из самых популярных инструментов для автоматизации сборки и тестирования в CI/CD пайплайнах. Его интеграция с React-проектами и React Testing Library позволяет выстраивать стабильный процесс тестирования, который облегчает разработку и повышает качество кода. В этой статье рассмотрим, как настроить Jenkins для запуска тестов React с использованием React Testing Library, а также рекомендации по организации процесса тестирования в пайплайне.

Установка и настройка Jenkins

Для начала нужно установить Jenkins. Это можно сделать несколькими способами:

  1. Через официальные пакеты: Jenkins поддерживает различные операционные системы (Linux, Windows, macOS) и предоставляет установочные пакеты для каждой платформы. Самым распространённым способом является использование пакетного менеджера, например, для Ubuntu:

    sudo apt update
sudo apt install openjdk-11-jdk
sudo apt install jenkins

  2. Через Docker: Более удобный способ, позволяющий изолировать Jenkins от системы. Для этого можно использовать официальный образ Jenkins:

    docker run -p 8080:8080 -p 50000:50000 jenkins/jenkins:lts

После установки, нужно настроить Jenkins через веб-интерфейс. Обычно он доступен по адресу http://localhost:8080. В процессе настройки потребуется установить несколько плагинов, таких как Git, NodeJS, Pipeline.

Интеграция Jenkins с React-проектом

Для начала создадим простой React-проект и настроим его для работы с Jenkins.

  1. Создание React-проекта:

    Для создания React-проекта используем create-react-app:

    npx create-react-app react-testing
cd react-testing

  2. Установка зависимостей для тестирования:

    В проекте необходимо установить библиотеки для тестирования, такие как React Testing Library и Jest:

    npm install --save-dev @testing-library/react @testing-library/jest-dom jest

  3. Написание тестов:

    В папке src/__tests__ создаём тесты для компонентов. Например, создадим простой тест для компонента App:

    // src/__tests__/App.test.js
import { render, screen } from '@testing-library/react';
import App from '../App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

  4. Настройка файла package.json:

    Для того чтобы тесты корректно запускались в Jenkins, добавим в файл package.json необходимые скрипты:

    "scripts": {
  "test": "react-scripts test --ci --watchAll=false"
}

    Ключ --ci необходим для того, чтобы Jest работал в режиме CI, отключая интерактивный режим и не ожидая пользовательского ввода.

Настройка Jenkins для запуска тестов

Теперь перейдём к настройке Jenkins для автоматического запуска тестов React.

  1. Создание нового задания (Job):

    В веб-интерфейсе Jenkins создаём новое задание типа Freestyle project. В разделе Source Code Management указываем репозиторий проекта (например, GitHub или Bitbucket). Вставляем URL репозитория и указываем настройки для клонирования.

  2. Настройка NodeJS:

    Чтобы запускать тесты с использованием Node.js, в Jenkins нужно настроить NodeJS. Для этого:

    • Устанавливаем плагин NodeJS Plugin в Jenkins.
    • В разделе Global Tool Configuration указываем путь к установленной версии Node.js или используем одну из предустановленных версий.

  3. Настройка сборки:

    В разделе Build добавляем шаги для установки зависимостей и запуска тестов:

    • Шаг 1: Установка зависимостей

      Для установки зависимостей в React-проекте используем команду:

      npm install

    • Шаг 2: Запуск тестов

      В качестве команды для сборки указываем:

      npm test

    Это запустит тесты с использованием React Testing Library и Jest.

  4. Настройка отчётов:

    Для того чтобы видеть результаты тестов в Jenkins, можно настроить плагин для отображения отчётов Jest. В разделе Post-build Actions добавляем шаг для сбора результатов тестирования:

    • Выбираем Publish JUnit test result report.
    • В поле Test report XMLs указываем путь к файлу отчёта Jest:
    junit-report.xml

    Jest может генерировать отчёт в формате JUnit, если в файле package.json указать соответствующую опцию:

    "jest": {
  "reporters": [
    "default",
    ["jest-junit", { "outputDirectory": "./" }]
  ]
}

    Это обеспечит вывод тестовых результатов в формате, совместимом с Jenkins.

Оптимизация процесса тестирования

  1. Кеширование зависимостей:

    Для ускорения сборки в Jenkins можно кешировать зависимости. Это позволяет избежать повторной установки зависимостей при каждом запуске сборки. Для этого можно использовать плагин NodeJS Plugin с опцией кеширования npm-кеша.

    Добавляем шаг в процессе сборки, который будет использовать кеш:

    npm ci

    Команда npm ci используется для установки зависимостей, сохраняя стабильность версий и ускоряя процесс установки.

  2. Параллельное выполнение тестов:

    В больших проектах важно разделить тесты на несколько групп и запускать их параллельно для сокращения времени выполнения. Для этого можно использовать флаг Jest --maxWorkers, который позволяет указать количество потоков для параллельного выполнения:

    npm test -- --maxWorkers=4

    Это распределит тесты по четырём потокам, значительно ускоряя выполнение тестов.

Развертывание и мониторинг

После того как интеграция с Jenkins завершена, можно настроить систему уведомлений для отслеживания статуса тестов. Jenkins позволяет отправлять уведомления через различные каналы, такие как электронная почта, Slack или другие сервисы.

Для отправки уведомлений через Slack, нужно настроить соответствующий плагин в Jenkins и указать нужные параметры канала для отправки сообщений. Уведомления помогут оперативно реагировать на ошибки в тестах и быстрее их исправлять.

Кроме того, можно настроить Jenkins на автоматический деплой приложения после успешных тестов, что обеспечит полный CI/CD процесс.

Заключение

Интеграция Jenkins с React и React Testing Library даёт мощный инструмент для автоматизации тестирования в процессе разработки. Настроив Jenkins для запуска тестов, можно значительно улучшить качество кода, ускорить процесс тестирования и упростить поддержку проекта в будущем.

Оглавление