Setup Jest in Angular 18

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",
    "module": "CommonJs",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.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:

module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    globalSetup: 'jest-preset-angular/global-setup',
};

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! 🧪