Конфигурация плагинов

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


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

Плагины в Karma можно разделить на несколько категорий:

  1. Фреймворки тестирования (framework plugins) Отвечают за интеграцию конкретного тестового фреймворка, например Jasmine, Mocha или QUnit. Эти плагины подключаются через ключ frameworks в конфигурационном файле karma.conf.js.

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

    module.exports = function(config) {
      config.set({
        frameworks: ['jasmine'],
        plugins: [
          'karma-jasmine',
          'karma-chrome-launcher'
        ]
      });
    };
  2. Лаунчеры браузеров (launcher plugins) Обеспечивают запуск тестов в выбранных браузерах. Каждый браузер требует отдельного плагина. Например, karma-chrome-launcher для Chrome, karma-firefox-launcher для Firefox.

    Особенности:

    • Можно указывать несколько браузеров одновременно.
    • Поддерживаются headless-режимы для CI/CD.

    Пример запуска в Chrome и Firefox:

    browsers: ['ChromeHeadless', 'FirefoxHeadless']
  3. Плагины отчетности (reporter plugins) Управляют форматом вывода результатов тестирования. Karma поддерживает встроенные и сторонние репортеры: dots, progress, junit, coverage.

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

    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    }
  4. Препроцессоры (preprocessor plugins) Позволяют обрабатывать файлы перед запуском тестов. Часто используются для транспиляции TypeScript, обработки ES6 через Babel или генерации coverage.

    Пример транспиляции ES6 через Babel:

    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.spec.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['@babel/preset-env']
      }
    }

Установка и подключение плагинов

Плагины устанавливаются через npm:

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

После установки Karma автоматически ищет плагины в node_modules. Явное указание в массиве plugins необходимо, если требуется ограничить используемые плагины или задать порядок загрузки.

plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-coverage')
]

Если массив plugins не указан, Karma попытается загрузить все установленные плагины автоматически.


Настройка опций плагинов

Каждый плагин имеет собственный набор конфигурационных опций:

  • Browers Launcher Можно передавать аргументы браузеру:

    customLaunchers: {
      ChromeHeadlessCustom: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox', '--disable-gpu']
      }
    },
    browsers: ['ChromeHeadlessCustom']
  • Reporters Опции репортера задаются через отдельные секции, например coverageReporter для покрытия кода:

    coverageReporter: {
      type: 'lcov',
      dir: 'coverage/',
      subdir: '.',
      includeAllSources: true
    }
  • Preprocessors Настройки препроцессоров определяются в preprocessors и могут включать параметры транспиляции или маппинга исходных карт:

    preprocessors: {
      'src/**/*.ts': ['typescript'],
      'test/**/*.ts': ['typescript']
    },
    typescriptPreprocessor: {
      options: {
        target: 'ES6',
        sourceMap: true
      }
    }

Расширение через собственные плагины

Karma позволяет создавать собственные плагины для интеграции уникальных инструментов:

  • Плагины реализуются как Node-модули, экспортирующие функцию с регистрацией через karma API.
  • Можно создавать новые репортеры, препроцессоры или launcher’ы.
  • Используются ключевые объекты: baseReporterDecorator, preprocessor, launcher для расширения стандартного поведения.

Пример кастомного репортера:

const MyReporter = function(baseReporterDecorator, config, logger, helper) {
  baseReporterDecorator(this);
  this.onRunCompl ete = function() {
    console.log('Все тесты завершены');
  };
};

MyReporter.$inject = ['baseReporterDecorator', 'config', 'logger', 'helper'];

module.exports = {
  'reporter:myReporter': ['type', MyReporter]
};

Для подключения:

reporters: ['myReporter']

Управление порядком загрузки плагинов

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

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


Советы по стабильной конфигурации

  • Указывать только необходимые плагины.
  • Использовать headless-браузеры для CI.
  • Настраивать препроцессоры до репортеров, чтобы получать корректное покрытие кода.
  • Проверять совместимость версий плагинов с версией Karma и браузерами.
  • Документировать кастомные плагины, чтобы облегчить поддержку командных проектов.

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