Webpack config в karma.conf.js

Интеграция Webpack с Karma позволяет использовать современные возможности сборки модулей при тестировании JavaScript-кода. Это особенно актуально при работе с ES6+, TypeScript, React или другими фреймворками, где требуется транспиляция и объединение модулей перед запуском тестов. Конфигурация Webpack в Karma обеспечивает единообразную среду сборки и тестирования.

Основные принципы интеграции

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

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

  • Loaders: позволяют транспилировать код (например, babel-loader для ES6 или ts-loader для TypeScript).
  • Plugins: обеспечивают поддержку специфических возможностей, таких как оптимизация тестового окружения или определение переменных.
  • Source Maps: критичны для корректного отображения ошибок в исходных файлах, а не в собранном бандле.

Установка зависимостей

Для работы с Webpack в Karma требуется набор пакетов:

npm install --save-dev karma-webpack webpack webpack-cli babel-loader @babel/core @babel/preset-env

Для TypeScript:

npm install --save-dev ts-loader typescript

Для React:

npm install --save-dev @babel/preset-react

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

Пример конфигурации karma.conf.js

const path = require('path');

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.spec.js'
    ],
    preprocessors: {
      'src/**/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: {
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
      },
      resolve: {
        extensions: ['.js', '.json']
      },
      devtool: 'inline-source-map'
    },
    webpackMiddleware: {
      stats: 'errors-only'
    },
    reporters: ['progress'],
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};
Разбор конфигурации

  • frameworks: указывает тестовый фреймворк (Jasmine, Mocha, QUnit и др.).

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

  • preprocessors: связывает тестовые файлы с Webpack. Обязателен sourcemap для корректного отображения исходного кода при ошибках.

  • webpack: конфигурация сборки, аналогичная обычному webpack.config.js.

    • mode: 'development' — ускоряет сборку и улучшает дебаг.
    • module.rules — правила обработки файлов с помощью лоадеров.
    • resolve.extensions — упрощает импорт файлов без указания расширений.
    • devtool: 'inline-source-map' — встроенные source maps для отладки.

  • webpackMiddleware.stats: ограничивает вывод логов Webpack до ошибок.

  • browsers: можно указать Headless-браузеры для CI/CD или обычные браузеры для локального тестирования.

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

Для TypeScript требуется заменить babel-loader на ts-loader и добавить конфигурацию TypeScript:

module: {
  rules: [
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      use: 'ts-loader'
    }
  ]
},
resolve: {
  extensions: ['.ts', '.js']
}

В tsconfig.json рекомендуется включить:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "sourceMap": true
  }
}

Это обеспечивает совместимость TypeScript с Webpack и Karma.

Интеграция с React и JSX

Для React требуется добавить пресет @babel/preset-react:

options: {
  presets: ['@babel/preset-env', '@babel/preset-react']
}

Также стоит убедиться, что файлы с JSX имеют расширение .jsx или .js и правильно обрабатываются через babel-loader.

Настройка source maps

Source maps необходимы для корректного отображения ошибок в тестах:

devtool: 'inline-source-map'

При использовании TypeScript:

tsconfig.json: "sourceMap": true

Это позволяет Karma и браузеру точно указывать строки в исходных файлах при возникновении ошибок или падений тестов.

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

  • Для ускорения тестов можно отключать минификацию и плагины оптимизации.
  • webpackMiddleware: { stats: 'errors-only' } снижает шум в логах.
  • Выделение отдельных конфигураций Webpack для тестов и продакшена уменьшает вероятность конфликтов.

Особенности для CI/CD

При запуске в CI:

  • Использовать Headless-браузеры (ChromeHeadless, FirefoxHeadless).
  • Включать singleRun: true для завершения процесса после выполнения тестов.
  • Минимизировать логи Webpack для читаемого вывода ошибок.

Отладка проблем

Частые ошибки при интеграции Webpack с Karma:

  • Не найден модуль: чаще всего связано с resolve.extensions или отсутствием лоадера.
  • Ошибки source maps: убедиться, что и Webpack, и TypeScript/Babel настроены на генерацию карт.
  • Медленная сборка: использовать mode: 'development' и минимизировать количество плагинов.

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

Оглавление