Конфигурация coverage отчетов

В тестировании приложений на Vue.js контроль покрытия кода является важной частью процесса обеспечения качества. Coverage отчёты позволяют выявлять участки кода, которые остаются неохваченными тестами, и помогают принимать решения о необходимости дополнительного тестирования.

Настройка инструментов для сбора покрытия

Для проектов на Vue с использованием Vue Test Utils чаще всего применяются Jest или Vitest в сочетании с babel или Vite, а также инструмент istanbul для анализа покрытия кода.

Основные зависимости для coverage:

npm install --save-dev jest @vue/test-utils babel-jest vue-jest istanbul

Для проектов на Vite используют vitest:

npm install --save-dev vitest @vue/test-utils c8

Конфигурация Jest для coverage

Jest предоставляет встроенную поддержку покрытия кода. Основные параметры настраиваются в jest.config.js:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true, // Включение сбора покрытия
  collectCoverageFrom: [
    'src/**/*.vue',
    'src/**/*.js',
    '!src/main.js', // Исключение точек входа
  ],
  coverageReporters: ['html', 'text-summary', 'lcov'], // Форматы отчётов
  coverageDirectory: 'coverage', // Папка для отчётов
};

  • collectCoverage: включает сбор информации о покрытии.

  • collectCoverageFrom: задаёт маску файлов для анализа.

  • coverageReporters: определяет форматы отчётов.

    • html — подробный отчёт в браузере.
    • text-summary — краткий текстовый отчёт в консоли.
    • lcov — стандартный формат для CI-систем.

  • coverageDirectory: путь для хранения отчётов.

Конфигурация Vitest и C8

Для проектов на Vite предпочтительнее Vitest с c8:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    coverage: {
      provider: 'c8', // Используется c8 для сбора покрытия
      reporter: ['text', 'html', 'lcov'],
      all: true, // Анализировать все файлы, даже без тестов
      include: ['src/**/*.{js,vue}'],
      exclude: ['src/main.js'],
      reportsDirectory: 'coverage',
    },
  },
});
  • provider: 'c8' — позволяет использовать встроенный инструмент для генерации coverage.
  • all: true — анализируются все указанные файлы, даже если они не импортируются в тестах.
  • include и exclude — точно настраивают, какие файлы включать в анализ и какие игнорировать.
  • reportsDirectory — папка для отчётов.

Интеграция с Vue компонентами

Vue Test Utils создаёт обёртки (wrapper) компонентов, что позволяет проверять как поведение, так и покрытие кода внутри методов компонентов. Для корректного анализа покрытия важно убедиться, что тесты вызывают все ветви логики.

Пример теста с проверкой метода и условного рендеринга:

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

test('увеличение счётчика', async () => {
  const wrapper = mount(Counter);
  expect(wrapper.text()).toContain('0');
  await wrapper.find('button').trigger('click');
  expect(wrapper.text()).toContain('1');
});

При сборе coverage анализируются:

  • Методы компонента (methods)
  • Вычисляемые свойства (computed)
  • Ветвления внутри шаблонов (v-if, v-for)
  • Жизненные циклы (mounted, created)

Отчёты coverage

После запуска тестов с включённым coverage (jest --coverage или vitest run --coverage) создаются отчёты, обычно в формате:

  • HTML: визуальный отчёт с подсветкой строк и процентами покрытия.
  • LCOV: используется для CI/CD интеграций (например, GitHub Actions, GitLab CI).
  • Text-summary: вывод в консоль с общим процентом покрытия.

HTML отчёт показывает:

  • Процент покрытия функций, строк, веток.
  • Конкретные строки, не охваченные тестами.
  • Детали по каждому компоненту и файлу.

Тонкости конфигурации

  1. Игнорирование сторонних библиотек: Включение node_modules в coverage бессмысленно и замедляет сбор отчёта.
  2. Комбинирование JS и Vue файлов: Для Vue важно включать как .vue, так и .js файлы в collectCoverageFrom или include.
  3. Проверка ветвлений: Для полной аналитики стоит добавлять тесты на все условия (v-if, тернарные операторы, циклы).
  4. CI/CD: Настройка coverageThreshold позволяет автоматически падать сборке, если покрытие ниже требуемого значения:
coverageThreshold: {
  global: {
    branches: 80,
    functions: 85,
    lines: 90,
    statements: 90,
  },
},

Полезные практики

  • Регулярный запуск coverage локально и в CI.
  • Включение отчёта в gitignore для HTML и lcov, чтобы не засорять репозиторий.
  • Отдельное покрытие для утилитарных функций и Vue компонентов.
  • Использование all: true в Vitest при тестировании всех компонентов, даже без прямого вызова.

Понимание структуры coverage и корректная конфигурация позволяют не только отслеживать текущий статус тестирования, но и поддерживать проект в долгосрочной перспективе с минимальными «слепыми зонами» кода.

Оглавление