files

Karma — это тестовый раннер для JavaScript, который обеспечивает запуск тестов в реальных браузерах, интеграцию с CI/CD и гибкую конфигурацию. Для работы требуется Node.js и npm. Установка производится через пакетный менеджер:

npm install --save-dev karma karma-cli

После установки глобального интерфейса karma-cli можно инициализировать проект командой:

npx karma init

В процессе инициализации выбираются фреймворк тестирования (Jasmine, Mocha, QUnit), браузеры для запуска, настройки автоматического запуска тестов при изменении файлов и конфигурация отчетов о покрытии кода.

Конфигурационный файл karma.conf.js является ключевым элементом, управляющим всеми аспектами работы Karma.

Конфигурация файлов

Файл karma.conf.js содержит свойство files, которое определяет, какие файлы подключаются к тестовому окружению. Синтаксис позволяет задавать порядок подключения, использовать шаблоны и фильтры.

Пример базовой конфигурации:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    browsers: ['Chrome'],
    singleRun: true
  });
};

Основные параметры

  • Путь к файлам: можно использовать относительные пути и глобальные шаблоны (*, **).
  • Типы файлов: можно указывать JS, CSS, HTML и даже JSON.
  • Порядок загрузки: Karma подключает файлы в том порядке, в котором они перечислены.
  • Подключение библиотек: сторонние библиотеки (например, node_modules/angular/angular.js) следует подключать до исходного кода и тестов, чтобы обеспечить правильную инициализацию.

Использование шаблонов и масок

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

  • *.js — все JS-файлы в текущей папке.
  • **/*.js — все JS-файлы рекурсивно в папке и её подпапках.
  • ! перед маской исключает файлы из списка, например:
files: [
  'src/**/*.js',
  '!src/vendor/**/*.js'
]

Настройка дополнительных свойств файлов

Каждый элемент массива files может быть объектом с дополнительными опциями:

files: [
  { pattern: 'src/**/*.js', watched: true, included: true, served: true },
  { pattern: 'test/data/*.json', watched: false, included: false, served: true }
]
  • pattern — путь к файлу или шаблон.
  • watched — следить ли за изменениями файла; при true Karma перезапускает тесты при изменении.
  • included — подключать ли файл через <script> в браузере. Обычно для исходного кода и тестов true.
  • served — делать файл доступным на веб-сервере Karma, даже если он не подключен через <script>. Используется для JSON или HTML-шаблонов.

Группировка и порядок подключения

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

files: [
  'node_modules/jquery/dist/jquery.js',
  'node_modules/lodash/lodash.js',
  'src/**/*.js',
  'test/**/*.spec.js'
]

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

Использование файлов ресурсов

Karma может обслуживать не только скрипты, но и статические ресурсы:

files: [
  { pattern: 'test/fixtures/**/*.html', watched: true, included: false, served: true },
  { pattern: 'test/data/**/*.json', watched: true, included: false, served: true }
]
  • HTML-шаблоны для тестов фреймворков типа Angular или React можно получить через AJAX.
  • JSON-файлы удобно использовать для моков данных.

Важно: included: false гарантирует, что файл не будет вставлен в DOM автоматически, а будет доступен только через HTTP-запрос к Karma-серверу.

Подключение модулей и зависимостей через files

Для проектов с модулями ES или CommonJS порядок подключения можно контролировать через Karma и Webpack. Пример интеграции с Webpack:

files: [
  { pattern: 'test/**/*.spec.js', watched: false }
],
preprocessors: {
  'test/**/*.spec.js': ['webpack']
}

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

Практические рекомендации

  • Всегда указывать порядок подключения библиотек, чтобы избежать ошибок ReferenceError.
  • Использовать watched: true для тестовых файлов и исходников, чтобы Karma автоматически перезапускал тесты.
  • Для больших проектов делить файлы на группы и использовать объекты с настройками included и served.
  • Исключать сторонние или временные файлы с помощью ! в масках.
  • Подключать статические ресурсы через объекты, не вставляя их в DOM напрямую.

Файл karma.conf.js с корректно настроенным массивом files обеспечивает стабильное, предсказуемое тестовое окружение и позволяет масштабировать проект без проблем с загрузкой зависимостей.

Оглавление