Тестирование с Karma и Jasmine

Хотя Vitest является тестовым средством запуска по умолчанию для новых проектов Angular, Karma по-прежнему поддерживается и широко используется. В этом руководстве приведены инструкции по тестированию приложения Angular с помощью тестового средства запуска Karma и тестового фреймворка Jasmine.

Настройка Karma и Jasmine

Вы можете настроить Karma и Jasmine для нового проекта или добавить их в существующий.

Для новых проектов

Чтобы создать новый проект с предварительно настроенными Karma и Jasmine, выполните команду ng new с параметром --test-runner=karma:

ng new my-karma-app --test-runner=karma

Для существующих проектов

Чтобы добавить Karma и Jasmine в существующий проект, выполните следующие действия:

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

   npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

   yarn add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

   pnpm add -D karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

   bun add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

2. Настройте тестовое средство запуска в angular.json:

   В файле angular.json найдите цель test и задайте для параметра runner значение karma:

   {
     // ...
     "projects": {
       "your-project-name": {
         // ...
         "architect": {
           "test": {
             "builder": "@angular/build:unit-test",
             "options": {
               "runner": "karma"
               // ... other options
             }
           }
         }
       }
     }
   }

3. Обновите tsconfig.spec.json для типов Jasmine:

   Чтобы TypeScript распознавал глобальные функции тестирования, такие как describe и it, добавьте "jasmine" в массив types в файле tsconfig.spec.json:

   {
     // ...
     "compilerOptions": {
       // ...
       "types": ["jasmine"]
     }
     // ...
   }

Запуск тестов

После настройки проекта запустите тесты с помощью команды ng test:

ng test

Команда ng test собирает приложение в режиме наблюдения и запускает тестовое средство запуска Karma.

Вывод в консоли выглядит следующим образом:

02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
TOTAL: 3 SUCCESS

Результаты тестов отображаются в браузере с помощью HTML-отчётчика Karma Jasmine.

Нажмите на строку теста, чтобы повторно запустить только этот тест, или нажмите на описание, чтобы повторно запустить тесты в выбранной группе тестов («наборе тестов»).

Тем временем команда ng test отслеживает изменения. Чтобы проверить это, внесите небольшое изменение в исходный файл и сохраните его. Тесты запустятся снова, браузер обновится, и появятся новые результаты тестирования.

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

Angular CLI настраивает Jasmine и Karma за вас. Он формирует полную конфигурацию в памяти на основе параметров, указанных в файле angular.json.

Настройка конфигурации Karma

Если вы хотите настроить Karma, создайте файл karma.conf.js, выполнив следующую команду:

ng generate config karma

Указание тестового средства запуска в angular.json

Чтобы явно указать Karma в качестве тестового средства запуска для проекта, найдите цель test в файле angular.json и задайте для параметра runner значение karma:

{
  // ...
  "projects": {
    "your-project-name": {
      // ...
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runner": "karma"
            // ... other options
          }
        }
      }
    }
  }
}

Контроль покрытия кода

Чтобы обеспечить минимальный уровень покрытия кода, используйте свойство check в разделе coverageReporter файла karma.conf.js.

Например, чтобы задать минимальное покрытие в 80%:

coverageReporter: {
  dir: require('path').join(__dirname, './coverage/<project-name>'),
  subdir: '.',
  reporters: [
    { type: 'html' },
    { type: 'text-summary' }
  ],
  check: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80
    }
  }
}

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

Тестирование в среде непрерывной интеграции

Чтобы запускать тесты Karma в среде CI, используйте следующую команду:

ng test --no-watch --no-progress --browsers=ChromeHeadless

Отладка тестов

Если тесты работают не так, как вы ожидаете, их можно проверить и отладить в браузере.

Чтобы отладить приложение с помощью тестового средства запуска Karma:

1. Откройте окно браузера Karma. Если вам нужна помощь с этим шагом, см. раздел Подготовка к тестированию.
2. Нажмите кнопку ОТЛАДКА, чтобы открыть новую вкладку браузера и повторно запустить тесты.
3. Откройте инструменты разработчика браузера. В Windows нажмите Ctrl-Shift-I. В macOS нажмите Command-Option-I.
4. Выберите раздел Sources.
5. Нажмите Control/Command-P, затем начните вводить имя файла теста, чтобы открыть его.
6. Установите точку останова в тесте.
7. Обновите страницу браузера и убедитесь, что выполнение останавливается на точке останова.