Модульное тестирование

Тестирование приложения Angular помогает убедиться, что оно работает так, как вы ожидаете. Модульные тесты крайне важны для раннего обнаружения ошибок, обеспечения качества кода и безопасного рефакторинга.

Настройка тестирования

Angular CLI загружает и устанавливает всё необходимое для тестирования приложения Angular с помощью платформы тестирования Vitest. Новые проекты по умолчанию включают vitest и jsdom.

Vitest запускает модульные тесты в среде Node.js. Для имитации DOM браузера Vitest использует библиотеку под названием jsdom. Это позволяет ускорить выполнение тестов, избегая накладных расходов на запуск браузера. Вы можете заменить jsdom альтернативой, например happy-dom, установив её и удалив jsdom. В настоящее время поддерживаются библиотеки эмуляции DOM jsdom и happy-dom.

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

ng test

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

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

 ✓ src/app/app.spec.ts (3)
   ✓ AppComponent should create the app
   ✓ AppComponent should have as title 'my-app'
   ✓ AppComponent should render title
 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  18:18:01
   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)

Команда ng test также отслеживает изменения файлов. Если вы измените файл и сохраните его, тесты запустятся повторно.

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

Angular CLI берёт на себя большую часть настройки Vitest. Вы можете настроить поведение тестов, изменив параметры цели test в файле angular.json.

Параметры Angular.json

• include: шаблоны Glob для файлов, включаемых в тестирование. По умолчанию — ['**/*.spec.ts', '**/*.test.ts'].
• exclude: шаблоны Glob для файлов, исключаемых из тестирования.
• setupFiles: список путей к файлам глобальной настройки (например, полифилам или глобальным имитациям), которые выполняются перед тестами.
• providersFile: путь к файлу, экспортирующему массив провайдеров Angular по умолчанию для тестовой среды. Это удобно для настройки глобальных провайдеров тестирования, внедряемых в тесты.
• coverage: логическое значение, включающее или отключающее создание отчёта о покрытии кода. По умолчанию — false.
• browsers: массив имён браузеров, в которых запускаются тесты в настоящем браузере (например, ["chromium"]). Требуется установленный провайдер браузера. Дополнительные сведения см. в разделе Запуск тестов в браузере.

Глобальная настройка тестов и провайдеры

Параметры setupFiles и providersFile особенно полезны для управления глобальной конфигурацией тестирования.

Например, можно создать файл src/test-providers.ts, чтобы предоставить provideHttpClientTesting для всех тестов:

import {EnvironmentProviders, Provider} from '@angular/core';
import {provideHttpClientTesting} from '@angular/common/http/testing';

const testProviders: (Provider | EnvironmentProviders)[] = [provideHttpClientTesting()];

export default testProviders;

Затем укажите этот файл в angular.json:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "providersFile": "src/test-providers.ts"
          }
        }
      }
    }
  }
}

Расширенная настройка Vitest

Для расширенных сценариев использования можно указать пользовательский файл конфигурации Vitest с помощью параметра configFile в angular.json.

Можно создать файл конфигурации Vitest (например, vitest-base.config.ts) и указать его в angular.json:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runnerConfig": "vitest-base.config.ts"
          }
        }
      }
    }
  }
}

Также можно сгенерировать базовый файл конфигурации с помощью CLI:

ng generate config vitest

Будет создан файл vitest-base.config.ts, который можно настроить.

Покрытие кода

Создать отчёт о покрытии кода можно, добавив флаг --coverage к команде ng test. Отчёт создаётся в каталоге coverage/.

Более подробную информацию см. в руководстве по покрытию кода.

Запуск тестов в браузере

Для большинства модульных тестов среда Node.js по умолчанию работает быстрее, однако тесты также можно запускать в настоящем браузере. Это полезно для тестов, использующих API, специфичные для браузера (например, для отрисовки), а также для отладки.

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

После установки провайдера вы можете запускать тесты в браузере, настроив параметр browsers в angular.json или используя флаг CLI --browsers. По умолчанию тесты запускаются в браузере с отображением окна. Если задана переменная среды CI, вместо этого используется безголовый режим. Чтобы явно задать безголовый режим, добавьте к имени браузера суффикс Headless (например, chromiumHeadless).

# Example for Playwright (headed)
ng test --browsers=chromium

# Example for Playwright (headless)
ng test --browsers=chromiumHeadless

# Example for WebdriverIO (headed)
ng test --browsers=chrome

# Example for WebdriverIO (headless)
ng test --browsers=chromeHeadless

Выберите один из следующих провайдеров браузера в зависимости от ваших потребностей:

Playwright

Playwright — это библиотека автоматизации браузеров, поддерживающая Chromium, Firefox и WebKit.

npm install --save-dev @vitest/browser-playwright playwright

yarn add --dev @vitest/browser-playwright playwright

pnpm add -D @vitest/browser-playwright playwright

bun add --dev @vitest/browser-playwright playwright

WebdriverIO

WebdriverIO — это платформа автоматизации тестирования браузеров и мобильных устройств, поддерживающая Chrome, Firefox, Safari и Edge.

npm install --save-dev @vitest/browser-webdriverio webdriverio

yarn add --dev @vitest/browser-webdriverio webdriverio

pnpm add -D @vitest/browser-webdriverio webdriverio

bun add --dev @vitest/browser-webdriverio webdriverio

Preview

Провайдер @vitest/browser-preview предназначен для сред WebContainer, таких как StackBlitz, и не рассчитан на использование в CI/CD.

npm install --save-dev @vitest/browser-preview

yarn add --dev @vitest/browser-preview

pnpm add -D @vitest/browser-preview

bun add --dev @vitest/browser-preview

Другие платформы тестирования

Для модульного тестирования приложения Angular можно использовать и другие библиотеки и средства запуска тестов. У каждой библиотеки и средства запуска свои процедуры установки, конфигурация и синтаксис.

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

Надёжный набор тестов — важная часть конвейера непрерывной интеграции (CI). Серверы CI позволяют автоматизировать запуск тестов при каждом коммите и запросе на слияние.

Чтобы протестировать приложение Angular на сервере CI, выполните стандартную команду тестирования:

ng test

Большинство серверов CI задают переменную среды CI=true, которую обнаруживает ng test. Это автоматически настраивает тесты для запуска в неинтерактивном режиме с однократным выполнением.

Если сервер CI не задаёт эту переменную или вам нужно вручную принудительно включить режим однократного выполнения, используйте флаги --no-watch и --no-progress:

ng test --no-watch --no-progress

Дополнительная информация о тестировании

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