Angular에서 Jest 설정하기

개발 종속성에 Jest를 설치합니다.

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

기본 Angular 프로젝트에서 Karma 제거

npm uninstall karma karma-chrome-launcher karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma-coverage-istanbul-reporter karma-jasmine

참고: 프로젝트에서 karma.conf.js 및 src/test.ts도 삭제하십시오.


테스트 구성 angular.json 파일을 업데이트합니다.

{
 ...
 ...
 "test": {
    "builder": "@angular-builders/jest:run",
    "options": {
      "tsConfig": "<rootDir>/src/tsconfig.test.json",
      "collectCoverage": false,
      "forceExit": true
    }
 },
 "lint": {...},
 "e2e": {...}
 ...
}

파일 이름 jestSetup.ts 만들기
import 'jest-preset-angular /setup-jest';

tsconfig.spec.json 업데이트

"compilerOptions": {
 "outDir": "./out-tsc/spec",
 "types": ["jest", "node"],
 "esModuleInterop": true,
 "emitDecoratorMetadata": true
 },

package.json 실행 스크립트 업데이트

"test": "jest",
"test:coverage": "jest --coverage",

package.json에 Jest 구성 추가

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

마지막으로 명령으로 실행npm run test 결과를 확인하기 위해

행복한 코딩!