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
        };
      }
    });
  • 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'],
    };
  • 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
      }
    }
    ...
  • 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

    42

    This website collects cookies to deliver better user experience

    Integrating Jest with latest angular version