Steps to integrate of Jest & Babel with Angular 7+:
1. Run the following commands to install:
# Remove Jesmin/Karma
npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
npm uninstall jasmine @types/jasmine
rm ./karma.conf.js ./src/test.ts
# Install jest
npm install --save jest@24.9 @angular-builders/jest@7 @types/jest@24 jest-preset-angular@8
# Install babel
npm install --save-dev babel-jest babel-polyfill
npm install --save @babel/core @babel/preset-env @babel/preset-flow @babel/preset-typescript
2. On `package.json`, added the following code:
"scripts": {
...
...
"test": "ng test",
"test:watch": "jest --watch",
...
...
}
...
...
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"/setupJest.ts"
]
}
3. Also, updated the following on the `angular.json`:
...
...
"test": {
"builder": "@angular-devkit/build-angular:karma",
...
...
Replace with:
...
...
"test": {
"builder": "@angular-builders/jest:run",
...
...
4. Create the `
/setupJest.ts` with below content:
import 'jest-preset-angular';
5. Create the `
/babel.config.js` with below content:
module.exports = function(api) {
const presets = [
'@babel/preset-typescript',
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
],
'@babel/preset-flow'
];
return {
presets,
};
};
6. And, finally tried running the `ng-test` from a terminal, however, I was stuck with the following error (see picture below):
7. Eventually, managed to fix the issue by adding the file `
/src/jest.config.js` with below content:
module.exports = {
"transform": {
"^.+\\.(ts|js|html)$": "ts-jest",
"^.+\\.[t|j]sx?$": "babel-jest"
},
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
moduleNameMapper: {
'^src/(.*)$': '/src/$1',
'^app/(.*)$': '/src/app/$1',
'^assets/(.*)$': '/src/assets/$1',
'^environments/(.*)$': '/src/environments/$1',
},
transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
snapshotSerializers: [
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
};
Thereafter, ran `ng test` again and can see the test running thru.
I hope it helps!