Artifacts и логирование в CI

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

Роль артефактов в CI

Артефакты представляют собой результаты выполнения тестов, которые могут включать логи, скриншоты, отчеты о тестах, а также данные об окружении. В контексте CI-цепочки, артефакты позволяют:

  • Сохранять важную информацию о ходе выполнения тестов.
  • Обеспечивать доступ к этим данным в случае необходимости.
  • Улучшать процесс отладки и ускорять выявление причин ошибок.

Рассмотрим, как правильно настроить артефакты в процессе тестирования с React Testing Library и как эффективно использовать логирование для мониторинга.

Настройка логирования в CI

В большинстве CI-инструментов, таких как Jenkins, CircleCI или GitHub Actions, существует встроенная поддержка для логирования. Это позволяет выводить результаты тестов и другие сообщения, такие как ошибки или предупреждения, непосредственно в интерфейс CI-системы. Важно обеспечить корректное логирование, чтобы можно было анализировать причины сбоя тестов.

Пример: Использование console.log и console.error

React Testing Library предоставляет различные методы для взаимодействия с DOM, но важно помнить, что все ошибки и дополнительные сообщения, которые могут возникнуть при тестировании, можно логировать с помощью стандартных инструментов JavaScript, таких как console.log или console.error. Эти методы будут выводить информацию в консоль CI-системы.

it('должен отображать правильный текст', () => {
  const { getByText } = render(<MyComponent />);
  const element = getByText('Привет, мир!');
  
  // Логирование
  console.log('Элемент найден:', element);
  
  expect(element).toBeInTheDocument();
});

Эти сообщения будут видны в логах CI-системы и помогут разработчикам быстро отслеживать поведение тестов.

Логирование ошибок

Важно не только выводить информацию, но и логировать ошибки, чтобы CI-система могла выделить их в отчетах. Для этого используется console.error, который фиксирует ошибки в тестах и позволяет CI-системам выделить их в интерфейсе, например, красным цветом или отдельными метками.

it('должен корректно обрабатывать ошибку', () => {
  try {
    throw new Error('Тестовая ошибка');
  } catch (error) {
    console.error('Ошибка в тесте:', error);
  }
});

Если тест не проходит, CI-система сразу же отобразит ошибку с нужным контекстом, что ускоряет поиск проблемы.

Создание артефактов тестирования

В процессе тестирования необходимо создать артефакты, которые будут сохранены и доступны для дальнейшего анализа. Наиболее распространенные артефакты — это отчеты о тестах, скриншоты или видео. React Testing Library в связке с Jest позволяет генерировать отчеты и другие артефакты, которые могут быть полезны при CI.

1. Генерация отчетов с помощью Jest

Jest имеет встроенную поддержку для создания отчетов о тестах. Эти отчеты можно использовать для анализа и интеграции с CI-системой. Для генерации отчетов можно использовать флаг --reporters или настроить в файле конфигурации Jest.

Пример настройки отчетности в jest.config.js:

module.exports = {
  reporters: [
    'default', // Стандартный отчет
    ['jest-junit', { outputDirectory: './test-reports', outputName: 'jest-test-report.xml' }],
  ],
};

Здесь добавляется отчет в формате JUnit, который можно интегрировать с большинством CI-систем для отображения результатов в удобном виде.

2. Сохранение скриншотов с помощью jest-image-snapshot

Для дополнительной отладки, когда тесты не проходят из-за визуальных ошибок, можно использовать библиотеки для снятия скриншотов компонентов. Одним из популярных инструментов является jest-image-snapshot, который позволяет автоматически сравнивать снимки экрана с эталонными изображениями.

Пример конфигурации с использованием jest-image-snapshot:

import { toMatchImageSnapshot } from 'jest-image-snapshot';

expect.extend({ toMatchImageSnapshot });

it('должен соответствовать эталонному изображению', () => {
  const { container } = render(<MyComponent />);
  expect(container).toMatchImageSnapshot();
});

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

Интеграция с CI-системами

В большинстве современных CI-систем можно настроить автоматическое сохранение артефактов тестирования. Рассмотрим, как это реализуется в нескольких популярных CI-платформах.

GitHub Actions

GitHub Actions позволяет сохранять артефакты тестов с помощью действия actions/upload-artifact. После того как тесты выполнены, можно сохранить отчеты или логи как артефакты.

Пример конфигурации .github/workflows/test.yml для сохранения отчетов:

name: Test

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Установить зависимости
        run: npm install

      - name: Запуск тестов
        run: npm test -- --reporters=jest-junit

      - name: Сохранить артефакты
        uses: actions/upload-artifact@v2
        with:
          name: test-reports
          path: ./test-reports/jest-test-report.xml

Этот workflow автоматически сохранит отчеты в артефакты, которые будут доступны для анализа.

CircleCI

В CircleCI также есть возможность сохранять артефакты с помощью ключа store_artifacts в конфигурации .circleci/config.yml.

Пример конфигурации для сохранения артефактов в CircleCI:

version: 2.1

jobs:
  test:
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: Установить зависимости
          command: npm install
      - run:
          name: Запуск тестов
          command: npm test -- --reporters=jest-junit
      - store_artifacts:
          path: ./test-reports
          destination: test-reports

workflows:
  version: 2
  test:
    jobs:
      - test

Это позволит автоматически сохранять тестовые отчеты в CircleCI для последующего просмотра.

Обработка неудачных тестов и логов

Одной из самых сложных задач в CI является обработка неудачных тестов. Важно не только получать уведомления о сбоях, но и иметь возможность быстро идентифицировать, почему тест не прошел.

Для этого стоит настроить CI таким образом, чтобы в случае неудачи тестов автоматически генерировались дополнительные артефакты, такие как:

  • Полные логи выполнения тестов.
  • Скриншоты или видео.
  • Дополнительные отладочные данные (например, значения переменных или состояние приложения в момент сбоя).

Это можно сделать с помощью различных плагинов или кастомных скриптов в CI-системах.

Вывод результатов тестирования в CI

Наконец, интеграция с CI-системой должна обеспечивать не только сбор артефактов, но и четкое отображение результатов тестов. Например, CI-системы могут отображать отчет в виде цветной метки, где красный цвет будет сигнализировать о неудачных тестах, а зеленый — об успешных. Важно, чтобы результаты тестирования были четко разделены на успешные и неудачные тесты, чтобы разработчики могли быстрее ориентироваться в проблемах.

Корректное логирование и управление артефактами в CI-системах помогает существенно улучшить процесс разработки и тестирования, повышая прозрачность и упрощая отладку.

Оглавление