How to set up Jest in Angular App

3 min readMar 7, 2022

What is Unit Testing?

Unit Testing is one of the many stages of software testing and looks at single units, otherwise known as components, individually. This validates that each component of the software being tested works as it is designed to. Each unit is the smallest functional part of the software that can be tested and normally only has one input and one output.

Unit testing is done during the coding phase while the software or other product is being developed to make sure it is clear of bugs and ready before its release.

When we starting a new Angular application, the Angular CLI automatically sets up everything we need for unit testing using Karma and Jasmine.

In this article we will learn how to ditch Karma and Jasmine and use Jest as our unit testing framework and runner.

Let’s begin.

1. Create Angular App

Generate angular app called angular-jest using given command.

ng new angular-jest

2. Install the dependencies

npm install jest jest-preset-angular @types/jest @angular-builders/jest --save-dev

or if you are using yarn as your package manager

yarn add jest jest-preset-angular @types/jest @angular-builders/jest --dev

3. Configure Jest

Now Create the jest.config.tsfile at the root of your project

const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/angular-jest',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/'
  })
};

Locate to <root-dir>/src/test.ts file and replace entire content by following code.

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

Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  }
});

update tsconfig.spec.json

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

remove complete test configuration from angular.json file.

add below script in your package.json under scripts

"test": "jest"

Cool! now we have setup jest in our Angular application. Use below command to run your test.

npm run test

Now you should be able to see your test and it will also generate a coverage directory under root, where you can check coverage.

4. Remove Karma Runner

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

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

Also remove karma.conf.js file from root of your project directory.

Hurrray !! we have setup jest in our Angular App.

If you liked this please give a clap.

Also let us know who you are doing this in your project. Do share if you know any other approach.

you can find code on github: https://github.com/piyush303/angular-jest

Sources:

Jest

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to…

jestjs.io

How to create custom theme in Angular Material

In this article we will learn how to create custom theme in Angular Material in Angular Application.

jnpiyush.medium.com

How to use different Environment Variables in Angular 13

In this article we will learn how to use different environments files for different environments.