Create Angular project with Jest Testing Framework

STEP:1

npm install -g @angular/cli

STEP:2

ng new my-app-name

STEP:3

cd my-app-name
ng serve --open

STEP:4

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

STEP:5

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

If the above code didn't removed the packages related to Karma and Jasmine, you can remove it manually from the package.json file. And then run the npm install to update the package-lock.json file.

STEP:6
Remove test from the angular.json file

STEP:7
Replace test with jest on the scripts in package.json
"test": "jest",

STEP:8
Create new file as setupJest.ts on root level and add below code in it

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

STEP:9
Remove if these files exist in the project
karma.conf.js and test.ts

STEP:10
Update the types value in the tsconfig.spec.json file

"types": [
      "jest",
      "node"
    ]

STEP:11
Add below code on the package.json

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

Finally now we can test the application by running the below command on terminal.

npm run test

If you need boilerplate code for Angular app with Jest test framework, please checkout my GitHub repo Angular-with-Jest