Установка плагинов

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

Типы плагинов

  1. Фреймворк-плагины Эти плагины позволяют Karma работать с различными фреймворками тестирования, такими как Jasmine, Mocha или QUnit. Примеры:

    • karma-jasmine
    • karma-mocha
    • karma-qunit

  2. Плагины браузеров (launchers) Они предоставляют возможность запускать тесты в разных браузерах, как локально, так и удаленно. Примеры:

    • karma-chrome-launcher
    • karma-firefox-launcher
    • karma-edge-launcher

  3. Репортеры (reporters) Репортеры отвечают за формат вывода результатов тестирования. Karma поддерживает текстовые, графические и структурированные отчеты. Примеры:

    • karma-spec-reporter
    • karma-coverage (покрытие кода)
    • karma-junit-reporter

  4. Прочие плагины В эту категорию входят плагины для препроцессоров, трансформации файлов, интеграции с CI/CD и т. д. Примеры:

    • karma-webpack — для обработки модулей через Webpack
    • karma-typescript — поддержка TypeScript
    • karma-sourcemap-loader — загрузка sourcemaps для удобного дебага

Установка плагинов через npm

Все плагины устанавливаются как npm-пакеты. Рекомендуется сохранять их в devDependencies проекта:

npm install --save-dev karma-jasmine karma-chrome-launcher karma-coverage

После установки пакеты становятся доступными Karma, и их необходимо подключить в конфигурации.

Подключение плагинов в karma.conf.js

Файл конфигурации Karma позволяет явно указывать, какие плагины использовать. Если поле plugins не задано, Karma автоматически пытается загрузить все установленные плагины, начинающиеся с karma-.

Пример явного подключения:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    browsers: ['ChromeHeadless'],
    reporters: ['progress', 'coverage'],
    plugins: [
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-coverage'
    ],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    }
  });
};

Важный момент: плагины должны соответствовать используемым настройкам. Если указать reporters: ['coverage'], но не установить karma-coverage, Karma выдаст ошибку о ненайденном плагине.

Особенности установки браузерных плагинов

Для локальной разработки чаще всего используют Chrome или Firefox. Для запуска тестов в headless-режиме следует применять специальные версии браузерных плагинов:

npm install --save-dev karma-chrome-launcher

В конфигурации:

browsers: ['ChromeHeadless'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox', '--disable-gpu']
  }
}

Флаг --no-sandbox необходим в окружениях CI/CD, где отсутствуют стандартные разрешения пользователя.

Установка фреймворков и репортеров вместе

Оптимальная практика — сразу устанавливать связку «фреймворк + браузерный запускатель + репортер». Например, для Jasmine и покрытия кода:

npm install --save-dev karma jasmine-core karma-jasmine karma-chrome-launcher karma-coverage

Конфигурация:

frameworks: ['jasmine'],
reporters: ['progress', 'coverage'],
browsers: ['ChromeHeadless']

Это гарантирует совместимость всех компонентов и упрощает поддержку проекта.

Автоматическая загрузка плагинов

Если список plugins не указан, Karma автоматически ищет все пакеты npm, начинающиеся с karma-. Например:

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],
    browsers: ['Firefox'],
    reporters: ['dots']
    // plugins не указываем, Karma загрузит все karma-* автоматически
  });
};

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

Совместимость версий

При установке плагинов важно учитывать версии Karma и самих плагинов. Старые версии браузерных launcher’ов или репортеров могут не работать с актуальными версиями Karma. Рекомендуется проверять зависимости на npm и использовать одинаковые мажорные версии.

Примеры полезных комбинаций плагинов

  1. Jasmine + ChromeHeadless + Coverage

    npm install --save-dev karma karma-jasmine jasmine-core karma-chrome-launcher karma-coverage

  2. Mocha + Firefox + Spec Reporter

    npm install --save-dev karma karma-mocha mocha karma-firefox-launcher karma-spec-reporter

  3. Angular + Webpack + Coverage

    npm install --save-dev karma karma-jasmine jasmine-core karma-chrome-launcher karma-webpack karma-coverage

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

Установка плагинов в Karma — фундаментальный шаг для построения стабильного и расширяемого окружения тестирования. Корректная установка и подключение обеспечивают совместимость фреймворка, браузеров и отчетности, а также позволяют интегрировать Karma в процессы CI/CD без дополнительных сложностей.

Оглавление