Options

jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object in the package.json file of your project, or through a jest.config.js, or jest.config.ts file.

More information about ts-jest options, see doc

important

Since v9.0.0, jest-preset-angular default Jest configuration no longer provides moduleNameMapper. If you wish to reuse the old moduleNameMapper configuration, you can put this into your Jest config

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '^app/(.*)$': '<rootDir>/src/app/$1',
    '^assets/(.*)$': '<rootDir>/src/assets/$1',
    '^environments/(.*)$': '<rootDir>/src/environments/$1',
  },
};

Exposed configuration

const snapshotSerializers = require('jest-preset-angular/build/serializers');

module.exports = {
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
    },
  },
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(ts|js|html|svg)$': 'jest-preset-angular',
  },
  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
  snapshotSerializers,
};

important

Jest runs with jest-preset-angular neither in browser nor through dev server. It uses JSDOM to abstract browser environment hence we depend on JSDOM implementation for real browser features.

Brief explanation of config

• we're using some "globals" to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ts-jest.
• "transform" – run every TS, JS, MJS, HTML, or SVG file through so called Jest transformer; this lets Jest understand non-JS syntax.
• "testEnvironment" – the test environment to run on.
• "moduleFileExtensions" – our modules are TypeScript (ts), HTML (html), JavaScript (js) and JSON (json) files.
• "moduleNameMapper" – if you're using absolute imports here's how to tell Jest where to look for them; uses regex.
• "snapshotSerializers" - array of serializers which will be applied to snapshot the code. Note: by default angular adds some angular-specific attributes to the code (like ng-reflect-*, ng-version="*", _ngcontent-c* etc). This package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable. To remove such specific attributes use no-ng-attributes serializer. You need to add no-ng-attributes serializer manually.