Angular 16 & Jest | Quick guide

From version 16, Angular enable us to use Jest “natively”. But, before proceeding, it is important to clarify that the integration is in an experimental state.

First, let’s create a new Angular workspace:

ng new angular-jest

Inside the workspace, install the Jest dependencies:

cd angular-jest

npm install jest jest-environment-jsdom @types/jest --save-dev

Next step is change the builder in angular.json configuration for test target:

"test": {
  "builder": "@angular-devkit/build-angular:karma", // karma -> jest
  ...
}

And keep only the polyfills and tsConfig options:

"test": {
  "builder": "@angular-devkit/build-angular:jest",
  "options": {
    "polyfills": [
      "zone.js",
      "zone.js/testing"
    ],
    "tsConfig": "tsconfig.spec.json"
  }
}

Last step is change “jasmine” for “jest” in types option in tsconfig.spec.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"] // jasmine -> jest
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Wow 🎉! Now the environment is ready to run tests with Jest:

ng test

If you want to learn more about the future of testing in Angular, read this article created by the Angular team:

Moving Angular CLI to Jest and Web Test Runner