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)
• createEsmPreset(options)

---

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 page
  • isolatedModules: see more at isolatedModules options page
  • astTransformers: see more at astTransformers options page
  • diagnostics: see more at diagnostics options page
  • testEnvironment: either jsdom or jest-preset-angular/environments/jest-jsdom-env. Defaults to jsdom.

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

• options (OPTIONAL)
  • tsconfig: see more at tsconfig options page
  • isolatedModules: see more at isolatedModules options page
  • astTransformers: see more at astTransformers options page
  • diagnostics: see more at diagnostics options page
  • testEnvironment: either jsdom or jest-preset-angular/environments/jest-jsdom-env. Defaults to jsdom.

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;