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
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.
- JavaScript
- TypeScript
// 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',
},
};
// jest.config.ts
import type { Config } from 'jest';
const jestConfig: Config = {
//...
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/src/app/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^environments/(.*)$': '<rootDir>/src/environments/$1',
},
};
export default jestConfig;
Processing with esbuild
Since v11.0.0, jest-preset-angular
introduced the usage of esbuild
to process files besides TypeScript API. By default, all .mjs
files
will be processed by esbuild
in jest-preset-angular
. To configure extra files to process with esbuild
, one can do the following:
- JavaScript
- TypeScript
// jest.config.js
module.exports = {
//...
globals: {
ngJest: {
processWithEsbuild: [<glob_to_files>],
},
},
}
// jest.config.ts
import type { Config } from 'jest';
const jestConfig: Config = {
//...
globals: {
ngJest: {
processWithEsbuild: [<glob_to_files>],
},
},
}
export default jestConfig;
Exposed configuration
- JavaScript
- TypeScript
// jest.config.js
const snapshotSerializers = require('jest-preset-angular/build/serializers');
module.exports = {
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
snapshotSerializers,
testEnvironment: 'jsdom',
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
};
// jest.config.ts
import type { Config } from 'jest';
import snapshotSerializers from 'jest-preset-angular/build/serializers';
const jestConfig: Config = {
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
snapshotSerializers,
testEnvironment: 'jsdom',
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
};
export default jestConfig;
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 configuration to use for code compilation withts-jest
. "moduleFileExtensions"
– our modules are TypeScript (ts
), HTML (html
), JavaScript (js
), JSON (json
) and ESM JavaScript (mjs
) files."moduleNameMapper"
– if you're using absolute imports here's how to tell Jest where to look for them; usesRegExp
."resolver"
- instruct Jest how to resolve entry file based onpackage.json
definitions."snapshotSerializers"
- array of serializers which will be applied to snapshot the code. Note: by default angular adds some angular-specific attributes to the code (likeng-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 useno-ng-attributes
serializer. You need to addno-ng-attributes
serializer manually."testEnvironment"
– the test environment to run on."transformIgnorePatterns"
: instruct Jest to transform any.mjs
files which come fromnode_modules
."transform"
– run everyTS
,JS
,MJS
,HTML
, orSVG
file through so called Jest transformer; this lets Jest understand non-JS syntax.