Skip to main content
Version: Next

Presets

In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments. They allow developers to quickly configure Jest with specific transformers, file extensions, and other options.

jest-preset-angular provides very opinionated presets and based on what we found to be useful.

important

The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page.

Functions


createCjsPreset(options)

Create a configuration to process JavaScript/TypeScript/HTML/SVG files (ts|js|mjs|html|svg).

Parameters

Default returned value

An object contains Jest config:

{
"moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
"snapshotSerializers": [
"jest-preset-angular/build/serializers/html-comment",
"jest-preset-angular/build/serializers/ng-snapshot",
"jest-preset-angular/build/serializers/no-ng-attributes"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(ts|js|mjs|html|svg)$": [
"jest-preset-angular",
{
"stringifyContentPathRegex": "\\.(html|svg)$",
"tsconfig": "<rootDir>/tsconfig.spec.json"
}
]
},
"transformIgnorePatterns": ["node_modules/(?!(.*\\.mjs$|@angular/common/locales/.*\\.js$))"]
}

Example:

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

const presetConfig = createCjsPreset({
//...options
});

export default {
...presetConfig,
} satisfies Config;

createEsmPreset(options)

Create a configuration to process JavaScript/TypeScript/HTML/SVG files (ts|js|html|svg).

Parameters

Default returned value

An object contains Jest config:

{
"extensionsToTreatAsEsm": [".ts"],
"moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
"moduleNameMapper": {
"tslib": "tslib/tslib.es6.js"
},
"snapshotSerializers": [
"jest-preset-angular/build/serializers/html-comment",
"jest-preset-angular/build/serializers/ng-snapshot",
"jest-preset-angular/build/serializers/no-ng-attributes"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(ts|js|html|svg)$": [
"jest-preset-angular",
{
"stringifyContentPathRegex": "\\.(html|svg)$",
"tsconfig": "<rootDir>/tsconfig.spec.json",
"useESM": true
}
]
},
"transformIgnorePatterns": ["node_modules/(?!tslib)"]
}

Example:

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

const presetConfig = createEsmPreset({
//...options
});

export default {
...presetConfig,
} satisfies Config;