Skip to main content
Version: 14.x

Installation

Dependencies​

You can install jest-preset-angular and dependencies all at once with one of the following commands.

npm install -D jest jest-preset-angular @types/jest jest-environment-jsdom jsdom

Configuration​

important

Angular doesn't support native async/await in testing with target higher than ES2016, see https://github.com/angular/components/issues/21632#issuecomment-764975917

tip

For ESM configuration, please see more in details with ESM guide.

In your project root, create a setup file with following contents:

setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv();

Update setupFilesAfterEnv in your Jest config as following:

jest.config.ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;

Adjust your tsconfig.spec.json to be:

tsconfig.spec.json
{
  //...
  "extends": "./tsconfig.json",
  "compilerOptions": {
    //...
    "module": "CommonJS",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
  //...
}

Adjust scripts part your package.json to use jest instead of ng, e.g.

package.json
{
  //...
  "scripts": {
    "test": "jest"
  }
  //...
}

Customizing​

Global mocks​

jest-preset-angular uses JSDOM which is different from normal browsers. You might need some global browser mocks to simulate the behaviors of real browsers in JSDOM. To add global mocks, you can do the following:

  • Create a file jest-global-mocks.ts to your root project.
  • Import it in your global setup file:
setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import './jest-global-mocks';

setupZoneTestEnv();
tip

An example for jest-global-mocks.ts

jest-global-mocks.ts
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
    };
  },
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});

Avoid karma conflicts​

By Angular CLI defaults you'll have a src/test.ts file which will be picked up by jest. To circumvent this you can either rename it to src/karmaTest.ts or hide it from jest by adding <rootDir>/src/test.ts to jest testPathIgnorePatterns option.