Add Mocha reporter for Karma unit tests to your Angular CLI project
Change the default progress reporter to a nicer looking Mocha reporter
2 min read
2 min read
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.
Lazy? Then check out my Egghead.io companion lesson on how to setup the Mocha reporter for your Karma tests” 😃
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', ...],
...
});
};
That was it, if you now execute your test, you’ll get a much nicer rendering:
