Angular Testing Series: How to add Jest to Angular project smoothly?

How to add Jest to Angular project and why we should consider it?

Photo by National Cancer Institute on Unsplash

When we have a chance to participate in an Angular project from the very beginning, we probably have an impact on many architectural aspects. One of these aspects is the selection of an appropriate techniques and testing tools. In plethora of projects, the standard tool that comes with Angular is used: Karma and Jasmine.

However, it is important to realize that the choice of Test Runner is not limited to Karma. For some reasons, it is worth taking an interest in Jest.

What possible benefits does bring Jest to your project? 📘

• Faster experience and parallelized test runs out of box
• Various functionalities provided with Jest CLI that support work efficiency
• Simple faking, spying and mocking
• Built-in assertions and code coverage
• Typescript support

… and honestly, many more functionalities that you can read about in the documentation. Now, let’s focus on the practical aspect and purpose, which is adding JEST to your Angular project.

Install all required dependencies 🌱

If you choose npm as package manager in your project

npm install jest jest-preset-angular @types/jest --save-dev

or if yarn is your choice in the project

yarn add jest jest-preset-angular @types/jest --dev

Create a base configuration 🚧

Let’s create jest.config.js file in your project’s directory

Alternatively, you can provide above configuration in package.json,

{
  "jest": {
    "preset": "jest-preset-angular",
    "roots": ["<rootDir>/src/"],
    ....
 }
}

but I’m not fan of adding every configuration to package.json. It’s not scaled solution, and with adding other functionalities to a project, it can turn out to become a messy way.

Then, locate <root-dir>/src/test.ts file and replace its content entirely by the following code

In first (1) line, we import the appropriate ‘jest-preset-angular’ library. The rest is required to be able use JSDOM which is shipped with Jest.

Last thing, you need to do is small tsconfig.spec.json file modification

Line (6) is necessary to avoid the following warning

If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`).

Line (7) is needed for reflection over metadata in Jest runtime

Follow me on Twitter if you want to be updated about new great Angular and frontend stuff! 😄

Run test with Jest runner 🚗

Just type in command line jest and if everything has been set correctly, Jest perform test suits and prepare report

Moreover, the coverage as built-in functionality is generated in ./coverage directory

When you open index.html file in browser, you will see the basic report about project’s code coverage

Remove Karma runner 🍂

Last, but not least, is to leave cleanliness in project after the introduced improvement. If Jest become main test runner in our Angular project, Karma is no longer need. We can do that in a straightforward way

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

or if yarn is your choice in the project

yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

By default, Angular uses Karma to perform tests by configuration the appropriate builder in architect section in angular.json file. Now, it can be removed as no longer used.

"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": []
  }
}, // REMOVE ALL "test" section

Remember that if you previously used the ng test command to run your tests, this command won’t be available anymore. Now, your test will be fired by jest command.

Last step is karma.conf.js file deletion

Example 📕

I’ve included all the steps presented above in a specially prepared repository. Feel free to checkout and try how Jest integration with Angular works on your own.

marcinmilewicz/angular-testing

Follow me on Twitter if you want to be updated about new great Angular and frontend stuff! 😄

Angular Testing Series

This article is part of the Angular Testing Series, which is a collection of useful tips for testing in the Angular framework. This is the very first inaugural article to the series, so I would be grateful for feedback from you. Do not hesitate leave comments about you like or don’t.

I would be grateful also if you tell me what your consternation with Angular testing is, and I will be happy to prepare a pragmatic solution and assist you in.