Using Mocha Reporter for prettier tests in Angular

This short tutorial will learn how to use Mocha reporter to make our Angular tests prettier and more readable. Who doesn't want to read prettier texts and thus it goes same for tests too. The output which we get in the terminal is too jumbled when any tests fail, and thus the Mocha reporter comes to the rescue to show it in a nice and prettier manner.

Let's say I have three tests running and one of them failed, so the output which I will get in my terminal is :

Now, this is ok for many, but what if we have a much nicer way to show it. So let's take the same example and see how Mocha Reporter shows us the result  

As you can see above now we get a much better view of the result of the tests, courtesy of Karma Mocha Reporter

To add the Mocha Reporter install it from npm using the command npm install -D karma-mocha-reporter and then add the reporter to the plugin inside karma.conf.js as shown below:

plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage-istanbul-reporter'),
  require('@angular-devkit/build-angular/plugins/karma'),
  require('karma-mocha-reporter')
 ],

And then change the reporters to the below line,

reporters: ['mocha', 'kjhtml']

So, now when you run the ng test you will get much nicer tests to result. You can customise other options according to your need like changing colours, symbols of success or failure.