Конфигурация Jest в angular

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

Вот все шаги по настройке jest в angular

• Создайте проект Angular или существующий проект
• Деинсталлируйте весь пакет karma jasmine
• Удалите тестовый объект из angular.json
• Удалите файл karma.config.js и файл test.ts
• npm install jest @types/jest jest-preset-angular
• Создайте файл setup.jest.ts
• Обновите файл tsconfig.spec.json
• Добавьте конфигурацию jest в package.json
• Добавить скрипты в package.json для запуска jest

Шаг 1: Создайте ангулярный проект

ng new jestAngular

Шаг 2: Удалите все пакеты karma jasmine

Перейдите в файл Package.json и удалите все эти пакеты

Команда для удаления пакетов karma и jasmine

Npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

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

Шаг 3: Удалите тестовый объект из angular.json

Шаг 4: Удалите файл karma.config.js и файл test.ts

Если в вашем ангулярном проекте есть эти два тестовых файла, просто удалите их

Шаг 5: Установите пакет jest в ваш проект

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

Шаг 6: создайте пустой файл typescript в папке app

Импортируйте модуль jest в файл setup.jest.ts

Шаг 7: Обновление файла ts.config.spec.json

Шаг 8: Добавьте конфигурацию в package.json

  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setup.jest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    }
  }

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },

Шаг 9: Запустите файл теста

Запустите файл теста с помощью команды npm run test.

Поздравляю. настройка тестирования jest завершена. в следующей статье я покажу вам различные функции и команды jest.