Оптимальная конфигурация

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

Ключевые поля конфигурации:

  • frameworks — массив тестовых фреймворков, например ['jasmine'] или ['mocha']. Этот параметр определяет, каким образом будут структурироваться тесты и какие функции будут доступны.
  • files — список файлов и шаблонов, которые необходимо загрузить в браузер. Порядок важен: сначала библиотеки, затем исходный код, потом тесты.
  • exclude — список файлов, которые следует игнорировать. Полезно для исключения временных или экспериментальных скриптов.
  • preprocessors — настройка обработки файлов перед выполнением тестов. Например, для использования TypeScript указывается {'src/**/*.ts': ['typescript']}, а для покрытия кода — {'src/**/*.js': ['coverage']}.
  • reporters — определяет, каким образом результаты тестов будут отображаться. Распространенные варианты: ['progress'], ['dots'], ['coverage'].
  • port и hostname — настройки порта и адреса веб-сервера Karma. Стандартный порт — 9876.

Выбор браузеров

Браузеры подключаются через browsers, где можно указать как обычные браузеры (Chrome, Firefox), так и их headless-версии (ChromeHeadless, FirefoxHeadless). Для CI/CD рекомендуется использовать headless-браузеры, так как они не требуют графического интерфейса и быстрее стартуют.

Пример конфигурации для нескольких браузеров:

browsers: ['ChromeHeadless', 'FirefoxHeadless'],
singleRun: true, 
autoWatch: false
  • singleRun — если true, Karma запускает тесты один раз и завершает работу, что удобно для интеграции в CI.
  • autoWatch — если true, Karma отслеживает изменения файлов и автоматически перезапускает тесты.

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

Интеграция с инструментами покрытия (coverage) позволяет анализировать, какие части кода не покрыты тестами. Обычно используется пакет karma-coverage. Конфигурация выглядит так:

reporters: ['progress', 'coverage'],
coverageReporter: {
    type: 'html',
    dir: 'coverage/',
    subdir: '.'
}
  • type — формат отчета (html, lcov, text-summary).
  • dir — директория, куда сохраняются отчеты.
  • subdir — позволяет создавать подкаталоги для каждого браузера или тестового запуска.

Преобразование и сборка исходного кода

Для современных проектов часто используется транспиляция с помощью Babel, TypeScript или Webpack. Karma поддерживает эти процессы через preprocessors.

Пример интеграции с Babel:

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

Если проект использует модульную сборку через Webpack, Karma может подключать karma-webpack для трансформации всех модулей перед выполнением тестов.

Оптимизация запуска тестов

Для крупных проектов важно минимизировать время выполнения тестов. Рекомендуется:

  • Использовать headless-браузеры в CI.
  • Сегментировать тесты по файлам и директориям, чтобы загружать только нужные модули.
  • Кэшировать трансформации через Babel или Webpack.
  • Настроить concurrency для параллельного запуска тестов в нескольких браузерах:
concurrency: Infinity
  • Использовать restartOnFileChange: true для ускоренного перезапуска при локальной разработке.

Подключение плагинов

Karma имеет обширную экосистему плагинов, которые подключаются через поле plugins. Основные категории:

  • framework plugins — karma-jasmine, karma-mocha.
  • browser launchers — karma-chrome-launcher, karma-firefox-launcher.
  • reporters — karma-coverage, karma-spec-reporter.
  • preprocessors — karma-webpack, karma-babel-preprocessor.

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

Конфигурация для CI/CD

Для интеграции с CI/CD системами важно включать:

  • Headless-браузеры.
  • singleRun: true.
  • Генерацию отчетов о покрытии кода.
  • Логи минимального уровня (logLevel: config.LOG_WARN), чтобы не засорять вывод.

Пример полной оптимизированной конфигурации:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    exclude: [],
    preprocessors: {
      'src/**/*.js': ['babel', 'coverage']
    },
    babelPreprocessor: {
      options: {
        presets: ['@babel/preset-env'],
        sourceMap: 'inline'
      }
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/',
      subdir: '.'
    },
    browsers: ['ChromeHeadless', 'FirefoxHeadless'],
    singleRun: true,
    autoWatch: false,
    concurrency: Infinity,
    logLevel: config.LOG_WARN,
    plugins: [
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-coverage',
      'karma-babel-preprocessor'
    ]
  });
};

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

Оглавление