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)
• Legacy presets

---

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

Returns

An object contains Jest config:

type CjsPresetTransformerOptions = {
  tsconfig: string;
  stringifyContentPathRegex: string;
};

type CjsPresetType = {
  testEnvironment: string;
  moduleFileExtensions: Array<string>;
  snapshotSerializers: Array<string>;
  transformIgnorePatterns: Array<string>;
  transform: {
    '^.+\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];
  };
};

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

Returns

An object contains Jest config:

type EsmPresetTransformerOptions = {
  tsconfig: string;
  stringifyContentPathRegex: string;
  useEsm: true;
};

type EsmPresetType = {
  testEnvironment: string;
  moduleFileExtensions: Array<string>;
  snapshotSerializers: Array<string>;
  extensionsToTreatAsEsm: Array<string>;
  transformIgnorePatterns: Array<string>;
  transform: {
    '^.+\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];
  };
};

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;

Legacy presets

warning

jest-preset-angular DON'T RECOMMEND to use legacy presets because this approach is not flexible to configure Jest configuration. These legacy presets will be removed in the next major release and users are HIGHLY RECOMMENDED to migrate to use the above utility functions.

Preset name	Description
jest-preset-angular/presets/default or jest-preset-angular	TypeScript, JavaScript and HTML files (js, .ts, .html) will be transformed by jest-preset-angular to CommonJS syntax.
jest-preset-angular/presets/defaults-esm	TypeScript, JavaScript and HTML files (js, .ts, .html) will be transformed by jest-preset-angular to ESM syntax.

Example

jest.config.ts

import type { Config } from 'jest';

export default {
  preset: 'jest-preset-angular',
} satisfies Config;