preprocessors

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

Назначение preprocessors

Preprocessors выполняют следующие функции:

  • Транспиляция современных стандартов JavaScript. Например, с использованием Babel можно писать код на ES6/ESNext и преобразовывать его в ES5 для совместимости с устаревшими браузерами.
  • Обработка TypeScript и других языков на базе JavaScript. TypeScript-файлы (.ts) необходимо компилировать в JavaScript перед выполнением тестов.
  • Преобразование шаблонов и стилей. Иногда требуется включать HTML-шаблоны или CSS в тестируемые модули через специальные preprocessors, например ng-html2js для AngularJS.
  • Инструменты покрытия кода (code coverage). Интеграция с karma-coverage требует предварительного инструментирования кода через preprocessor, чтобы отслеживать выполнение каждой строки и функции.

Настройка preprocessors

В конфигурационном файле karma.conf.js preprocessors задаются объектом, где ключами являются пути к файлам, а значениями — массивы плагинов:

module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'src/**/*.js': ['babel', 'coverage'],
      'test/**/*.spec.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['@babel/preset-env'],
        sourceMap: 'inline'
      }
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    }
  });
};

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

  • 'src/**/*.js': ['babel', 'coverage'] — сначала код проходит через Babel, затем инструментируется для покрытия кода.
  • babelPreprocessor.options.sourceMap: 'inline' — позволяет отображать исходные файлы при дебаге и в отчётах покрытия.
  • coverageReporter.type: 'html' — генерирует отчёт в читаемом формате с интерактивной визуализацией покрытия.

Популярные preprocessors

  1. karma-babel-preprocessor Обеспечивает транспиляцию ES6+ кода в ES5. Позволяет использовать современные синтаксические конструкции в тестах и исходном коде.
  2. karma-webpack Используется для интеграции с Webpack, что позволяет применять все загруженные loaders (например, ts-loader или sass-loader) при подготовке файлов к тестированию.
  3. karma-typescript Полностью интегрированное решение для TypeScript, включающее компиляцию, инструментирование кода для покрытия и поддержку source maps.
  4. karma-ng-html2js-preprocessor Преобразует HTML-шаблоны AngularJS в JS-модули, которые можно использовать в тестах через dependency injection.
  5. karma-sourcemap-loader Позволяет сохранять связи с исходными файлами при работе с source maps, что улучшает читаемость отчётов об ошибках и покрытия кода.

Особенности порядка выполнения

Preprocessors в Karma применяются в том порядке, в котором они указаны в массиве для каждого файла. Это особенно важно при комбинации Babel и инструментирования покрытия:

  • Сначала следует транспиляция (например, Babel или TypeScript).
  • После неё — инструментирование для покрытия кода (например, karma-coverage).

Нарушение этого порядка приводит к некорректным отчётам покрытия или синтаксическим ошибкам в браузере.

Отладка и производительность

Использование preprocessors может замедлять запуск тестов, особенно при больших проектах. Рекомендации для оптимизации:

  • Ограничивать области применения preprocessors, не обрабатывая сторонние библиотеки в node_modules.
  • Использовать source maps только в режиме разработки, отключая их в CI для ускорения сборки.
  • Применять Webpack или Babel только к тем файлам, которые требуют трансформации, избегая лишней работы.

Интеграция с другими инструментами

Preprocessors тесно связаны с системами сборки и тестирования:

  • Webpack — позволяет использовать те же loaders, что и в основном приложении, обеспечивая идентичность среды тестирования.
  • Babel — совместим с множеством плагинов, включая transform-runtime, class-properties и async-await.
  • TypeScript — интеграция через karma-typescript упрощает настройку source maps и покрытие кода без необходимости отдельной сборки через tsc.

Preprocessors в Karma выступают связующим звеном между современным кодом, тестовой средой и инструментами анализа, позволяя поддерживать высокое качество кода и точные отчёты тестирования. Их грамотная настройка критически важна для стабильной работы тестов и эффективности процесса CI/CD.

Оглавление