Why Jest with Angular?

Question

---

To use Jest with an Angular project (instead of the default Karma + Jasmine setup), follow this structured guide to configure it properly.

---

Benefits

Faster test execution (especially with --runInBand and --watch).

Easier debugging (rich error messages).

Snapshot testing support.

Widely used in React and Node.js ecosystems

setup jest

> npm install -D jest jest-preset-angular @types/jest

>npm remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

Create 2 jest setup files

jest.config.js(javascript file)

In your project root, create /jest.config.js (.js javascript file) with the following contents.
(NOTE: The file name is reserved by jest, and jest looks up this file for configuration.)

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

setup-jest.ts

In your project root, create /setup-jest.ts with the following contents.
(INFO: You may change the filename with your preference as long as the file name is matched in the jest.config.js)

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

Update files

tsconfig.spec.json (Original file created by 'ng new' command.)

(1) Change types from “jasmine” to “jest”.
(2) Remove files.

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

The following is after the changes.

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

tsconfig.json

Add “esModuleInterop”: true in the CompilorOptions to remove a warning message. (See the warning message in Appendix)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "types": ["jest"]
}

package.json

Change the test script from ng test to jest

"scripts": {
  "test": "ng test"
},==>"scripts": {
  "test": "jest --coverage"
},

Remove 2 files

Remove “/src/test.ts” and “/karma.config.js”.

Run jest with coverage option

Run npm run test, which invokes the script “jest --coverage”

Remove test object from angular.json file

Another option to create jest config files

npx jest — init

"test": "jest --verbose",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"