Mochawesome

A Gorgeous HTML/CSS Reporter for Mocha.js

Interesting, tell me more.

Mochawesome is a custom reporter for the testing framework, mocha. It generates a full fledged HTML/CSS report that helps visualize your test suites.

Mochawesome Screenshot

Features

  • At-a-glance stats including pass percentage
  • Beautiful charts
  • Support for nested describes
  • Supports pending tests
  • Filter view by test type
  • Review test code inline
  • Stack trace for failed tests
  • Responsive and mobile-friendly
  • Saves JSON output for further processing
  • Offline viewing

Awesome! How do I use it?

Using Mochawesome is easy and it only takes a few steps to get up and running.

1. Add Mochawesome to your project

$ npm install --save-dev mochawesome

2. Tell mocha to use the Mochawesome reporter

$ mocha testfile.js --reporter mochawesome

3. If using mocha programatically:

var mocha = new Mocha({reporter: 'mochawesome'})

Options

Mochawesome supports options via environment variables or passed in to mocha via mocha's --reporter-options flag. You can change both the location where reports are saved and the filename of the report. Setting a custom filename will change both the report html and json files.

Options passed in will take precedence over environment variables.

Environment Variables

$ export MOCHAWESOME_REPORTDIR=customReportDir
$ export MOCHAWESOME_REPORTNAME=customReportName

Mocha Options

$ mocha test.js --reporter mochawesome --reporter-options reportDir=customReportDir,reportName=customReportName
var mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'customReportDir',
      reportName: 'customReportName'
    }
});


Want to know more?

View Project on Github