20 November 2018: updated to Angular 7

Some months ago I discovered Jest, snapshot testing finally an easy way to test my html and get a nice feedback in Angular. From the first moment I was in love with this new way of testing. I had the opportunity to add it to a new project where I was just started to work on. The learning curve is easy if you come from Jasmine, almost the same syntaxt but more powerfull.

A pittfall to the use of snapshot testing is that you need to take in mind, that you analyse your failing html snapshots in depth, and not just accept the changes made over here. Also next to testing your html files you need still to test the logic also.

Next to jest you have another powerfull tool to speed up your testing and work on a test-driven way: WallabyJs.

The power of using seperated html templates and css with the templateUrl and styleUrls didn’t work with wallabyJs out of the box. If you want to use inline templating, no problem occurred. Searching for a solution and not found one. So I decided to take some time and write my own small library to use wallabyJs and Jest together.

In my example bellow I will use yarn, as I prefer it above npm!

How to start with it

Remove some obsolete dependencies, when we start to use jest ‘karma’ and ‘jasmine’ are obsolete.

yarn remove karma karma-chrome-launcher karma-cli karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter @types/jasmine @types/jasminewd2