Creating Beautiful Test Output from Mocha Tests using Mochawesome

Note:

This walk-through assumes that you are using mocha with puppeteer to run some sort of test(s). If you need a quick run-through of how to get that set up, check out this guide.

This is what’s up.

There are some interesting test reporters built into mocha that you can choose from when using puppeteer. There are plain ones like the default.

spec

And there is actually a nyancat one. Not the most useful, but kitties and rainbows, need I say more?

nyan
Nyan reporter test output

Today we’re going to use mochawesome. Mochawesome is a very easy-to-use but also easily configurable test reporter written well by Adam Gruber.

Check it out on Github

mochawesome Github page screenshot

Getting Started

First add the npm package to your project using yarn add mochawesome.

Wait for that to finish and then add a mocha.opts file in your test folder. Mocha will look here for different arguments to pass along. Open up mocha.opts and add --reporter=mochawesome to tell mocha to use mochawesome.

Run your test and you should see some output indicating that a html and a json file was saved.

If you navigate to that html file and open it using your browser then you should see a nicely formatted report.

mochawesome test output

You can even click on one or more of your test cases to see, directly in the report, what code was running when that test executed. That’s super helpful so that you don’t have to leave the report to see what may have caused it to fail.

Expanded test results with code showing

You can disable the json output or the html output and specify what the test output files should be named as well as the header of the test and the page itself can be named.

I really like this package and it saves you a lot of work if you would like to show your developers or QA team what’s passing and what’s failing.

jscottchapman

About the Author

jscottchapman

Leave a Comment:

%d bloggers like this: