Juri Strumpflohner Follow Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops.

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

Change the default progress reporter to a nicer looking Mocha reporter

Feb 14, 2018 2 min read

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

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:

Karma output using the progress reporter

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” 😃

View on Egghead.io

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:

Tests executed with the Karma Mocha reporter