How to Generate Awesome Mocha Reports with Mocha Awesome

In this article I show you how to generate HTML and JSON test result reports for MochaJS using Mocha Awesome.
Step 1. Clone the starter project
Use git to clone my starter repo into a new folder.
git clone https://github.com/mitchallen/autom8able-mochajs-starter.git mocha-awesome
cd mocha-awesome/
npm install
Run the default tests to make sure the install went okay:
npm test
Step 2. Install Mocha Awesome
Install the mochawesome package from npm as a dev dependency using the –save-dev flag.
npm install --save-dev mochawesome
Because it is only used for testing, it is saved as a dev dependency alongside mocha.
Step 3. Add a new test script to package.json
Edit package.json and add two new scripts after the basic test script:
"scripts": {
"test": "mocha",
"test:awesome": "mocha --reporter mochawesome || true",
"open:report": "open mochawesome-report/mochawesome.html"
},
The scripts do the following:
- test:awesome – the
--reporter
flag tells mocha to report the resuts to the mochawesome package - open:report – on a Mac this will open the generated report in a browser
I appended || true
to the awesome script because mochawesome would report a confusing exit failure if a test failed. This makes the output a little cleaner and less confusing.
Step 4. Run the tests with the reporter
The starter repo already has some code defined in src/index.ts and tests defined in test/smoke-test.js. So we can use that to generate a report.
To run the tests and generate a report, run the test:awesome script:
npm run test:awesome
The output should look like this:
> mocha --reporter mochawesome
smoke test
✓ should pass if mocha is working
createHelloWorld
✓ should return an object that is not null
HelloWorld
greeting property
✓ should have a greeting property
✓ should return default greeting if not set
✓ should return set value
✓ should return constructor greeting if set
greet method
✓ should have a greet method
Hello World!
✓ should be able to call greet method
Yo World!
✓ should be able to call greet method with new greeting
9 passing (10ms)
[mochawesome] Report JSON saved to ./mochawesome-report/mochawesome.json
[mochawesome] Report HTML saved to ./mochawesome-report/mochawesome.html
At the end of the output you will see that two reports were generated. One in JSON format and the other in HTML format.
A new folder for the test results will be created automatically. That assumes that who or what is running the tests has the rights to create a new folder under your project.
Step 5. Open the report in your browser
On a Mac you can do it like this:
open ./mochawesome-report/mochawesome.html
I also had you add a script for Mac users that wraps that call. To open the results in a browser using the script:
npm run open:report
Expand one of the results to see the test details.
Step 6. Add a failing test
To see how the report looks for a fail, add a failing test to test/smoke-test.js like this:
it('should fail', done => {
var hello = helloFactory.createHelloWorld();
hello.greeting = 'Yo World!';
hello.greet();
assert.fail('This test will fail too!');
done();
});
Run the test again to generate the report:
npm run test:awesome
To see how the reporter handles a failing test, find the fail and expand it. You should also see an indicator of how many tests failed in the header of the report.
Troubleshooting
- If mocha has trouble finding mochawesome, try installing them both globally
- If the report folder cannot be created, check the rights of who or what is running the tests
Conclusion
In this article you learned how to:
- Install a new mocha reporter (mochawesome)
- Add a test script to generate a report from mocha
- Open the report and expand the contents
- Write a script to open the report in a browser
- Fail a test to see how the reporter handles it
Related Articles
References
- mochawesome-report-generator (marge) [1]