As jest is increasingly gaining traction in unit testing angular components lets see how to integrate it with latest angular versions (12+)
uninstall jasmine & karma using
npm uninstall -D @types/jasmine jasmine jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter ts-nodeinstall jest using
npm i -D @types/jest jest jest-preset-angular @angular-builders/jestcreate file
setupJest.tsin root and add below content
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'jest-preset-angular';
import 'zone.js';
import 'zone.js/testing';
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true },
}
);
Object.defineProperty(window, 'CSS', { value: null });
Object.defineProperty(window, 'getComputedStyle', {
value: () => {
return {
display: 'none',
appearance: ['-webkit-appearance']
};
}
});
Object.defineProperty(document, 'doctype', {
value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
}
});
If you are migrating from lower angular version using
ng upgradethen except above piece of code if you are using any other piece of code insrc/test.tsfile then add that new content tosetupJest.tsand deletesrc/test.tscreate file
jest.config.jsin root and add below content
module.exports = {
preset: 'jest-preset-angular',
roots: ['<rootDir>/src'],
testMatch: ['**/+(*.)+(spec).+(ts)'],
collectCoverage: true,
coverageReporters: ['html', 'lcov', 'json', 'text'],
coverageDirectory: '<rootDir>/coverage',
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
};
- replace
testpart ofangular.jsonwith below content
...
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"main": ["setupJest.ts"],
"tsConfig": "src/tsconfig.spec.json",
"no-cache": true
}
}
...
- add
"esModuleInterop": truetocompilerOptionsintsconfig.json - open
tsconfig.spec.jsonand replacejasminewithjestintypesfield
That's it jest is now comlpetely integrated with latest angular 👏 💥
Thanks for reading 👍 and post any issue if you faced while doing so in comments below 👇
You can find the example repo here
Top comments (0)