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:

Migrate your Angular library to Jest

What are we going to learn? 👨‍🎓

We are going to explore how we can use the third party library @angular-extensions/pretty-html-log to improve debugging of component tests in an Angular / Jest setup.

A simple component test

Lets first get to the problem by looking at a sample application that displays Game of Thrones families.

Display Game of Thrones families inside different Angular material tabs

This code displays three different Angular material tabs. A tab for the Stark family, a tab for the Targaryen family, and one for the Lannister family. Each tab then displays the corresponding family members.