Что такое Karma

Karma — это тестовый раннер для JavaScript, предназначенный для запуска тестов в реальных браузерах или эмуляторах браузеров. Его ключевая цель — обеспечение надежной и быстрой обратной связи о состоянии кода, что особенно важно при разработке фронтенд-приложений и библиотек. Karma не выполняет тестирование сам по себе; он интегрируется с различными фреймворками для тестирования, такими как Jasmine, Mocha, QUnit и другими, и управляет их выполнением в разных средах.

Основные особенности Karma:

  • Запуск тестов в реальных браузерах: поддержка Chrome, Firefox, Safari, Edge и других.
  • Поддержка нескольких тестовых фреймворков: возможность работы с популярными библиотеками для unit-тестирования.
  • Автоматическое отслеживание изменений: перезапуск тестов при изменении исходного кода.
  • Гибкая конфигурация: настройка окружения, отчетов и плагинов через файл karma.conf.js.

Установка и настройка

Установка Karma обычно происходит через npm. Для базовой установки достаточно нескольких пакетов:

npm install --save-dev karma karma-cli

После этого необходимо установить адаптеры для тестового фреймворка и браузеров. Например, для Jasmine и Chrome:

npm install --save-dev karma-jasmine karma-chrome-launcher jasmine-core

Создание конфигурационного файла происходит командой:

npx karma init

В процессе генерации можно задать следующие параметры:

  • Выбор тестового фреймворка.
  • Выбор браузеров для запуска тестов.
  • Путь к тестовым файлам и исходному коду.
  • Формат отчетов о результатах.

Пример минимального файла karma.conf.js:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    exclude: [],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  });
};

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

  • files: определяет файлы, которые будут загружены в браузер для тестирования.
  • reporters: указывает формат вывода результатов тестов (progress, dots, mocha и другие).
  • autoWatch: при true Karma автоматически перезапускает тесты при изменении файлов.
  • singleRun: если true, Karma выполнит тесты один раз и завершит работу, что удобно для CI.

Работа с браузерами

Karma взаимодействует с браузерами через специальные launcher’ы. Для каждого браузера существует отдельный пакет:

  • karma-chrome-launcher
  • karma-firefox-launcher
  • karma-safari-launcher
  • karma-edge-launcher

Браузеры могут запускаться в обычном или безголовом режиме (headless). Безголовый режим используется для CI/CD, поскольку не требует графического интерфейса.

Пример конфигурации Chrome в headless:

browsers: ['ChromeHeadless']

Можно настроить несколько браузеров одновременно:

browsers: ['Chrome', 'FirefoxHeadless']

Интеграция с тестовыми фреймворками

Karma поддерживает множество тестовых фреймворков через адаптеры. Основные фреймворки:

  • Jasmine: предоставляет синтаксис для unit-тестов, assertion-библиотеку и возможность использования spy-объектов.
  • Mocha: гибкий фреймворк с поддержкой асинхронного тестирования и множества assertion-библиотек (например, Chai).
  • QUnit: легковесный фреймворк, часто используемый в старых проектах jQuery.

Пример теста с Jasmine:

describe('Математические функции', () => {
  it('должны корректно суммировать два числа', () => {
    const sum = (a, b) => a + b;
    expect(sum(2, 3)).toBe(5);
  });
});

Karma загружает эти тесты в выбранные браузеры и возвращает результат выполнения через консоль или отчеты.

Преобразование и предобработка файлов

Karma поддерживает preprocessor’ы, позволяющие обрабатывать файлы перед запуском. Это необходимо для использования современных стандартов JavaScript, TypeScript или модульных систем:

  • karma-webpack — интеграция с Webpack, сборка модулей и транспиляция ES6/TypeScript.
  • karma-babel-preprocessor — транспиляция кода через Babel.
  • karma-coverage — генерация отчетов о покрытии кода тестами.

Пример конфигурации для TypeScript с Webpack:

preprocessors: {
  'src/**/*.ts': ['webpack'],
  'test/**/*.ts': ['webpack']
},
webpack: {
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  resolve: { extensions: ['.ts', '.js'] }
}

Отчеты и покрытие кода

Karma позволяет настраивать отчеты о выполнении тестов и покрытии кода. Основные reporter’ы:

  • progress — вывод текущего состояния тестов.
  • dots — компактный вид отчета.
  • mocha — подробный структурированный отчет.
  • coverage — отчет о проценте покрытия кода тестами.

Пример подключения покрытия кода через Istanbul:

reporters: ['progress', 'coverage'],
coverageReporter: {
  type: 'html',
  dir: 'coverage/'
}

После запуска Karma создаст папку coverage с детализированным отчетом, включая процент покрытия по каждой функции и файлу.

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

Karma легко интегрируется с системами непрерывной интеграции (Jenkins, GitHub Actions, GitLab CI). Основная конфигурация для CI:

  • Использование безголовых браузеров.
  • Включение singleRun: true.
  • Подключение reporter’ов для логирования и покрытия кода.

Пример настройки для GitHub Actions:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npx karma start --single-run

Отладка и логирование

Karma предоставляет несколько уровней логирования:

  • config.LOG_DISABLE — без логов.
  • config.LOG_ERROR — только ошибки.
  • config.LOG_WARN — предупреждения и ошибки.
  • config.LOG_INFO — стандартные сообщения.
  • config.LOG_DEBUG — детальные сообщения для отладки.

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

Автоматическое слежение за изменениями

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

Для крупных проектов рекомендуется использовать совместно с Webpack watch mode, чтобы минимизировать время пересборки и запуска тестов.

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

Оглавление