GitHub Actions для тестирования

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

Настройка GitHub Actions

Для начала необходимо создать конфигурационный файл для GitHub Actions в корне репозитория. Стандартное местоположение для этого файла — .github/workflows/ci.yml. Он будет определять, как именно должны выполняться действия в процессе CI (непрерывной интеграции).

Пример базовой настройки workflow для тестирования React-приложения:

name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --ci --watchAll=false

Этот файл запускает workflow на события push и pull_request для ветки main. В нем описаны основные шаги:

  1. Checkout кода — GitHub Actions использует специальное действие actions/checkout, чтобы загрузить последние изменения из репозитория.
  2. Настройка Node.js — с помощью действия actions/setup-node задается версия Node.js.
  3. Установка зависимостей — команда npm install устанавливает все зависимости из package.json.
  4. Запуск тестов — команда npm test выполняет тесты, при этом параметры --ci и --watchAll=false гарантируют, что тесты будут запускаться в CI-режиме и не будут зависеть от состояния watch-режима.

Интеграция с React Testing Library

React Testing Library (RTL) — это инструмент для тестирования React-компонентов. Он помогает писать тесты, ориентированные на пользовательский интерфейс, имитируя реальное взаимодействие пользователя с приложением. GitHub Actions можно настроить для работы с React Testing Library так же, как и с любыми другими тестами.

При использовании npm test с настройками Jest и React Testing Library, GitHub Actions автоматически будет запускать все тесты, расположенные в папке src, где обычно находятся компоненты. Пример теста с использованием RTL:

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

test('renders MyComponent correctly', () => {
  render(<MyComponent />);
  const element = screen.getByText(/Hello, world!/i);
  expect(element).toBeInTheDocument();
});

Оптимизация с кэшированием зависимостей

Каждый раз, когда GitHub Actions выполняет workflow, он должен заново устанавливать зависимости с помощью npm install. Это может занимать значительное время, особенно на больших проектах. Чтобы ускорить процесс, можно использовать кэширование зависимостей с помощью действия actions/cache.

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

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

      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-modules-

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --ci --watchAll=false

В этом примере используется кэширование папки ~/.npm с зависимостями. Ключ для кэша строится на основе хеш-суммы файла package-lock.json, что позволяет обновлять кэш при изменении зависимостей. При следующем запуске GitHub Actions будет восстанавливать зависимости из кэша, что существенно ускоряет процесс.

Запуск тестов на разных платформах

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

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest, macos-latest]
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --ci --watchAll=false

В данном случае тесты будут выполняться на трех различных операционных системах: Ubuntu, Windows и macOS. Это позволяет гарантировать, что приложение будет корректно работать на разных платформах.

Визуализация результатов тестов

Для удобства анализа результатов тестов можно интегрировать с сервисами, такими как Codecov или Coveralls, которые отслеживают покрытие кода тестами. В GitHub Actions можно настроить публикацию результатов покрытия после каждого выполнения workflow.

Пример интеграции с Codecov:

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --ci --coverage --watchAll=false

      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v2
        with:
          token: ${{ secrets.CODECOV_TOKEN }}

Здесь после выполнения тестов с параметром --coverage загрузка результатов покрытия осуществляется с помощью действия codecov-action. Для этого нужно получить токен на платформе Codecov и добавить его в секреты GitHub репозитория.

Обработка ошибок и уведомления

Важно настроить уведомления о результатах тестов, чтобы оперативно реагировать на сбои. GitHub Actions предоставляет возможность интегрировать уведомления через Slack, почту или другие каналы. Для этого используются специальные действия, такие как slack-notify.

Пример настройки уведомлений через Slack:

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --ci --watchAll=false

      - name: Send Slack notification
        uses: 8398a7/action-slack@v3
        if: failure()
        with:
          slack_webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}
          status: failure

Этот шаг будет отправлять уведомление в Slack, если тесты не прошли. Для этого необходимо добавить вебхук Slack в секреты репозитория.

Заключение

GitHub Actions предоставляет гибкие возможности для настройки автоматического тестирования React-приложений, интегрируя их с React Testing Library. С помощью правильно настроенного workflow можно ускорить процесс тестирования, повысить качество кода и интегрировать различные инструменты для отслеживания покрытия и уведомлений о результатах.

Оглавление