1. Install the dependencies: 

npm install jest jest-preset-angular @types/jest --save-dev
  • jest: Core testing framework.
  • jest-preset-angular: Adds Angular support for Jest.
  • @types/jest: TypeScript definitions for Jest.

2. Remove Karma: 

npm remove karma karma-chrome-launcher karma-jasmine karma-coverage karma-jasmine-html-reporter

3. Update test script on package.json file: 

"scripts": {
    ...
    "test": "jest",

4. Create jest.config.js file: 

module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['/setup-jest.ts'],
    testPathIgnorePatterns: ['/node_modules/', '/dist/'],
    transform: {
        '^.+\\.ts$': 'ts-jest', // Only transform .ts files
    },
    transformIgnorePatterns: [
        '/node_modules/(?!flat)/', // Exclude modules except 'flat' from transformation
    ],
};

5. Create setup-jest.ts file: 

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
setupZoneTestEnv();

6. Update tsconfig.spec.json file: 

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

7. Update the test property in angular.json file: 

"test": {
  "builder": "@angular-devkit/build-angular:jest",
  "options": {
    "tsConfig": "tsconfig.spec.json"
  }
}

8. Verify that esModuleInterop property is included in tsconfig.json file: 

"compilerOptions": {
    "baseUrl": "./",
    ...
    "esModuleInterop": true, // <= add it if it is not there