Инструменты для измерения покрытия

Покрытие кода (code coverage) — один из ключевых индикаторов качества тестирования. Оно показывает, какая часть кода приложения действительно выполняется при запуске тестов. В экосистеме Vue.js для измерения покрытия широко используются такие инструменты, как Jest, Cypress, Karma в сочетании с Vue Test Utils.

Настройка покрытия с Jest

Jest изначально поддерживает сбор данных о покрытии кода. Для интеграции с Vue Test Utils достаточно настроить конфигурацию:

// jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js'
  ],
  coverageReporters: ['html', 'text-summary', 'lcov']
};

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

  • collectCoverage: true активирует сбор данных о покрытии.
  • collectCoverageFrom определяет файлы, которые необходимо анализировать.
  • coverageReporters позволяет выбирать формат отчётов: интерактивный HTML, текстовый свод, lcov для интеграции с CI/CD.

При запуске команды jest --coverage создаётся папка coverage, где можно видеть детальную информацию о строках, функциях и ветвлениях, покрытых тестами.

Покрытие компонентов Vue

Vue Test Utils предоставляет методы, позволяющие изолированно тестировать компоненты и наблюдать за их поведением. Покрытие кода достигается за счёт:

  1. Монтирования компонентов с помощью mount или shallowMount:
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('отображение заголовка', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain('Заголовок');
});
  1. Симуляции пользовательских действий:
wrapper.find('button').trigger('click');
expect(wrapper.emitted()).toHaveProperty('clicked');
  1. Проверки реактивных данных и computed-свойств:
wrapper.setData({ count: 5 });
expect(wrapper.vm.doubleCount).toBe(10);

Каждый из этих тестов генерирует покрытие соответствующих функций, ветвлений и выражений внутри компонента.

Интеграция с Babel и Webpack

Для корректного измерения покрытия кода Vue необходимо использовать babel-plugin-istanbul:

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env'],
  env: {
    test: {
      plugins: ['istanbul']
    }
  }
};

Это обеспечивает трассировку выполнения кода, включая v-if, v-for и другие директивы Vue, что позволяет инструментам покрытие учитывать даже шаблонные конструкции.

Альтернативные инструменты

  • Cypress с @cypress/code-coverage позволяет измерять покрытие при E2E-тестировании. Устанавливается плагин, который собирает данные о покрытиях через nyc и istanbul.
  • Karma + vue-cli-plugin-unit-jest пригодны для старых проектов, где требуется запуск тестов в реальном браузере. В этом случае karma-coverage генерирует отчёты в формате HTML или lcov.

Виды покрытия

  1. Statement coverage (покрытие выражений) — проверяет, какие строки кода выполняются.
  2. Function coverage (покрытие функций) — отслеживает, какие функции были вызваны.
  3. Branch coverage (покрытие ветвлений) — оценивает все условия if/else, тернарные операторы и switch.
  4. Line coverage (покрытие строк) — конкретная строка кода помечается как покрытая, если хотя бы одно её выражение выполнено.

Комбинация этих показателей позволяет оценить полноту тестирования Vue-компонентов, включая методы, события, реактивные свойства и рендеринг шаблонов.

Советы по улучшению покрытия

  • Писать мелкие и изолированные тесты для каждого компонента и метода.
  • Использовать shallowMount для снижения зависимости от дочерних компонентов, что позволяет сосредоточиться на покрытии родного кода.
  • Тестировать все варианты условий в computed, watch и методах жизненного цикла (mounted, created).
  • Объединять юнит-тесты с E2E-тестами, чтобы покрыть реальное взаимодействие компонентов.

Отчёты покрытия и CI/CD

Генерация отчётов покрытий должна быть интегрирована в процесс CI/CD:

  • HTML-отчёты дают визуальное представление покрытия по каждому файлу.
  • Text-summary позволяет быстро оценить процент покрытия на этапе сборки.
  • lcov используется для сервисов вроде Codecov или Coveralls для автоматической визуализации и мониторинга.

Использование этих инструментов обеспечивает прозрачность тестового покрытия и позволяет поддерживать качество кода на высоком уровне в проектах Vue.js.

Покрытие кода — это не цель само по себе, но мощный индикатор, который вместе с Vue Test Utils помогает выявлять недоохваченные участки и гарантирует стабильность приложений.

Оглавление