To use Jest with an Angular project (instead of the default Karma + Jasmine setup), follow this structured guide to configure it properly.
Benefits
Faster test execution (especially with --runInBand and --watch).
Easier debugging (rich error messages).
Snapshot testing support.
Widely used in React and Node.js ecosystems
setup jest
> npm install -D jest jest-preset-angular @types/jest
>npm remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
Create 2 jest setup files
jest.config.js(javascript file)
In your project root, create /jest.config.js (.js javascript file) with the following contents.
(NOTE: The file name is reserved by jest, and jest looks up this file for configuration.)
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
setup-jest.ts
In your project root, create /setup-jest.ts with the following contents.
(INFO: You may change the filename with your preference as long as the file name is matched in the jest.config.js)
import 'jest-preset-angular/setup-jest';
Update files
tsconfig.spec.json (Original file created by 'ng new' command.)
(1) Change types from “jasmine” to “jest”.
(2) Remove files.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": ["jasmine"]
},
"files": ["src/test.ts", "src/polyfills.ts"],
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
The following is after the changes.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": ["jest"]
},
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
tsconfig.json
Add “esModuleInterop”: true in the CompilorOptions to remove a warning message. (See the warning message in Appendix)
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": ["es2018", "dom"],
"esModuleInterop": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"types": ["jest"]
}
package.json
Change the test script from ng test to jest
"scripts": {
"test": "ng test"
},==>"scripts": {
"test": "jest --coverage"
},
Remove 2 files
Remove “/src/test.ts” and “/karma.config.js”.
Run jest with coverage option
Run npm run test, which invokes the script “jest --coverage”
Remove test object from angular.json file
Another option to create jest config files
npx jest — init
"test": "jest --verbose",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"