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

Wanna keep up to date with the latest webdev stuff? Follow me on Twitter

Every Angular CLI generated project comes already with a test setup in place using Karma. I think the default "progress" test result report is not as nice however. So let's pimp it by using the much nicer-looking Mocha reporter .

Table of contents

• Egghead.io Video Lesson
• Install and configure the Mocha Reporter
• Final configuration and outcome

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”

Configure the Angular CLI to use the Karma Mocha test reporter

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:

If you enjoyed this post you might want to follow me on Twitter for more news around JavaScript and Angular or watch my Egghead.io video lessons.