DEV Community

Alfredo Perez
Alfredo Perez

Posted on • Updated on

Angular 11 - Setting up Jest

This is a quick guide to setup Jest in your new Angular 10 application

1. Install Jest

npm install jest @types/jest jest-preset-angular --save-dev
Enter fullscreen mode Exit fullscreen mode

2. Uninstall Karma

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
Enter fullscreen mode Exit fullscreen mode

3. Remove test from angular.json

Remove the test section from angular.json, this section looks like the following:

   "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
            "styles": [
            "scripts": []
Enter fullscreen mode Exit fullscreen mode

4. Remove karma.conf.js and src/test.ts files

5. Create setupJest.ts file

This file should have the following:

import 'jest-preset-angular';
Enter fullscreen mode Exit fullscreen mode

6. Modify tsconfig.spec.json

  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
  "files": [
  "include": [
Enter fullscreen mode Exit fullscreen mode

7. Modify package.json file

Modify the test scripts to the following:

 "test": "jest",
 "test:coverage": "jest --coverage",
Enter fullscreen mode Exit fullscreen mode

Add Jest configuration to the end of this file:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
    "testPathIgnorePatterns": [
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
Enter fullscreen mode Exit fullscreen mode

Top comments (15)

dromerodev profile image
Diego Romero • Edited

[03/2021] For remove warnings:

  • update setupJest -> import 'jest-preset-angular/setup-jest';
  • add to tsconfig.json: "allowSyntheticDefaultImports": true,
  • update package.json -> tsConfig to tsconfig
ushakovmaksym profile image

ts-jestconfig The option tsConfig is deprecated and will be removed in ts-jest 27, use tsconfig instead

muratkeremozcan profile image
Murat K Ozcan

what do we do about this one?

ushakovmaksym profile image
UMaks • Edited

write tsconfig in lower case, don't use camel case style

edezekiel profile image
Edward Ezekiel

Thank you for posting this article! I just upgraded an Angular 9 app to Angular 10 and was running into errors using Jest. I tweaked my Jest configurations using the steps in this post and everything worked like a charm.

meghanar121 profile image
Meghana Rajappa • Edited

I followed all the steps, i am getting below error:

zone-testing.js is needed for the async() test helper but could not be found.Please make sure that your environment includes zone.js/dist/zone-testing.js

saluce65 profile image

Change your setupJest.ts file to import 'jest-preset-angular/setup-jest';

sutin1234 profile image

work for me. Thanks

itsgratien profile image

Thank you! @saluce65

mikel_hamer_50f46faf752f0 profile image
Mikel Hamer

I don't know who you are, but thank you

non4me profile image
Vladimir Troyanenko

Why src/test.ts you remove in step 4. but use in steps 6 and 7?

alfredoperez profile image
Alfredo Perez

Thanks! I will remove it =)

dianjuar profile image
Diego Juliao • Edited

There is a way of having the builder/executor test but using jest instead?

It's the ultimate solution, otherwise you need to put several npm scripts for all projects/libraries on your workspace

jijonivan profile image
Ivan Jijon • Edited

Very useful!
Thank you very much. I followed this guide for Angular: 12.2.8.

yadavpriya73028 profile image
Yadav Priya

What version of Jest,@type/jest and jest-preset-angular is compatible with Angular 11?