How to add Mocha reporter to Angular in less than two minutes
- Angular Testing
- Karma Testing
Using the Mocha reporter to make your Angular tests prettier and more readable.
Some Angular developers grumble about the jumbled output that appears in the terminal when they test their Angular applications.
They want a nicer report that's easier to understand at a glance....
Karma Mocha Reporter to the rescue!
Once installed and configured, here's what the outputs will look like.
1. Install Mocha Reporter.
If you use NPM then here's the command to install the Karma Mocha Reporter and add it to your Angular application as a dev dependency.
npm install -D karma-mocha-reporter
Or, if you're a yarn guy, then here's how to install Karma Mocha Reporter with yarn.
yarn add -D karma-mocha-reporter
2. Add the reporter to your
Once installed, open the
karma.conf.js file inside of your Angular application.
At the top of the page you'll see a list of plugins that the Karma tester uses. You'll want to require the new
karma-mocha-reporter plugin here. Like this.
plugins: [ ... require('karma-mocha-reporter') ],
And last of all, find the reporters line and change it from this...
reporters: ['progress', 'kjhtml'],
reporters: ['mocha', 'kjhtml'],
ng test and BOOM! You'll see the new output results.
And that's how to add the Mocha reporter to your Angular application in less than two minutes.