Setup Jest in Angular 18
Do you want to run tests faster? Are Karma and Jasmine taking too long to run, making you want to avoid testing anything? Well, one thing you can do is try the experimental Web Test Runner or you can use Jest.
Currently, I find that Jest is the best option because of its seamless integration with IDEs and its ability to automate test execution and debugging without interrupting my flow🪷.
In this guide, I will show you how to setup Jest in your Angular 18 application
Installing dependencies
The first thing that you need to do is install all the libraries that you will use to run Jest. To use Jest in Angular, you can either set it up with the Angular Jest Runner to run tests with ng test, or configure Jest separately and run tests with the jest command. I prefer not using the Angular Jest Runner because I find it simpler to configure and use Jest on its own.
npm install jest
@types/jest
@jest/globals
jest-preset-angular
–save-dev
Now you need to remove all the libraries related to Karma and Jasmine. Make sure to just have the libraries you actually have installed in your application.
npm uninstall karma
karma-chrome-launcher
karma-coverage
karma-jasmine
karma-jasmine-html-reporter
Finally, remove any files related to Karma, like the karma.conf.js and src/test.ts files.
rm ./karma.conf.js ./src/test.ts
Configure Jest
In order to run a test, the first thing that you need to configure is the TS Config file to include the types for Jest. Here is an example configuration you can use:
// tsconfig.spec.json
{
“extends”: “./tsconfig.json”,
“compilerOptions”: {
“outDir”: “./out-tsc/spec”,
“types”: [
“jest”,
“node”
]
},
“files”: [
“src/polyfills.ts”
],
“include”: [
“src/**/*.spec.ts”,
“src/**/*.mocks.ts”,
“src/**/*.d.ts”
]
}
After this, you need to add a setup-jest.ts that includes the preset for Angular.
import “jest-preset-angular/setup-jest”;
Now, create the jest.config.js and add the following:
const { pathsToModuleNameMapper } = require(‘ts-jest’);
const { paths } = require(‘./tsconfig.json’).compilerOptions;
/** @type {import(‘ts-jest/dist/types’).JestConfigWithTsJest} */
module.exports = {
preset: ‘jest-preset-angular’,
moduleNameMapper: pathsToModuleNameMapper(paths,
{ prefix: ‘<rootDir>’ }
),
setupFilesAfterEnv: [‘<rootDir>/setup-jest.ts’],
};
The last thing is to remove the test runner from the angular.json .
Run Jest
After completing these steps, you should be ready to update the scripts and run them. If you have many tests to migrate, you can use the following command to automate the migration:
npx jest-codemods
Finally, to run your tests, modify the package.json file to include the following scripts:
“test”: “jest”,
“test:coverage”: “jest –coverage”
And voila, once you run npm run test, you should see Jest executing your tests much faster.
In conclusion, setting up Jest in your Angular 18 app is a breeze and can really boost your testing game. By following this guide, you can easily switch from Karma and Jasmine to Jest, making your tests run faster and smoother. Enjoy the seamless integration and get more done with less hassle. Happy testing! 🧪
Configure Jest in Angular 18 was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.