Add Mocha reporter for Karma unit tests to your Angular CLI project

When you run the tests on a fresh Angular CLI setup using npm test (or ng test) you get a test run output similar to this:

This is ideal on the CI server or in those cases when you’re not really interested in the names of each single test case. I often however like to see the names of my test suites as well as single test names in a nicer format. The Karma Mocha reporter can help here.

Egghead.io Video Lesson

Lazy? Then check out my Egghead.io companion lesson on how to setup the Mocha reporter for your Karma tests” 😃

{% assign video_title = “Configure the Angular CLI to use the Karma Mocha test reporter” %} {% assign video_url = “https://egghead.io/lessons/angular-configure-the-angular-cli-to-use-the-karma-mocha-test-reporter" %} {% assign affiliate_client = “eggheadio” %} {% assign affiliate_uid = “lessons/angular-configure-the-angular-cli-to-use-the-karma-mocha-test-reporter” %} {% include video-banner.html %}

Install and configure the Mocha Reporter

First install the Karma Mocha reporter via npm or yarn.

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

Next, we need to adjust our karma.conf.js by adding the karma-mocha-reporter to the plugins section as configuring mocha as the reporter.

module.exports = function (config) {
  config.set({
    ...
    plugins: [
      ...
      require('karma-mocha-reporter'),
      ...
    ],
    ...
    reporters: ['mocha', ...],
    ...
  });
};

Final configuration and outcome

That was it, if you now execute your test, you’ll get a much nicer rendering: