Серия Angular Testing: как плавно добавить Jest в проект Angular

Как добавить Jest в проект Angular и почему мы должны это учитывать?

Когда у нас есть возможность участвовать в проекте Angular с самого начала, мы, вероятно, оказываем влияние на многие архитектурные аспекты. Один из этих аспектов - выбор подходящих методик и инструментов тестирования. Во множестве проектов используется стандартный инструмент, поставляемый с Angular: Karma и Jasmine.

Однако важно понимать, что выбор Test Runner не ограничивается кармой. Почему-то Шуткой стоит заинтересоваться.

Какие возможные преимущества приносит Jest вашему проекту? 📘

Более быстрая работа и параллельное тестирование прямо из коробки
Различные функции, предоставляемые Jest CLI, повышающие эффективность работы
Простая подделка, шпионаж и издевательство
Встроенные утверждения и покрытие кода
Поддержка машинописного текста

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

Установите все необходимые зависимости 🌱

Если вы выберете npm в качестве диспетчера пакетов в своем проекте

npm install jest jest-preset-angular @types/jest --save-dev

или если yarn - ваш выбор в проекте

yarn add jest jest-preset-angular @types/jest --dev

Создайте базовую конфигурацию 🚧

Давайте создадим jest.config.js файл в каталоге вашего проекта.

В качестве альтернативы вы можете предоставить указанную выше конфигурацию в package.json,

{
  "jest": {
    "preset": "jest-preset-angular",
    "roots": ["<rootDir>/src/"],
    ....
 }
}

но я не поклонник добавления каждой конфигурации в package.json. Это не масштабируемое решение, и при добавлении в проект других функций оно может оказаться беспорядочным.

Затем найдите файл <root-dir>/src/test.ts и полностью замените его содержимое следующим кодом

В первой (1) строке мы импортируем соответствующую библиотеку jest-preset-angular. Остальное необходимо для использования JSDOM, поставляемого с Jest.

Последнее, что вам нужно сделать, это небольшую tsconfig.spec.json модификацию файла.

Строка (6) необходима, чтобы избежать следующего предупреждения

If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`).

Строка (7) необходима для отражения метаданных во время выполнения Jest.

Следуйте за мной в Твиттере, если вы хотите быть в курсе новых замечательных вещей об Angular и интерфейсе! 😄

Запустить тест с помощью Jest runner 🚗

Просто введите в командной строке jest и, если все настроено правильно, Jest выполнит тестовые костюмы и подготовит отчет.

Более того, покрытие как встроенная функция создается в каталоге ./coverage.

Открыв index.html файл в браузере, вы увидите базовый отчет о покрытии кода проекта.

Удалить Karma runner 🍂

И последнее, но не менее важное: оставить в проекте чистоту после внесенного улучшения. Если Jest станет основным исполнителем тестов в нашем проекте Angular, Karma больше не понадобится. Мы можем сделать это простым способом

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

или если yarn - ваш выбор в проекте

yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

По умолчанию Angular использует Karma для выполнения тестов путем настройки соответствующего builder в architect разделе в angular.json файле. Теперь его можно удалить, поскольку он больше не используется.

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  }
}, // REMOVE ALL "test" section

Помните, что если вы ранее использовали команду ng test для запуска тестов, эта команда больше не будет доступна. Теперь ваш тест будет запущен командой jest.

Последний шаг - karma.conf.js удаление файла

Пример 📕

Я включил все шаги, представленные выше, в специально подготовленный репозиторий. Не стесняйтесь проверить и попробовать, как интеграция Jest с Angular работает самостоятельно.

marcinmilewicz / angular-testing
В настоящее время вы не можете выполнить это действие. Вы вошли в систему с другой вкладкой или окном. Вы вышли из аккаунта на другой вкладке или… github.com

Следуйте за мной в Твиттере, если вы хотите быть в курсе новых замечательных вещей об Angular и интерфейсе! 😄