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

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.

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!