Запуск тестов в Jenkins

Jenkins является одним из самых популярных инструментов для организации CI/CD, позволяя автоматически запускать тесты при каждом изменении кода. В контексте Vue.js и Vue Test Utils это позволяет гарантировать корректность компонентов на каждом этапе разработки.

Установка и подготовка окружения

Для успешного запуска тестов необходимо обеспечить наличие следующих компонентов:

  1. Node.js и npm/yarn — базовое окружение для сборки проекта.
  2. Vue CLI — для проектов, созданных с использованием Vue CLI.
  3. Jest или Mocha — фреймворки для тестирования, совместимые с Vue Test Utils.
  4. Jenkins agent с доступом к файловой системе проекта и правами на установку зависимостей.

После установки Node.js и менеджера пакетов следует выполнить команду для установки зависимостей проекта:

npm install
# или
yarn install

Для тестирования Vue компонентов через Jest необходимо убедиться, что в проекте присутствует конфигурационный файл jest.config.js и корректно настроены трансформеры для Vue:

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testEnvironment: 'jsdom'
};

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

Создание Jenkins Job предполагает следующие шаги:

  1. Выбор типа проекта: Freestyle или Pipeline.

  2. Настройка репозитория: указание Git URL и учетных данных.

  3. Определение шагов сборки:

    • Установка зависимостей: npm ci или yarn install.
    • Запуск тестов: npm run test:unit или yarn test:unit.
    • Сбор отчетов о покрытии и результатах тестов.

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

pipeline {
    agent any
    stages {
        stage('Checkout') {
            steps {
                git branch: 'main', url: 'https://github.com/username/vue-project.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                sh 'npm ci'
            }
        }
        stage('Run Unit Tests') {
            steps {
                sh 'npm run test:unit -- --coverage'
            }
            post {
                always {
                    junit 'tests/unit/**/*.xml'
                    cobertura coberturaReportFile: 'coverage/cobertura-coverage.xml'
                }
            }
        }
    }
}

Ключевые моменты:

  • Параметр --coverage генерирует информацию о покрытии кода.
  • Плагины Jenkins JUnit и Cobertura позволяют визуализировать результаты тестов и метрики покрытия.
  • Использование post { always { … } } гарантирует сохранение отчетов даже при падении тестов.

Настройка Vue Test Utils в CI

Vue Test Utils предоставляет API для unit-тестирования компонентов Vue, включая методы mount и shallowMount. В Jenkins важно убедиться, что тестовая среда поддерживает DOM через jsdom, иначе компоненты с рендерингом HTML будут падать. Пример базового теста:

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

describe('MyComponent', () => {
  it('renders title correctly', () => {
    const wrapper = mount(MyComponent, {
      props: { title: 'Hello Jenkins' }
    });
    expect(wrapper.text()).toContain('Hello Jenkins');
  });
});

При запуске через Jenkins тесты выполняются идентично локально, что обеспечивает стабильность CI-пайплайна.

Генерация и публикация отчетов

Для удобного анализа результатов тестирования необходимо настроить генерацию отчетов:

  1. JUnit: Jest может экспортировать результаты в формате JUnit XML, который читается Jenkins:
"jest": {
  "reporters": [
    "default",
    ["jest-junit", { "outputDirectory": "tests/unit", "outputName": "results.xml" }]
  ]
}
  1. Cobertura: для анализа покрытия кода:
"jest": {
  "collectCoverage": true,
  "coverageReporters": ["cobertura", "html"]
}
  1. В Jenkins добавить публикацию артефактов: тестовые отчеты и HTML с покрытием.

Управление зависимостями и кеширование

Для ускорения сборок рекомендуется использовать кеширование node_modules или кэша пакетного менеджера:

stage('Cache Dependencies') {
    steps {
        cache(path: './node_modules', key: 'node-modules-cache') {
            sh 'npm ci'
        }
    }
}

Это особенно важно для больших Vue-проектов с множеством компонентов и модулей.

Автоматический запуск на pull request

Jenkins можно настроить на триггеры, чтобы тесты выполнялись автоматически при создании pull request:

  • Через webhook GitHub или GitLab.
  • В Pipeline использовать условие:
when {
    branch 'feature/*'
}

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

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

Ошибки в Jenkins могут отличаться от локальных из-за отсутствия GUI или отличий окружения. Рекомендации:

  • Проверять переменные окружения (NODE_ENV=test).
  • Использовать опцию --runInBand для последовательного выполнения тестов в Jest.
  • Генерировать детализированные лог-файлы с помощью --verbose.

Эта структура обеспечивает стабильный, полностью автоматизированный процесс тестирования Vue-компонентов через Vue Test Utils в Jenkins, включая сборку, запуск тестов, генерацию отчетов и кеширование зависимостей.

Оглавление