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

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

Установка необходимых пакетов

Для интеграции Karma с Webpack требуется установить несколько npm-пакетов:

npm install --save-dev karma karma-webpack webpack webpack-cli
npm install --save-dev karma-mocha mocha chai
npm install --save-dev babel-loader @babel/core @babel/preset-env
  • karma-webpack — плагин, обеспечивающий работу Webpack внутри Karma.
  • webpack и webpack-cli — основной инструмент для сборки модулей.
  • babel-loader, @babel/core, @babel/preset-env — позволяют транспилировать современный JavaScript в код, совместимый с тестируемыми браузерами.

Конфигурация Webpack для тестов

Файл webpack.config.js обычно делится на две части: основную сборку приложения и конфигурацию для тестов. Для Karma конфигурация минимальна и ориентирована на транспиляцию модулей и поддержку тестовых файлов:

const path = require('path');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }
};
  • test указывает на файлы, которые необходимо обработать.
  • exclude исключает сторонние модули, чтобы ускорить сборку.
  • babel-loader позволяет использовать современный синтаксис ES6+.

Конфигурация Karma с Webpack

Основная конфигурация Karma хранится в файле karma.conf.js. Для интеграции с Webpack добавляется секция webpack и указываются необходимые preprocessors:

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: [
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'test/**/*.spec.js': ['webpack']
    },
    webpack: require('./webpack.config.js'),
    reporters: ['progress'],
    browsers: ['ChromeHeadless'],
    singleRun: true,
    concurrency: Infinity
  });
};
  • frameworks определяет используемые тестовые фреймворки.
  • files содержит паттерн для тестовых файлов.
  • preprocessors связывает тестовые файлы с Webpack, позволяя обрабатывать модули.
  • browsers рекомендует запускать тесты в headless-режиме для CI/CD.

Работа с ассетами и стилями

Webpack позволяет подключать CSS, изображения и другие ассеты. Для тестов их можно подменять заглушками:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'null-loader'
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: 'null-loader'
      }
    ]
  }
};

null-loader просто игнорирует файлы, предотвращая ошибки при запуске тестов, где реальные стили не нужны.

Sourcemaps для тестирования

Для удобного отладки тестов рекомендуется включать sourcemaps:

module.exports = {
  devtool: 'inline-source-map'
};

В Karma это обеспечит корректные указания на строки исходного кода при падении тестов, а не на строки собранного файла.

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

Для ускорения выполнения тестов:

  • Использовать cache: true в Webpack, чтобы кэшировать результаты сборки.
  • Разделять конфигурации для приложения и тестов, минимизируя обработку лишних модулей.
  • Использовать babel-loader только для исходников приложения и тестов, исключая node_modules.

Применение Hot Module Replacement

Хотя HMR чаще используется для разработки, в связке с Karma можно настроить перезапуск тестов при изменении файлов. Для этого используют karma-webpack с опцией watch: true:

webpackMiddleware: {
  noInfo: true,
  stats: 'errors-only'
},
autoWatch: true

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

Поддержка TypeScript и других препроцессоров

Webpack предоставляет возможность использовать любые загрузчики, например ts-loader для TypeScript. Конфигурация Karma меняется только в части preprocessors и правил Webpack:

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

В Karma добавляется обработка файлов .ts аналогично .js.

Интеграция с CI/CD

Karma + Webpack хорошо интегрируется с системами непрерывной интеграции. Headless-браузеры и inline-source-maps обеспечивают стабильное выполнение тестов без визуального интерфейса. Для CI важно выставлять опции:

  • singleRun: true — завершение после одного прогонки тестов.
  • browsers: ['ChromeHeadless'] — использование headless-версий браузеров.
  • reporters: ['dots', 'junit'] — генерация отчётов для анализа результатов тестирования.

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

Оглавление