Setup: Angular and Jest testing framework

In my trek across the Internet, I came across Jest, a powerful and simple to use testing framework for Angular. The features and benefits of Jest are detailed in a lot of places and my purpose is to detail the necessary steps to configure an existing Angular v12.1.0 application to use Jest for testing purposes.

Source Code

You can find the source code at GitHub

Preparation and Caveats

• Backup your application, in case you need to rollback the changes outlined below.
• The steps below have been tested using Angular 12.10 and Jest 27.1.1 and other versions may or may not work.

Assumptions

• You’re using Visual Studio code as an IDE
• Angular 12.1.0
• Jest 27.1.1

Steps

1. Open your Angular application in VS Code
2. In a terminal session, execute the following command to remove karma and Jasmine

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

3. Delete the following two files

               karma.conf.js
               src/test.ts

4. Remove the test section in angular.json. The section to be removed looks like what is shown below

"test": {
   "builder": "@angular-devkit/build-angular:karma",
   "options": {
       "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "inlineStyleLanguage": "scss",
        "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
    }
}

5. Install Jest by running the command below

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

6. Create a file named setup-jest.ts at the root folder of your application and add the code shown below

	import 'zone.js';
	import 'zone.js/testing';
	import 'jest-preset-angular';

7. Create a file named jest.config.js at the root folder of your application and enter the code shown below

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

8. Update tsconfig.spec.json as shown below

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

9. For any existing tests you may have, add the following to each test

import { BrowserDynamicTestingModule,
  platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

beforeAll(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,
                                platformBrowserDynamicTesting());
  });

9. in package.json, replace any test related scripts with the following

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

Test

Run one of the commands from the previous step.

npm run test:watch