Запуск тестов в GitHub Actions

GitHub Actions предоставляет встроенную систему автоматизации CI/CD, позволяющую запускать тесты при каждом коммите или pull request. Для Vue-приложений с использованием Vue Test Utils и Jest или Vitest можно полностью автоматизировать процесс проверки корректности компонентов и логики.

Создание workflow файла

Workflow файлы располагаются в .github/workflows/ и имеют расширение .yml. Простейший пример для запуска тестов:

name: Vue Test Suite

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

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm run test:unit

Разбор ключевых элементов:

runs-on: ubuntu-latest — выбор среды выполнения. Можно использовать также windows-latest или macos-latest.
actions/checkout@v3 — клонирует репозиторий в рабочую директорию runner.
actions/setup-node@v3 — настраивает Node.js и npm/yarn.
npm ci — гарантирует чистую установку зависимостей на основе package-lock.json.
npm run test:unit — стандартная команда запуска unit-тестов, прописанная в package.json.

Кэширование зависимостей для ускорения сборки

Для больших проектов полезно кэшировать node_modules или кэшировать сам npm кеш:

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

Это снижает время установки зависимостей и делает workflow более эффективным.

Настройка окружения для Vue Test Utils

Vue Test Utils требует наличия полной среды Node.js и поддерживаемого тестового раннера. Для Jest или Vitest важно правильно настроить:

      - name: Setup Vitest environment
        run: npm install -D vitest jsdom

Пояснения:

jsdom эмулирует браузерное окружение, необходимое для тестирования Vue-компонентов.
Установка dev-зависимостей напрямую в workflow позволяет избежать проблем с отсутствием нужных пакетов.

Запуск тестов с отчетами

Для анализа результатов удобно собирать отчеты в формате JUnit или HTML. Пример для Jest:

      - name: Run Jest with coverage
        run: |
          npx jest --coverage --ci --reporters=default --reporters=jest-junit

      - name: Upload test results
        uses: actions/upload-artifact@v3
        with:
          name: jest-results
          path: jest-junit.xml

Пояснения:

--coverage собирает статистику покрытия.
--ci включает режим Continuous Integration для стабильного вывода.
jest-junit генерирует отчет в формате, совместимом с CI-системами.
actions/upload-artifact@v3 позволяет сохранять отчеты для последующего анализа.

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

Для ускорения сборки больших проектов тесты можно запускать параллельно на нескольких рабочих узлах:

  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20]

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run test:unit

Использование матрицы Node.js позволяет проверять совместимость проекта сразу с несколькими версиями платформы.

Интеграция с Pull Requests

GitHub Actions автоматически отображает статус проверки прямо в интерфейсе pull request:

Зеленая галочка — все тесты пройдены.
Красный крест — один или несколько тестов упали.
Детали можно посмотреть прямо в веб-интерфейсе GitHub, включая логи Jest/Vitest.

Отладка тестов в CI

При ошибках полезно включать подробный вывод:

      - name: Run tests with verbose
        run: npm run test:unit -- --verbose

Также можно сохранять артефакты тестов, скриншоты или логи Vue Test Utils для диагностики:

      - name: Save logs
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: test-logs
          path: ./logs