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.
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
options
(OPTIONAL)tsconfig
: see more at tsconfig options pageisolatedModules
: see more at isolatedModules options pageastTransformers
: see more at astTransformers options pagediagnostics
: see more at diagnostics options pagetestEnvironment
: eitherjsdom
orjest-preset-angular/environments/jest-jsdom-env
. Defaults tojsdom
.
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:
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
options
(OPTIONAL)tsconfig
: see more at tsconfig options pageisolatedModules
: see more at isolatedModules options pageastTransformers
: see more at astTransformers options pagediagnostics
: see more at diagnostics options pagetestEnvironment
: eitherjsdom
orjest-preset-angular/environments/jest-jsdom-env
. Defaults tojsdom
.
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:
import { createEsmPreset } from 'jest-preset-angular/presets';
import type { Config } from 'jest';
const presetConfig = createEsmPreset({
//...options
});
export default {
...presetConfig,
} satisfies Config;