Запуск тестов в GitLab CI

GitLab CI/CD предоставляет мощный механизм автоматизации процессов сборки, тестирования и деплоя приложений. Для проектов на Vue.js с использованием Vue Test Utils интеграция тестов в пайплайн позволяет поддерживать стабильность кода и предотвращать регрессии.

Структура проекта и подготовка

Для корректного запуска тестов необходимо убедиться, что структура проекта соответствует стандартам Vue CLI или Vite:

project/
├─ src/
├─ tests/
│  ├─ unit/
│  │  └─ Example.spec.js
├─ package.json
├─ vue.config.js
└─ jest.config.js

Ключевые зависимости для юнит-тестирования с Vue Test Utils:

"devDependencies": {
  "@vue/test-utils": "^3.2.0",
  "jest": "^29.0.0",
  "babel-jest": "^29.0.0",
  "vue-jest": "^29.0.0"
}

Файл jest.config.js должен включать настройку для работы с Vue-компонентами:

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testEnvironment: 'jsdom',
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}']
};

Конфигурация GitLab CI

Файл .gitlab-ci.yml определяет этапы пайплайна. Для тестирования Vue Test Utils достаточно создать отдельный job с этапом test:

stages:
  - test

variables:
  NODE_ENV: test
  NPM_CONFIG_CACHE: "$CI_PROJECT_DIR/.npm"

cache:
  paths:
    - node_modules/

test_unit:
  stage: test
  image: node:20
  script:
    - npm ci
    - npm run test:unit
  artifacts:
    when: always
    paths:
      - coverage/
    reports:
      junit: junit.xml

Разбор конфигурации:

  • image: node:20 — использование официального Docker-образа Node.js.
  • npm ci — чистая установка зависимостей для стабильного и повторяемого окружения.
  • npm run test:unit — запуск тестов, обычно определяется в package.json как:
"scripts": {
  "test:unit": "jest --coverage --runInBand"
}
  • artifacts и reports позволяют сохранять результаты покрытия кода и отчёты в формате JUnit, которые GitLab может отображать в интерфейсе пайплайна.

Интеграция с Docker

Для проектов с Docker полезно создавать отдельный образ для тестирования. Пример Dockerfile для тестов:

FROM node:20

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

CMD ["npm", "run", "test:unit"]

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

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

  1. Параллельный запуск: для крупных проектов тесты можно запускать в несколько потоков через --maxWorkers в Jest.

    "scripts": {
  "test:unit": "jest --coverage --maxWorkers=4"
}

  2. Изоляция окружения: использование --runInBand предотвращает проблемы с глобальными состояниями при тестах компонентов Vue с Vuex или Vue Router.

  3. Кеширование зависимостей: GitLab CI поддерживает кеширование node_modules и .npm для ускорения последующих сборок.

Отчёты и покрытие кода

GitLab CI поддерживает публикацию отчетов о покрытии кода. Настройка collectCoverage в Jest позволяет генерировать отчет, который затем можно визуализировать:

artifacts:
  when: always
  paths:
    - coverage/
  reports:
    cobertura: coverage/cobertura-coverage.xml

Jest поддерживает вывод отчёта в формате Cobertura:

"jest": {
  "coverageReporters": ["json", "lcov", "cobertura"]
}

Это позволяет GitLab автоматически отображать информацию о проценте покрытия и изменениях в коде.

Интеграция с Vue Test Utils

Vue Test Utils позволяет монтировать компоненты и проверять их поведение без запуска браузера:

import { mount } from '@vue/test-utils';
import Example from '@/components/Example.vue';

test('renders message correctly', () => {
  const wrapper = mount(Example, {
    props: { msg: 'Hello' }
  });
  expect(wrapper.text()).toContain('Hello');
});

При запуске в GitLab CI важно учитывать, что окружение не имеет графического интерфейса, поэтому Jest использует jsdom для эмуляции DOM. Это обеспечивает идентичное поведение тестов локально и на CI.

Частые ошибки и их решение

  • Проблемы с зависимостями Vue: убедиться, что версии vue, @vue/test-utils и vue-jest совместимы.
  • Ошибка Cannot find module 'vue': чаще всего возникает из-за отсутствия правильного кеширования node_modules или некорректной установки пакетов.
  • Тесты падают на CI, но проходят локально: обычно связано с различием переменных окружения, версий Node или глобальных модулей.

Расширенные возможности GitLab CI

  • Pipeline triggers: тесты можно запускать автоматически при push в определенные ветки или при открытии merge request.
  • Environment variables: можно использовать для переключения между staging и production конфигурациями, что особенно важно при интеграционных тестах.
  • Scheduled pipelines: позволяет регулярно проверять стабильность кода даже без новых коммитов, что актуально для крупных проектов с большим количеством зависимостей.

Эта интеграция обеспечивает полную автоматизацию процесса тестирования Vue-компонентов, формирует стандартизированные отчёты и повышает надёжность всего проекта на этапах CI/CD.

Оглавление