GitLab CI тестирование

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

Установка необходимых зависимостей

Прежде чем приступить к конфигурации GitLab CI, необходимо подготовить окружение для тестирования. Для этого следует установить несколько зависимостей:

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

Эти пакеты обеспечат функциональность для написания тестов и их выполнения в среде тестирования. @testing-library/react отвечает за рендеринг компонентов, @testing-library/jest-dom предоставляет дополнительные матчеры для работы с DOM, а jest — это тестовый фреймворк.

Создание конфигурации для GitLab CI

Конфигурация пайплайна в GitLab CI описывается в файле .gitlab-ci.yml, который должен быть расположен в корне проекта. Для начала создадим базовую структуру конфигурации, которая будет включать стадии сборки и тестирования.

Пример конфигурации:

stages:
  - install
  - test

install_dependencies:
  stage: install
  image: node:16
  script:
    - npm install

test:
  stage: test
  image: node:16
  script:
    - npm test

В этом примере определены две стадии:

  • install — установка зависимостей проекта.
  • test — выполнение тестов.

Для каждой стадии используется образ node:16, что обеспечивает консистентность среды на всех этапах пайплайна. На стадии install_dependencies происходит установка всех зависимостей, а на стадии test запускается команда для выполнения тестов с использованием Jest.

Настройка Jest для работы с React Testing Library

Jest, в связке с React Testing Library, требует минимальной настройки для начала работы. Для этого нужно убедиться, что в проекте правильно настроен конфигурационный файл Jest (jest.config.js), который будет указывать, как обрабатывать JSX и другие особенности React-приложений.

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

module.exports = {
  preset: 'react',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
};
  • preset: 'react' — настройка для работы с React.
  • testEnvironment: 'jsdom' — использование среды исполнения браузера в Node.js.
  • setupFilesAfterEnv — добавление расширений для Jest, таких как @testing-library/jest-dom, чтобы использовать кастомные матчеры, например toBeInTheDocument().
  • transform — настройка для транспиляции файлов JSX с помощью babel-jest.

Эта конфигурация подходит для большинства стандартных React-проектов.

Создание и запуск тестов

Для тестирования React-компонентов с использованием React Testing Library необходимо использовать функции рендеринга и взаимодействия с DOM. Рассмотрим простой пример компонента и его теста.

Пример компонента Button.js:

import React from 'react';

const Button = ({ label, onClick }) => (
  <button onCl ick={onClick}>{label}</button>
);

export default Button;

Пример теста для компонента Button.js:

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

test('отображение кнопки с переданным текстом', () => {
  render(<Button label="Click me" onCl ick={() => {}} />);
  const buttonElement = screen.getByText(/Click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('обработчик клика вызывается при нажатии кнопки', () => {
  const handleClick = jest.fn();
  render(<Button label="Click me" onCl ick={handleClick} />);
  const buttonElement = screen.getByText(/Click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Здесь используется:

  • render — функция для рендеринга компонента.
  • screen — объект для поиска элементов на экране.
  • fireEvent — метод для симуляции событий, таких как клик.

Эти тесты проверяют, что кнопка отображается с правильным текстом и что обработчик события вызывается при клике.

Параллельный запуск тестов

GitLab CI поддерживает параллельный запуск тестов, что помогает ускорить процесс тестирования, особенно при большом объеме тестов. Для этого можно настроить Jest на запуск тестов в несколько потоков, разделяя их на несколько процессов.

В конфигурации .gitlab-ci.yml можно использовать следующую настройку:

test:
  stage: test
  image: node:16
  script:
    - npm test -- --maxWorkers=4

Здесь флаг --maxWorkers=4 указывает Jest запускать до 4 процессов для выполнения тестов. Это может существенно ускорить выполнение тестов при наличии большого количества файлов и компонентов.

Кэширование зависимостей

Для ускорения пайплайна можно настроить кэширование зависимостей в GitLab CI. Это позволяет избегать повторной загрузки зависимостей при каждом запуске пайплайна, что сокращает время сборки.

Пример конфигурации с кэшированием:

cache:
  paths:
    - node_modules/

install_dependencies:
  stage: install
  image: node:16
  script:
    - npm install
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - node_modules/

test:
  stage: test
  image: node:16
  script:
    - npm test

В данном случае кэшируются директории node_modules/, что позволяет GitLab CI использовать их на следующих этапах, если зависимости не изменились.

Отчеты о тестах

GitLab CI предоставляет возможность интегрировать отчеты о тестах в интерфейс с помощью встроенной поддержки JUnit. Для этого можно настроить Jest на генерацию отчетов в формате JUnit и настроить вывод этих отчетов в GitLab.

Пример настройки Jest для генерации отчетов:

module.exports = {
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: 'test-results', outputName: 'jest-junit.xml' }],
  ],
};

После выполнения тестов файлы отчетов будут сохранены в директории test-results, и GitLab CI сможет обработать их и отобразить в интерфейсе.

Пример полного пайплайна для GitLab CI

Пример финальной конфигурации .gitlab-ci.yml:

stages:
  - install
  - test

cache:
  paths:
    - node_modules/

install_dependencies:
  stage: install
  image: node:16
  script:
    - npm install
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - node_modules/

test:
  stage: test
  image: node:16
  script:
    - npm test -- --maxWorkers=4
  artifacts:
    paths:
      - test-results/jest-junit.xml
    reports:
      junit: test-results/jest-junit.xml

В данном пайплайне:

  • Сначала устанавливаются зависимости.
  • Затем выполняются тесты с параллельным запуском.
  • Результаты тестов сохраняются в формате JUnit и отображаются в интерфейсе GitLab.

Заключение

Интеграция GitLab CI с тестированием React-приложений с использованием React Testing Library и Jest позволяет значительно упростить процесс разработки и гарантировать качество кода. Автоматизация тестирования в CI/CD пайплайне ускоряет процессы проверки и делает их более стабильными.

Оглавление