Karma-coverage

Karma — это тестовый раннер для JavaScript, разработанный для запуска тестов в реальных браузерах и интеграции с современными фреймворками и сборщиками модулей. Одной из ключевых возможностей Karma является генерация отчетов о покрытии кода, что позволяет оценивать качество тестирования и выявлять непроверенные участки.

Установка и интеграция с инструментами покрытия

Для работы с покрытием необходимо установить следующие пакеты:

npm install --save-dev karma karma-coverage
  • karma — основной раннер для тестов.
  • karma-coverage — плагин для генерации отчётов о покрытии кода.

Если используется сборщик модулей, например Webpack, необходимо также подключить загрузчики для инструментов покрытия:

npm install --save-dev karma-webpack babel-loader babel-plugin-istanbul

babel-plugin-istanbul интегрируется с Babel и позволяет автоматически инструментировать исходный код для анализа покрытия.

Конфигурация Karma для покрытия

Файл конфигурации karma.conf.js управляет запуском тестов и генерацией отчетов. Основные настройки для покрытия:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'], // или 'mocha', 'qunit'
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'src/**/*.js': ['coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        { type: 'html', subdir: 'html' },
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};

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

  • preprocessors — указывает, какие файлы необходимо инструментировать для анализа покрытия.
  • reporters — перечисляет виды отчетов. Плагин coverage позволяет генерировать HTML, LCOV и текстовые отчеты.
  • browsers — для CI/CD рекомендуется использовать безголовые браузеры (ChromeHeadless или FirefoxHeadless).

Виды отчетов о покрытии

  1. HTML — удобный визуальный отчет, где код подсвечивается в зависимости от покрытия.
  2. LCOV — формат, совместимый с CI-системами и сервисами вроде Coveralls.
  3. Text-summary — краткий отчет в консоли, показывающий процент покрытия по строкам, функциям, ветвлениям.

Пример текста текстового отчета:

Statements   : 85% ( 34/40 )
Branches     : 80% ( 16/20 )
Functions    : 90% ( 9/10 )
Lines        : 87% ( 33/38 )

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

Для проектов с современным JavaScript необходимо инструментировать код через Babel. В .babelrc добавляется плагин:

{
  "presets": ["@babel/preset-env"],
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}
  • Плагин istanbul автоматически добавляет счетчики в код для анализа покрытия.
  • Среда test позволяет инструментировать код только при запуске тестов, не влияя на сборку для продакшена.

Фильтрация и исключение файлов

Иногда необходимо исключить из анализа тестовые файлы или сторонние библиотеки. В karma.conf.js можно настроить preprocessors и coverageReporter следующим образом:

preprocessors: {
  'src/**/*.js': ['coverage'],
  'src/vendor/**/*.js': []
},
coverageReporter: {
  dir: 'coverage/',
  includeAllSources: true
}
  • includeAllSources: true гарантирует, что отчет будет включать все исходные файлы, даже если они не покрыты тестами.

Практики повышения покрытия

  • Модульное тестирование функций — разбивать сложные функции на мелкие части, которые легче покрыть тестами.
  • Использование mock и stub объектов — позволяет тестировать код изолированно, избегая зависимости от внешних модулей.
  • Проверка всех ветвлений — важно создавать тесты для всех условий if, switch и логических операторов.
  • Регулярный анализ отчета — запускать karma --single-run и проверять coverage/html/index.html для выявления непокрытых участков.

Интеграция с CI/CD

Karma с покрытием легко интегрируется в CI-системы:

  • В GitHub Actions можно добавить шаг:
- name: Run tests with coverage
  run: npx karma start karma.conf.js
  • Генерация LCOV позволяет автоматически загружать результаты в Coveralls или Codecov:
- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v3
  with:
    files: coverage/lcov.info

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

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

Для строгого контроля качества можно задать минимальные пороги в конфигурации karma-coverage:

coverageReporter: {
  check: {
    global: {
      statements: 80,
      branches: 75,
      functions: 85,
      lines: 80
    },
    each: {
      statements: 70,
      branches: 65,
      functions: 70,
      lines: 70
    }
  }
}
  • global — порог для всего проекта.
  • each — порог для каждого отдельного файла.
  • Если порог не достигается, Karma завершает тесты с ошибкой, что полезно для CI.

Выводы по использованию Karma-coverage

Karma в сочетании с karma-coverage и Babel позволяет:

  • Автоматически измерять покрытие кода в браузерах.
  • Формировать наглядные отчеты для анализа качества тестов.
  • Встраивать контроль покрытия в процессы CI/CD.
  • Повышать надежность приложений и предотвращать снижение качества при расширении кода.

Постоянная практика анализа покрытия кода и настройка строгих порогов создаёт дисциплину тестирования и улучшает стабильность проекта.

Оглавление