Skip to main content
Version: 14.3

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.

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

setupZoneTestEnv();

Examples

Manual configuration

// jest.config.js
module.exports = {
//...
extensionsToTreatAsEsm: ['.ts'],
transform: {
'^.+\\.(ts|js|html)$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html)$',
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.

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