
From our post "Setting up new Angular 2 project with Angular CLI", we have already started an Angular 2 project, which can run unit tests via Karma. Those unit tests can be done in our application by running the command ng test
in the project directory. Karma displays the test results in the console.
The default tests reporter used by Karma is the progress
reporter. It displays the number of success/failed tests with execution time, which is OK. But when it comes to reporting failed tests, the errors reported (including call stacks) can get very long and it can be difficult to track down what the errors are.
With Karma, we can change the reporting-tool to make results more readable and easier for us to see which tests have failed. The reporting-tool we came across is karma-mocha-reporter, which is a Mocha-style reporter.
It displays the summary of all the expectations, grouped by test suites (describe
blocks), with nice, colored tests results. It is more readable as we can now also see the description of all the tests.
Failed tests are displayed in the summary.
Installing karma-mocha-reporter
We can install karma-mocha-reporter via npm.
$ npm install --save-dev karma-mocha-reporter
Next, we have to update Karma's configuration in config/karma.conf.js
.
To do so, first, add require('karma-mocha-reporter')
in plugins
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-mocha-reporter') // add this line
],
Then in reporters option, change progress to mocha
reporters: ['mocha'],
And run ng test
again. Now we have Mocha-style tests report which provide good tests summary and more readable output.
We still have long call stacks for failed tests, but it is a bit more readable than the default one.
We can change output style of logged report by setting mochaReporter
option in config/karma.conf.js
file. For example, to disable full call stacks of failed tests, we can set mochaReporter.output
to noFailures
like so.
mochaReporter: {
output: 'noFailures'
},
Then we have even cleaner tests report.
I hope you find this useful. Let us know what reporter you or your team are using and the challenges you may be facing.