Unit-тестирование

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

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

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

Vitest запускает unit-тесты в окружении Node.js. Чтобы симулировать DOM браузера, Vitest использует библиотеку jsdom. Это позволяет быстрее выполнять тесты, избегая накладных расходов на запуск браузера. Можно заменить jsdom на альтернативу вроде happy-dom, установив её и удалив jsdom. Сейчас поддерживаемые библиотеки эмуляции DOM — jsdom и happy-dom.

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

ng test

Команда ng test собирает приложение в режиме watch и запускает test runner 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: Список путей к глобальным setup-файлам (например, polyfills или глобальные моки), выполняемым перед тестами.
• providersFile: Путь к файлу, экспортирующему массив Angular providers по умолчанию для тестового окружения. Полезно для настройки глобальных тестовых providers, внедряемых в тесты.
• coverage: Boolean для включения или отключения отчёта о покрытии кода. По умолчанию false.
• browsers: Массив имён браузеров для запуска тестов в реальном браузере (например, ["chromium"]). Требует установки browser provider. См. раздел Запуск тестов в браузере.

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

Опции 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 через опцию runnerConfig в 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 по умолчанию быстрее для большинства unit-тестов, тесты также можно запускать в реальном браузере. Это полезно для тестов, опирающихся на browser-specific API (например, рендер), или для отладки.

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

После установки provider можно запускать тесты в браузере, настроив опцию browsers в angular.json или используя флаг CLI --browsers. По умолчанию тесты запускаются в headed-браузере. Если установлена переменная окружения CI, вместо этого используется headless-режим. Чтобы явно управлять headless-режимом, можно добавить суффикс 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

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

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

Provider @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 также можно unit-тестировать с другими библиотеками тестирования и test runners. У каждой библиотеки и runner свои процедуры установки, конфигурация и синтаксис.

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

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

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

ng test

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

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

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

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

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