How to get better test reports in the console?

Question

I have a fairly simple karma.config.js file

basePath = '../';


files = [
  JASMINE,
  JASMINE_ADAPTER,
  'js/lib/angular*.js',
  'test/lib/angular/angular-mocks.js',
  'js/**/*.js',
  'test/unit/**/*.js'
];

autoWatch = true;
browsers = ['PhantomJS'];

When I run karma start config/karma.conf.js --single-run I'm getting the following output

$ karma start config/karma.conf.js --single-run
[2013-06-24 23:47:08.750] [DEBUG] config - autoWatch set to false, because of singleRun
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9 (Mac)]: Connected on socket id LwMoWxzIbSUuBsvIqB_m
PhantomJS 1.9 (Mac): Executed 6 of 6 SUCCESS (0.073 secs / 0.02 secs)

I've been searching for something to tell me how to get the output of the tests that get logged (e.g. SUCCESS Unit: services myService should behave)

The only way I can see the output of the tests is to open Chrome and click 'Debug', then show the developer tools console. I want the messages to be logged out to the terminal, but I cannot figure out how to get this working.

Answer 1

Fixed by installing the karma-spec-reporter

npm install karma-spec-reporter --save-dev

and adding this my karma.config.js

reporters: ['spec'],

According to karma documentation

By default, Karma loads all NPM modules that are siblings to it and their name matches karma-*.

but some users have had to add the following to their config

plugins: ['karma-spec-reporter']

Answer 2

Just another detail - if you keep the default reporter 'progress' in the karma.config.js, like below:

reporters: ["progress", "spec"]

or another console reporter, the "spec" reporter output won't work.

You should keep only the "spec" one, or the "spec" with other browser reporters. For example:

reporters: ["spec", "coverage"]

Answer 3

I wrote a reporter to make the output more readable: karma-helpful-reporter

Has some nice customization options: https://github.com/whyboris/karma-helpful-reporter

Instal instructions inside, basically npm install --save-dev karma-helpful-reporter and then add to the Karma configuration plugins section:

plugins: [ 
  require('karma-helpful-reporter')
],
reporters: [ 'helpful' ],

Answer 4

You can also use the Karma-mocha-reporter as reporter and you should have a clean report in your console.

npm i karma-mocha-reporter --save-dev

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],

    // reporters configuration
    reporters: ['mocha']
  });
};

Sometimes, e.g in @angular/cli environment you should require this like:

plugins: [
   ...
   require('karma-mocha-reporter'),
   ...
]

Answer 5

Here is my working (draft) configuration without the section 'plugins' (actually I don't fully understand why I should need to specify them ...):

package.json

  "devDependencies": {
    [...]
    "grunt-karma": "~0.9.0",
    "karma": "~0.12.24",
    "karma-jasmine": "~0.2.3",
    "karma-chrome-launcher": "~0.1.5",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-spec-reporter": "0.0.13"
  }

karma.conf.js

module.exports = function (config) {
    config.set({
        frameworks: ['jasmine'],
        reporters: ['spec'],
        browsers: ['PhantomJS']
    });
};

Gruntfile.js

    karma: {
        options: {
            configFile: 'karma.conf.js',
            files: [
                'app/libs/angular.js',
                'app/libs/angular-resource.js',
                'app/libs/angular-route.js',
                [...] 
                'app/modules/**/*-spec.js'
            ]
        },
        unit: {
            singleRun: true
        }
    }

Now when I run grunt karma messages from the *-spec.js files (describe('message', function() ...)) are displayed nicely in the console.