Расширенные настройки препроцессоров

Karma является мощным тестовым раннером для JavaScript, который позволяет интегрировать различные препроцессоры для обработки файлов перед выполнением тестов. Препроцессоры в Karma выполняют трансформацию исходного кода, позволяя использовать современные стандарты языка, шаблоны или модульные системы, которые напрямую не поддерживаются браузером. Настройка препроцессоров критически важна для корректной работы проекта, особенно при использовании TypeScript, Babel, или модульных CSS/HTML.

Основы конфигурации препроцессоров

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

module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.spec.js': ['babel']
    }
  });
};

В этом примере файлы исходного кода и тестов обрабатываются через babel, что позволяет использовать современные возможности JavaScript, включая ES6+ синтаксис.

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

  • Маски файлов могут содержать шаблоны ** для вложенных папок.
  • Один файл может проходить через несколько препроцессоров, например: ['babel', 'coverage'].

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

Использование Babel в Karma позволяет трансформировать современные JS-фичи в код, совместимый с тестируемыми браузерами. Для этого необходимо установить плагины:

npm install --save-dev karma-babel-preprocessor @babel/core @babel/preset-env

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

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

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

  • sourceMap: 'inline' позволяет видеть оригинальные строки кода в отчётах об ошибках тестов.
  • Настройка препроцессора должна соответствовать версии ECMAScript, используемой в проекте.

Использование TypeScript

TypeScript требует отдельного препроцессора karma-typescript или интеграции через karma-webpack с загрузчиком ts-loader. Пример с karma-typescript:

npm install --save-dev karma-typescript typescript

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

preprocessors: {
  'src/**/*.ts': ['karma-typescript'],
  'test/**/*.ts': ['karma-typescript']
},
karmaTypescriptConfig: {
  tsconfig: './tsconfig.json',
  bundlerOptions: {
    sourceMap: true
  }
}

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

  • Автоматическая генерация sourcemap упрощает отладку.
  • Встроенная поддержка покрытий кода через karma-coverage-istanbul-reporter.

Препроцессоры для CSS и HTML

Karma позволяет обрабатывать не только JS/TS, но и CSS/HTML, если тесты используют шаблоны или стили. Пример с karma-html2js-preprocessor:

preprocessors: {
  'src/templates/**/*.html': ['html2js'],
  'src/styles/**/*.css': ['css']
}

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

  • html2js преобразует HTML-шаблоны в JavaScript-модули, доступные в тестах.
  • Для CSS можно использовать karma-css-preprocessor или интеграцию через Webpack для поддержки препроцессоров SASS/LESS.

Последовательность препроцессоров

Порядок препроцессоров важен, так как один может зависеть от результата предыдущего. Пример:

preprocessors: {
  'src/**/*.ts': ['typescript', 'coverage']
}

В этом случае сначала выполняется компиляция TypeScript в JavaScript, затем генерация покрытия кода. Нарушение порядка может привести к некорректным результатам тестирования или пустым coverage-отчётам.

Настройка через Webpack

Многие проекты используют Webpack как средство объединения и трансформации модулей. Karma позволяет подключать Webpack через karma-webpack:

preprocessors: {
  'src/**/*.js': ['webpack', 'sourcemap']
},
webpack: {
  mode: 'development',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  devtool: 'inline-source-map'
}

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

  • sourcemap препроцессор позволяет сохранять соответствие между оригинальными файлами и результирующим кодом.
  • Можно комбинировать несколько загрузчиков для разных типов файлов.

Советы по оптимизации препроцессоров

  1. Минимизировать количество препроцессоров на большой проект, чтобы ускорить запуск тестов.
  2. Использовать кеширование (babel-loader cacheDirectory, ts-loader transpileOnly) для уменьшения времени трансформации.
  3. Следить за совместимостью версий Karma и препроцессоров, так как устаревшие версии могут ломать sourcemap и покрытие кода.
  4. Использовать маски файлов с осторожностью, чтобы случайно не включить лишние директории, например node_modules.

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

Оглавление