Setting Up Jest in Angular

Elsie — Fri, 03 Sep 2021 05:25:15 +0000

Install Jest in dev dependencies:

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

Uninstall Karma in default Angular project

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

Note: also delete karma.conf.js & src/test.ts from project

Update the test configuration angular.json file:

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

Create file name jestSetup.ts

import 'jest-preset-angular /setup-jest';

Update tsconfig.spec.json

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

Update package.json run script

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

Add Jest configuration in package.json

"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$"
    }
  }
}

Finally, run with command
npm run test to check your result

Happy Coding !

DEV Community: Elsie