@danielkalen/mochawesome-report-generator NPM

mochawesome-report-generator (marge)

marge (mochawesome-report-generator) is the counterpart to mochawesome, a custom reporter for use with the Javascript testing framework, mocha. Marge takes the JSON output from mochawesome and generates a full fledged HTML/CSS report that helps visualize your test suites.

:tada: Latest Changes

Show before and after hooks alongside your tests
New menu option for fine-tuning how hooks display

See the CHANGELOG for up-to-date changes.

Features

All-new redesigned and streamlined report
At-a-glance stats including pass percentage
Beautiful charts
Support for nested describes
Supports pending tests
Filter view by test type
Quick navigation menu
Review test code inline
Stack trace for failed tests
Inline diffs for actual vs expected results
Responsive and mobile-friendly
Supports displaying additional test context
Custom report options
Offline viewing
CLI for generating reports independent of mochawesome

Browser Support

Tested to work in Chrome. Should work in any modern web browser including IE9+. marge generates a self-contained report that can be viewed offline.

Sample Report

Usage

via CLI

Install mochawesome-report-generator package

npm install -g mochawesome-report-generator

Run the command

marge [options] data_file [data_file2 ...]

via Mochawesome reporter

See mochawesome docs.

Output

marge generates the following inside your project directory:

mochawesome-report/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── MaterialIcons-Regular.woff
│   ├── MaterialIcons-Regular.woff2
│   ├── roboto-light-webfont.woff
│   ├── roboto-light-webfont.woff2
│   ├── roboto-medium-webfont.woff
│   ├── roboto-medium-webfont.woff2
│   ├── roboto-regular-webfont.woff
│   └── roboto-regular-webfont.woff2
└── mochawesome.html

CLI Options

marge can be configured via command line flags

Flag	Type	Default	Description
-f, --reportFilename	string		Filename of saved report
-o, --reportDir	string	cwd/mochawesome-report	Path to save report
-t, --reportTitle	string	mochawesome	Report title
-p, --reportPageTitle	string	mochawesome-report	Browser title
-i, --inline	boolean	false	Inline report assets (scripts, styles)
--charts	boolean	true	Display Suite charts
--code	boolean	true	Display test code
--autoOpen	boolean	false	Automatically open the report
--overwrite	boolean	true	Overwrite existing report files. See notes.
--timestamp, --ts	string		Append timestamp in specified format to report filename. See notes.
--dev	boolean	false	Enable dev mode (requires local webpack dev server)
-h, --help			Show CLI help

Boolean options can be negated by adding --no before the option. For example: --no-code would set code to false.

Overwrite

By default, report files are overwritten by subsequent report generation. Passing --overwrite=false will not replace existing files. Instead, if a duplicate filename is found, the report will be saved with a counter digit added to the filename. (ie. mochawesome_001.html).

Note: overwrite will always be false when passing multiple files or using the timestamp option.

Timestamp

The timestamp option can be used to append a timestamp to the report filename. It uses dateformat to parse format strings so you can pass any valid string that dateformat accepts with a few exceptions. In order to produce valid filenames, the following replacements are made: