How to get a Mocha test results report of a node applicaton in HTML

Question

When I run the following command on my windows command line mocha --reporter spec > report.html I get something that I cannot really use in my browser.

[0m[0m
[0m  Routes[0m
  [32m  √[0m[90m all GET routes should be bound to a function [0m
  [32m  √[0m[90m all POST routes should be bound to a function [0m
  [32m  √[0m[90m should have one for creating CU [0m

[0m  Database[0m
  [32m  √[0m[90m should be online, connectable and the right one [0m[31m(156ms)[0m

[0m  HTTPS API[0m
[0m    authentication[0m
    [32m  √[0m[90m is mandatory [0m[31m(1109ms)[0m
[0m    entity[0m
    [32m  √[0m[90m lookup should work [0m[31m(172ms)[0m
    [36m  - creation should work[0m

[0m  Website[0m
[0m    pages[0m
    [32m  √[0m[90m should contain quite a few of them [0m
    [32m  √[0m[90m all of them should have internal links to existing pages [0m


[92m [0m[32m 8 passing[0m[90m (2s)[0m
[36m [0m[36m 1 pending[0m

I would like some output as shown in this example http://visionmedia.github.io/mocha/example/tests.html which actually combines documentation together with the test result. Just the test result would be enough for me.

All searches that I do tell me about code coverage to get html, but I don't want that for now. I only need a html report out of Mocha (testing my node application) that I can view in my browser. Of course I can make something myself, but this seems trivial so I expect somebody to have created a custom reporter.

Answer 1

I found the answer in mocha-unfunk-reporter. A mocha reporter without console funkyness and with html reporting capabilities.

Use as follows:

1. npm install mocha-unfunk-reporter If you installed Mocha globally, you need to install mocha-unfunk-reporter globally (add -g) as well otherwise you get a mocha invalid reporter error.

2. In your test.js add options to set styling to html with css colors or css classes. Use style css for the latter: process.env['mocha-unfunk-style'] = 'css';

3. Run mocha --reporter mocha-unfunk-reporter > unfunk.html

You'll get:

<span class="mw-plain"></span>
<span class="mw-accent">-></span> running <span class="mw-accent">4 suites</span>

   <span class="mw-accent">Routes</span>
      <span class="mw-plain">all GET routes should be bound to a function.. </span><span class="mw-success">ok</span>
      <span class="mw-plain">all POST routes should be bound to a function.. </span><span class="mw-success">ok</span>
      <span class="mw-plain">should have one for creating CU.. </span><span class="mw-success">ok</span>

   <span class="mw-accent">Database</span>
      <span class="mw-plain">should be online, connectable and the right one.. </span><span class="mw-success">slow</span><span class="mw-error"> (125ms)</span>

   <span class="mw-accent">HTTPS API</span>
      <span class="mw-accent">authentication</span>
         <span class="mw-plain">is mandatory.. </span><span class="mw-success">medium</span><span class="mw-warning"> (47ms)</span>
      <span class="mw-accent">entity</span>
         <span class="mw-plain">lookup should work.. </span><span class="mw-success">ok</span>
         <span class="mw-plain">creation should work.. </span><span class="mw-warning">pending</span>

   <span class="mw-accent">Website</span>
      <span class="mw-accent">pages</span>
         <span class="mw-plain">should contain quite a few of them.. </span><span class="mw-success">ok</span>
         <span class="mw-plain">all of them should have internal links to existing pages.. </span><span class="mw-success">ok</span>

<span class="mw-plain">-> </span><span class="mw-success">passed 12</span> of <span class="mw-accent">12 tests</span>, left <span class="mw-warning">1 pending</span> (282ms)

Exactly what I needed!

Answer 2

You can use mochawesome. It's efficient and outputs both JSON and elegantly styled HTML reports.

Since most of us have mocha installed globally, it's best to install mochawesome globally as well.

npm install -g mochawesome

and then just run:

mocha --reporter mochawesome

from your test directory.

Answer 3

Another option is using mochawesome: https://github.com/adamgruber/mochawesome

With the following script you can execute the tests (in the test/ folder) and view the results (in the report folder):

var Mocha = require('mocha'),
    fs = require('fs'),
    path = require('path'),
    open = require('open');

var mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'report',
      reportName: 'report',
    }
});

var testDir = './tests'

fs.readdirSync(testDir).forEach(function(file){
    mocha.addFile(
        path.join(testDir, file)
    );
});

mocha.run(function(failures){

  open(__dirname + '/report/report.html', 'chrome');

  process.on('exit', function () {
    process.exit(failures);
  });
});