Angular 2: Better Unit Tests Reporting with karma-mocha-reporter

From our post "Setting up new Angular 2 project with Angular CLI", we have already started an Angular 2 project, which can run unit tests via Karma. Those unit tests can be done in our application by running the command ng test in the project directory. Karma displays the test results in the console.

The default tests reporter used by Karma is the progress reporter. It displays the number of success/failed tests with execution time, which is OK. But when it comes to reporting failed tests, the errors reported (including call stacks) can get very long and it can be difficult to track down what the errors are.

With Karma, we can change the reporting-tool to make results more readable and easier for us to see which tests have failed. The reporting-tool we came across is karma-mocha-reporter, which is a Mocha-style reporter. 

It displays the summary of all the expectations, grouped by test suites (describe blocks), with nice, colored tests results. It is more readable as we can now also see the description of all the tests.

Failed tests are displayed in the summary.

Installing karma-mocha-reporter

We can install karma-mocha-reporter via npm.

$ npm install --save-dev karma-mocha-reporter

Next, we have to update Karma's configuration in config/karma.conf.js.
To do so, first, add require('karma-mocha-reporter') in plugins

plugins: [
    require('karma-jasmine'),
    require('karma-chrome-launcher'),
    require('karma-mocha-reporter')     // add this line
],

Then in reporters option, change progress to mocha

reporters: ['mocha'],

And run ng test again. Now we have Mocha-style tests report which provide good tests summary and more readable output. 

We still have long call stacks for failed tests, but it is a bit more readable than the default one.

We can change output style of logged report by setting mochaReporter option in config/karma.conf.js file. For example, to disable full call stacks of failed tests, we can set mochaReporter.output to noFailures like so.

mochaReporter: {
    output: 'noFailures'
},

Then we have even cleaner tests report.

I hope you find this useful. Let us know what reporter you or your team are using and the challenges you may be facing.