How to configure Jest in your Angular projects.

a Jest logo image

Hey Hey folks, how are you doing? In this article I want to discuss how you can configure Jest in your angular projects and why you should use it.

Let's start with why you should use Jest. Jest is a powerful JavaScript test framework with focus on simplicity. It works with a lot of frameworks, such as React, Vue and Angular. Below I list some reasons of why Jest is a good choice to use with Angular:

• Quickness and Efficiency: Jest is known for its execution speed. It optimizes the time of running tests by adopting techniques such as parallel tests execution that can be very helpful in Angular projects where the compilation time can be a challenge.
• Perfect integration with Angular: Jest works perfectly with the Angular ecosystem since it supports TypeScript and offers advanced features to test pipes, components, services, etc.
• Mocking: Jest offers advanced mocking features that simplify the process of simulate external dependencies in tests. This is extremely handy with Angular where components frequently rely on external services.
• Simple and intuitive syntax: The Jest syntax is straightforward and easy to understand which decreases the learning curve for new comers to the Angular framework.
• Good integration with CI/CD pipelines: Jest works great with CI/CD pipelines because it runs on a node environment in contrast with Karma that runs on a browser.

These are just a few reasons of why adopting Jest is a good choice. Now, let’s see how we can configure it on an Angular project.

To configure Jest, we’re going to work on four files, which are: angular.json, jest.config.ts, package.json and tsconfig.spec.json. Let’s start with the angular.json file. We need to change the test builder from Karma to Jest, and I will also remove the polyfills. Below, you can see the differences:

an image showing the changes on the angular.json configuration file.

Then you need to create a jest.config.js file. You can create this file in the root project tree. On it, we’re going to add the Jest preset and global configuration setup like below:

module.exports = {
  preset: 'jest-preset-angular',
  globalSetup: 'jest-preset-angular/global-setup',
};

After that, we’re changing the tsconfig.spec.json file to replace Jasmine with Jest. You can see the differences below:

an image showing the changes on the tsconfig.spec.json file.

Finally, we need to install the Jest and its dependencies and also remove karma and jasmine packages that we are not going to use anymore.

We can do that by using these commands:

// to install jest, @types/jest and @angular-builders/jest
npm install --save-dev jest @types/jest @angular-builders/jest

// to uninstall karma and jasmine packages
npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher 
karma-coverage karma-jasmine karma-jasmine-html-reporter

Just a small disclaimer, the version of the @angular-builders/jest package must match the version of your angular core, so if you’re not using the latest angular version, you need to run the npm command specifying your angular version, for example:

// to install @angular-builders/jest on an Angular v15 project
npm install --save-dev jest @types/jest @angular-builders/jest@15.0.0

To finish, we can remove the karma.conf.js and test.ts files and we are good to go! Now you have setup Jest to work in your angular project and can run your tests with it.

In conclusion, it’s pretty simple to configure Jest in an Angular project and I hope this little hands on article help you in your dev journey.

Best wishes and nice coding!!