This is a quick guide to setup Jest in your new Angular 10 application
1. Install Jest
npm install jest @types/jest jest-preset-angular --save-dev
2. Uninstall Karma
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter
3. Remove test from angular.json
Remove the test section from angular.json
, this section looks like the following:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
4. Remove karma.conf.js
and src/test.ts
files
5. Create setupJest.ts
file
This file should have the following:
import 'jest-preset-angular';
6. Modify tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jest",
"node"
]
},
"files": [
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
7. Modify package.json
file
Modify the test scripts to the following:
"test": "jest",
"test:coverage": "jest --coverage",
Add Jest configuration to the end of this file:
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/dist/"
],
"globals": {
"ts-jest": {
"tsConfig": "<rootDir>/tsconfig.spec.json",
"stringifyContentPathRegex": "\\.html$"
}
}
}
Top comments (15)
[03/2021] For remove warnings:
ts-jestconfig The option
tsConfig
is deprecated and will be removed in ts-jest 27, usetsconfig
insteadwhat do we do about this one?
write
tsconfig
in lower case, don't use camel case styleThank you for posting this article! I just upgraded an Angular 9 app to Angular 10 and was running into errors using Jest. I tweaked my Jest configurations using the steps in this post and everything worked like a charm.
I followed all the steps, i am getting below error:
zone-testing.js is needed for the async() test helper but could not be found.Please make sure that your environment includes zone.js/dist/zone-testing.js
Change your setupJest.ts file to import 'jest-preset-angular/setup-jest';
work for me. Thanks
Thank you! @saluce65
I don't know who you are, but thank you
Why src/test.ts you remove in step 4. but use in steps 6 and 7?
Thanks! I will remove it =)
There is a way of having the builder/executor test but using jest instead?
It's the ultimate solution, otherwise you need to put several npm scripts for all projects/libraries on your workspace
Very useful!
Thank you very much. I followed this guide for Angular: 12.2.8.
What version of Jest,@type/jest and jest-preset-angular is compatible with Angular 11?