Installation
Dependencies
You can install jest-preset-angular
and dependencies all at once with one of the following commands.
- npm
- Yarn
- pnpm
npm install -D jest jest-preset-angular @types/jest
yarn add --dev jest jest-preset-angular @types/jest
pnpm add -D jest jest-preset-angular @types/jest
Configuration
Angular doesn't support native async/await
in testing with target
higher than ES2016
, see https://github.com/angular/components/issues/21632#issuecomment-764975917
In your project root, create setup-jest.ts
file with following contents:
// setup-jest.ts
import 'jest-preset-angular/setup-jest';
Add the following section:
- to your root Jest config
- JavaScript
- TypeScript
// jest.config.js
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
// jest.config.ts
import type { Config } from 'jest';
const jestConfig: Config = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
export default jestConfig;
Adjust your tsconfig.spec.json
to be:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"module": "CommonJs",
"types": ["jest"]
},
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
Adjust scripts
part your package.json
to use jest
instead of ng
, e.g.
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
}
Customizing
Global mocks
jest-preset-angular
uses JSDOM
which is different from normal browsers. You might need some global browser mocks to
simulate the behaviors of real browsers in JSDOM
. To add global mocks, you can do the following:
- Create a file
jest-global-mocks.ts
to your root project. - Import it in your global setup file:
// Assuming that your global setup file is setup-jest.ts
import 'jest-preset-angular/setup-jest';
import './jest-global-mocks';
An example for jest-global-mocks.ts
Object.defineProperty(document, 'doctype', {
value: '<!DOCTYPE html>',
});
Object.defineProperty(window, 'getComputedStyle', {
value: () => {
return {
display: 'none',
appearance: ['-webkit-appearance'],
};
},
});
/**
* ISSUE: https://github.com/angular/material2/issues/7101
* Workaround for JSDOM missing transform property
*/
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true,
};
},
});
Avoid karma conflicts
By Angular CLI defaults you'll have a src/test.ts
file which will be picked up by jest. To circumvent this you can either rename it to src/karmaTest.ts
or hide it from jest by adding <rootDir>/src/test.ts
to jest testPathIgnorePatterns
option.