Angular CLI: “ng test” with Jest in 3 minutes

Hey folks.

Today I’m going to show you how to setup your Angular CLI workspace to work with Jest while keeping it clear of boilerplate code.

I’m not going to explain why you should choose Jest over Karma, assuming you already did that choice, however I will give you a link to an article that explains the reasons.

So let’s get started!

Setting up Jest

• Remove Karma related stuff:

npm remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
rm ./karma.conf.js ./src/test.ts

• Install @angular-builders/jest and jest:

npm i -D jest @types/jest @angular-builders/jest

• Update your Typescript configurations: In tsconfig.spec.json (root directory or project roots, used by Jest):

  1. Replace jasmine in types array with jest You want your tests to be type-checked against Jest typings and not Jasmine

  2. Remove test.ts from files array This file was responsible for Karma setup, you don’t need it here anymore

  3. Add emitDecoratorMetadata: true in compilerOptions (here is why you need this)

In tsconfig.json (root directory, used by IDE):

• Add jest to types array Although you run your unit tests with Jest, Protractor (e2e tests) still has to use Jasmine. Due to this fact it’s possible that you favorite IDE will get confused with the typings and will propose you Jasmine types in unit tests. tsconfig.json is the config file that your IDE uses so you have to instruct it explicitly to use Jest typings. Bear in mind that the other side of the coin is that your IDE will propose you Jest types in your e2e tests.

• In angular.json change @angular-devkit/build-angular:karma to @angular-builders/jest:run:

"projects": {
    ...
    "[your-project]": {
         ...
         "architect": {
                ...
                "test": {
                          "builder": "@angular-builders/jest:run"
                          "options": {
                                ... //see here
                          }

This is it, now you can run your tests with Jest.

Running the tests with Jest

• To run the tests: ng test

• You can specify Jest CLI options either in builder options (useful when it is a persistent config) or pass it right to ng test as a parameter (useful when it is a one-timer). For example to run a single test:

ng test --test-name-pattern="My test suite My test case"

Multi-projects workspace

The builder supports multi-projects workspaces by default, the only thing you have to do is to modify each project's tsconfig.spec.json as described above. After you’ve done that ng test will run tests for all the projects. If you want to run tests for a specific project use ng test project-name .

Further reading

If you’d like to learn more about builders and even considering creating one of your own check out this article. Follow me if you liked the article, comment/send a message here or DM on Twitter if you have any questions.