Seamless Integration: Jest with Angular in 8 Easy Steps
Tags: jest, angular, typescript, testcase
Published: 2024-01-24 00:00:50

Are you tired of the complexities of using Jasmine and Karma for testing in Angular 14? Say goodbye to the old and embrace the new by integrating Jest into your Angular projects. 

Jest provides a more straightforward and efficient testing experience. In this guide, we'll walk through the steps to seamlessly integrate Jest into your Angular 14 application.



## Step 1: Uninstall Jasmine & Karma


Let's start by removing the old testing dependencies. Run the following command to uninstall Jasmine and Karma:

```
npm uninstall -D @types/jasmine jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter ts-node
```




## Step 2: Install Jest


```
npm i -D @types/jest jest jest-preset-angular @angular-builders/jest
```

Now, install Jest along with necessary dependencies:

```
npm i -D @types/jest jest jest-preset-angular @angular-builders/jest
```

## Step 3: Create `setupJest.ts`

In the root of your project, create a file named setupJest.ts and add the following content:

// setupJest.ts

```
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'jest-preset-angular';
import 'zone.js';
import 'zone.js/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  {
    teardown: { destroyAfterEach: true },
  }
);

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
    };
  }
});
```

This file initializes Jest with Angular-specific configurations.



## Step 4: Create `jest.config.js`

Create a `jest.config.js` file in the root and add the following content:

// jest.config.js

```
module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  collectCoverage: true,
  coverageReporters: ['html', 'lcov', 'json', 'text'],
  coverageDirectory: '<rootDir>/coverage',
  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
};
```

This configuration file sets up Jest for your Angular project.


## Step 5: Update `angular.json`

Replace the "test" part of your angular.json file with the following content:

// angular.json


```
"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "main": ["setupJest.ts"],
    "tsConfig": "src/tsconfig.spec.json",
    "no-cache": true
  }
}
```
This change ensures that Jest is used for running tests.

## Step 6: Update `tsconfig.json`

Add `"esModuleInterop": true` to the `compilerOptions` in your `tsconfig.json` file.

## Step 7: Update tsconfig.spec.json

Open `tsconfig.spec.json` and replace "`jasmine`" with "`jest`" in the types field.

## Step 8: You're Done!

Congratulations! Jest is now seamlessly integrated with the latest Angular version. Your testing experience is set to be more enjoyable and efficient. Happy coding! 🚀