Improved debugging of Angular component tests in Jest

with @angular-extensions/pretty-html-log

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Good tests are the backbone of every application. They are crucial to the success of our project. Therefore it’s no surprise that Angular is designed with testing in mind and provides us with a lot of testing utils.

By default, the Angular CLI generates a project with Karma as a test runner and Jasmine as a testing framework. However, today, many people move away from this default stack and start to use Jest.

There are various motivations to do so. Most commonly, it’s due to better performance and stability. Jest is way faster than Karma. It can run tests in parallel and doesn’t have to start a browser because it uses a JavaScript implementation of a DOM called jsdom.

Whilejsdom is fast, it also impedes debugging.

If you are curious on how to setup an Angular library project with Jest I recommend you the following read: