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 setup-jest.mjs to add to Jest setup file to ensure that Jest can set up test environment properly.

import 'jest-preset-angular/setup-jest.mjs';

Examples

Manual configuration

JavaScript

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

TypeScript

import type { Config } from 'jest';

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

export default jestConfig;

JSON

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

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.

JavaScript

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

TypeScript

import type { Config } from 'jest';

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

export default jestConfig;

JSON

// OR package.json
{
  //...
  "jest": {
    "preset": "jest-preset-angular/presets/defaults-esm"
  }
}