ESM Support

To use jest-preset-angular with ESM support, you'll first need to check ESM Jest documentation.

jest-preset-angular supports ESM via a ts-jest config option useESM in combination with jest config option extensionsToTreatAsEsm.

There is also a preset to work with ESM.

tip

We have example apps which contains base ESM setup to work with Jest and Angular.

Besides, there is utility function to ensure that Jest can set up test environment properly.

setup-jest.ts

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

setupZoneTestEnv();

Examples

Manual configuration

jest.config.mts

import type { Config } from 'jest';

const jestConfig: Config = {
  //...
  extensionsToTreatAsEsm: ['.ts'],
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
        useESM: true,
      },
    ],
  },
};

export default jestConfig;

Use ESM presets

tip

Jest will attempt to load ESM files from node_modules with default jest-resolve which usually works for most of the cases. However, there are cases like Angular libraries ESM built files or ESM files which are outside node_modules might not be loaded correctly.

To fix that, one can use moduleNameMapper in jest config to instruct Jest to load the correct ESM files or create a custom Jest resolver.

jest.config.mts

import type { Config } from 'jest';

const jestConfig = {
  //...
  preset: 'jest-preset-angular/presets/defaults-esm',
};

export default jestConfig;