How I do configure Jest to test my Angular 8 Project

Guide end-to-end to setup Jest on Angular and Remove old testing frameworks.

Photo by Blake Connally on Unsplash

This article is up-to-date for configure Jest to Angular 8 project. I hope it is helpful to Angular developer who want to use Jest for their application.

For more content like this, check out https://betterfullstack.com

Why I am using Jest

Personally, I am using Jest for only 2 reasons:

I can run it on command line so it is easy to integrate with git hooks. I can do snapshot for my screen and easy to have coverage report.

But you can look at [5] and [6] at Resources / References for more pros and cons when using Jest.

Setup Project

Following the guides on Angular.io to setup project.

Adding Jest

To use Jest as our test runner we’re going to use jest-preset-angular. To get it up and running we simply have to follow the instructions in the README.

npm install -D jest jest-preset-angular @types/jest

Then create setupJest.ts file in the same root with package.json or inside src of main workspace.

setupJest.ts

The next step is adding jest configuration on package.json

package.json

I added testPathIgnorePatterns to avoid karma conflicts

By Angular CLI defaults you’ll have a src/test.ts file which will be picked up by jest. To circumvent this you can either rename it to src/karmaTest.ts or hide it from jest by adding <rootDir>/src/test.ts to jest testPathIgnorePatterns option.

You can see when setup default angular project by angular-cli the ts.config.json and ts.config.spec.json are at the same root with package.json but jest-preset-angular put it inside src folder.

Exposed configuration from jest-preset-angular

We have to overwrite <rootDir>/src/tsconfig.spec.json for global jest configuration on package.json.

"jest": {

... "globals": { "ts-jest": { "tsConfig": "<rootDir>/tsconfig.spec.json" } } },

If you get this issue. It means your typeRoots is not right

Terminal - Error cannot find name describe

Now we run add script to package.json

"scripts": {

... "test": "jest" },

and run npm run test.

Then we get this error

Terminal - Failed to load html and css

The root cause is now we run test in non-CLI environment. You can read more at here.

So how to fix it?

If you choose to overide jest-preset-angular in order to point at a specific tsconfig, you will need to add astTransformers section too, otherwise you will get parse errors on any html templates like:

package.json

Otherwise you will get parse errors on any html template urland style template url

Error : This test module uses the component AppComponent which is using a "templateUrl" or " styleUrls ", but they were never compiled. Please call "TestBed.compileComponents" before your test.

You should add commonjs to tsconfig.spec.json this error will fix automatically since Angular released v6, the default tsconfig.json and tsconfig.spec.json have been changed. Therefore, jest will throw an error like:

Error: connect ECONNREFUSED 127.0.0.1:80

If we re-run the tests, everything should still turn up green.

Terminal - Run test successful

But in the console now there is a warning and I want to clear it out. Because it is deprecated on jest document. So change it to:

“setupFilesAfterEnv”: [“<rootDir>/setupJest.ts”]

Now the console is more clearer

Terminal - Fix the warning message

Remove Karma devDependencies

Here the package.json look like now

full package.json

So from the package.json we can see list of test libraries that we don’t need anymore.

"@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3" "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "jest": "^24.8.0", "jest-preset-angular": "^7.1.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0",

So now I will remove it out of devDependencies:

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter protractor

The next is remove some files like karma.config.js and src/test.ts

Then remove test entry inside angular.json, e2e folder and src/test.ts from files inside tsconfig.spec.json

Now we run the test again to see the result and enjoy.

Here is my final source code.

Resources / References

[1]: Setting up the Local Environment and Workspace https://angular.io/guide/setup-local

[2]: Configuring Jest https://jestjs.io/docs/en/configuration

[3]: Jest Preset Angular library https://github.com/thymikee/jest-preset-angular

[4]: Calling compileComponents() https://angular.io/guide/testing

[5]: 8 Things That Make Jest the Best React Testing Framework https://code.tutsplus.com/tutorials/8-things-that-make-jest-the-best-react-testing-framework--cms-30534

[6]: Reasons to Love Jest https://itnext.io/reasons-to-love-jest-the-developer-experience-b00ec93df7bb