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.
- Support for mocha's
--inline-diffs
option - 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.
- All-new redesigned and streamlined report
- At-a-glance stats including pass percentage
- Beautiful charts
- Support for nested
describe
s - 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
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.
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.
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
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. | |
--showHooks | string | failed | Set the default display mode for hooks |
--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
.
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.
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:
Characters | Replacement | Example | Output |
---|---|---|---|
spaces, commas | underscore | Wed March 29, 2017 | Wed_March_29_2017 |
slashes | hyphen | 3/29/2017 | 3-29-2017 |
colons | null | 17:46:21 | 174621 |
Further, if you pass the flag with no format string, it will default to isoDateTime
.