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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

Use as follows:

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.
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';
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!

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

Sign up