DEV Community

Kiran Mantha
Kiran Mantha

Posted on

Integrating Jest with latest angular version

As jest is increasingly gaining traction in unit testing angular components lets see how to integrate it with latest angular versions (12+)

  • uninstall jasmine & karma using 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

  • install jest using npm i -D @types/jest jest jest-preset-angular @angular-builders/jest

  • create file setupJest.ts in root and add below content

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

Enter fullscreen mode Exit fullscreen mode
  • If you are migrating from lower angular version using ng upgrade then except above piece of code if you are using any other piece of code in src/test.ts file then add that new content to setupJest.ts and delete src/test.ts

  • create file jest.config.js in root and add below content

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'],
};
Enter fullscreen mode Exit fullscreen mode
  • replace test part of angular.json with below content
...
"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "main": ["setupJest.ts"],
    "tsConfig": "src/tsconfig.spec.json",
    "no-cache": true
  }
}
...
Enter fullscreen mode Exit fullscreen mode
  • add "esModuleInterop": true to compilerOptions in tsconfig.json
  • open tsconfig.spec.json and replace jasmine with jest in types field

That's it jest is now comlpetely integrated with latest angular πŸ‘ πŸ’₯

Thanks for reading πŸ‘ and post any issue if you faced while doing so in comments below πŸ‘‡

You can find the example repo here

Discussion (0)