mochawesome-report-generator (marge)

marge (m**ochawesome-report-ge**nerator) 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.

Features

• Simple, clean, and modern design
• Support for test and suite nesting
• Displays before and after hooks
• Review test code inline
• Stack trace for failed tests
• Support for adding context information to tests
• Filters to display only the tests you want
• Responsive and mobile-friendly
• Offline viewing
• CLI for generating reports independent of mochawesome

Usage with mochawesome

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'
   });

CLI Usage

Install mochawesome-report-generator package

npm install -g mochawesome-report-generator

Run the command

marge [options] data_file [data_file2 ...]

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

Options

CLI Flags

marge can be configured via the following command line flags:

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

reportFilename replacement tokens

Using the following tokens it is possible to dynamically alter the filename of the generated report.

• [name] will be replaced with the spec filename when possible.
• [status] will be replaced with the status (pass/fail) of the test run.
• [datetime] will be replaced with a timestamp. The format can be - specified using the timestamp option.

For example, given the spec cypress/integration/sample.spec.js and the following config:

{
  reporter: "mochawesome",
  reporterOptions: {
    reportFilename: "[status]_[datetime]-[name]-report",
    timestamp: "longDate"
  }
}

The resulting report file will be named pass_February_23_2022-sample-report.html

Note: The [name] replacement only occurs when mocha is running one spec file per process and outputting a separate report for each spec. The most common use-case is with Cypress.

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:

If you pass true as the format string, it will default to isoDateTime.

mochawesome reporter-options

The above CLI flags can be used as reporter-options when using the mochawesome reporter.

Use them in a .mocharc.js file:

module.exports = {
    reporter: 'node_modules/mochawesome',
    'reporter-option': [
        'overwrite=true',
        'reportTitle=My\ Custom\ Title',
        'showPassed=false'
    ],
};

or as an object when using mocha programmatically:

const mocha = new Mocha({
  reporter: 'mochawesome',
  reporterOptions: {
    overwrite: true,
    reportTitle: 'My Custom Title',
    showPassed: false
  }
});

Development

To develop locally, clone the repo and install dependencies. In order to test end-to-end you must also clone mochawesome into a directory at the same level as this repo.

You can start the dev server with npm run devserver. If you are working on the CLI, use npm run dev:cli to watch for changes and rebuild.

Running Tests

Unit Tests

To run unit tests, simply use npm run test. You can also run a single unit test with npm run test:single path/to/test.js.

Functional Tests

Functional tests allow you to run real-world test cases in order to debug the output report. First, start up the dev server in one terminal window with npm run devserver. Then, in another window, run the tests with npm run test:functional. This will generate a report that you can open in the browser and debug.

If you want to run a specific folder of functional tests: npm run test:functional path/to/tests

Or if you want to run a single test: npm run test:functional path/to/test.js

Or mix and match: npm run test:functional path/to/some/tests path/to/another/test.js

mochawesome-report-generator changelog

Unreleased

6.2.0 - 2022-03-25

Added

• Support adding video in context via data uri mochawesome #372

6.1.1 - 2022-03-05

Fixed

• Regression: prevent saving reports with duplicate .html or .json extensions when the reportFilename option includes the extension. #195

  6.1.0 - 2022-02-24

  Added

• reportFilename option: support replacement tokens ([name], [status], [datetime])

6.0.1 - 2021-11-05

Fixed

• Revert fsu dependency to 1.1.1 to fix an issue where report creation could fail with EBADF bad descriptor errors mochawesome #363

6.0.0 - 2021-11-03

Changed

• BREAKING Dropped support for Node<12
• Updated all dependencies to latest versions with the exception of dateformat which has moved to es modules
• Updated epilog function to use current year in copyright

Fixed

• Allow pending/skipped tests with context to be expanded mochawesome #337

5.2.0 - 2021-02-16

Changed

• Update dependency opener
• Replace custom duration formatting with pretty-ms mochawesome #322

5.1.0 - 2020-04-13

Changed

• Remove react dependencies

5.0.0 - 2020-04-10

Changed

• BREAKING Move react and react-dom to peer-dependencies

4.1.0 - 2019-12-18

Added

• Clicking icons in navbar enable quick filtering of single test type

4.0.1 - 2019-07-05

Changed

• Video links in context now support mediafragment uris mochawesome #287

4.0.0 - 2019-06-04

Changed

• Updated data validation to match mochawesome v4 changes
• Updated many components for accessibility
• Enhanced keyboard usage (tabbing / toggling)
• Updated all dependencies
• Implemented test fixtures for generating sample data
• Small design tweaks
• Allow suites to be collapsed
• Disable charts by default

3.1.5 - 2018-12-27

Changed

• Relaxed validation for timedOut property in Tests to provide better compatibility with Cypress #88

3.1.4 - 2018-10-05

Changed

• Added pending and skipped to TestState enum. #111

3.1.3 - 2018-07-18

Fixed

• Updated webpack config to correctly set devtool to false when building for production. #101

3.1.2 - 2018-04-20

Fixed

• Skip copying assets and rendering HTML when html option is false mochawesome #237

3.1.1 - 2018-01-28

Added

• Video links in context will render as <video> tags #87 (@NicholasBoll)

3.1.0 - 2018-01-08

Added

• New option: cdn. Set to true to load all report assets via CDN (unpkg.com). No assets will be copied to disk.
• New option: assetsDir. Use this to specify a custom location to save the report assets to.
• The CLI has been updated to support directories as agruments.
• New options: showPassed, showFailed, showPending, showSkipped. Use these to set the default state of the report filters.

Changed

• Excluded Mobx DevTools from production bundle
• Dropped ChartJS in favor of Chartist
• Dropped moment.js in favor of date-fns
• Use a top-level <Provider> component to make the report store available to all components

3.0.1 - 2017-12-01

No release is complete without a quick hotfix.

Fixed

• The transform-react-constant-elements babel plugin was causing one of the React components to be hoisted as a const when it should not have been. This caused React to throw an error and the whole report to fail to load. (https://github.com/adamgruber/mochawesome/issues/215)

3.0.0 - 2017-11-30

Added

• The report now displays a loading animation when loading and when toggling filters.
• The report version is now shown in the footer.
• Functional tests to make development a little easier

Changed

• BREAKING: mochawesome v3.0.0 introduces changes to its JSON output that are not backwards-compatible. As such, the report generator will not work with data created in older versions of mochawesome
• Options handling and file saving that was previously done in the reporter is now handled here where it makes more sense. In addition, support was added for the saveJson and saveHtml options.
• Improved perceived rendering. The report no longer shows just a blank screen when loading a large number of tests. Instead, the navbar stats and footer will be rendered along with a nice loading animation. In addition, the filter toggles are now more responsive when filtering over a large number of suites/tests.
• Nearly all components have been updated to use flexbox layout.
• Unnecessary component renders have been significantly reduced.
• Most dependencies have been updated to their latest versions.

2.3.2 - 2017-11-13

• Fix an issue where long test titles are truncated with no way to see the full title #65

2.3.1 - 2017-10-23

• Fix botched release

2.3.0 - 2017-10-23

• Add support for base64 images in test context [#60](https://github.com/adamgruber/mochawesome-report-generator/pull/60 - @gidztech

2.2.2 - 2017-07-07

• Fix an issue where actual/expected was being rendered in the CodeSnippet for non-diff code
• Fix an issue where the suite header was not being rendered for root suites with tests

2.2.1 - 2017-06-30

• Enable inline diff rendering when using CLI. #42

2.2.0 - 2017-06-29

Changed

• Render inline diffs when using mocha's --inline-diffs option #39
• Set the default option for how hooks should display via the showHooks option #41
• Add a new context display option for hooks which will only show hooks if they contain context #41

Fixed

• Don't apply syntax highlighting when context is an object and context.value is a string #40
• Various display issues #36 #38

2.1.1 - 2017-06-26

• Remove dangerouslySetInnerHTML from CodeSnippet component. #34

2.1.0 - 2017-06-08

• Add support for displaying before and after hooks

2.0.3 - 2017-05-09

• Add support for rendering context with undefined or null value

2.0.2 - 2017-04-25

• Update package.json to spec fsu to ^1.0.2 which fixes compatibility with node 4

2.0.0 - 2017-04-19

• Add support for multiple files via CLI
• New options: overwrite and timestamp
• BREAKING Change default reportFilename from mochawesome to same as input filename. (ie. running marge test/sample-data.json will yield mochawesome-report/sample-data.html)

1.1.2 - 2017-03-13

• Fix an issue where autoOpen did not work on Windows mochawesome #142
• Add autoOpen option to CLI

1.1.1 - 2017-02-20

• Fix an inconsistency between the diff output in the console and the diff output in the report mochawesome #142
• Fix an issue where the report assets would not get updated after upgrading package version. mochawesome #138
• Fix an issue where trying to copy text from code or context blocks would collapse the test. mochawesome #138
• Validate JSON input against schema before creating a report (CLI only)

1.1.0

• Greenkeeping
• Move some dependencies into devDependencies where they belong mochawesome #133

1.0.8 - 2017-02-16

• Only copy external assets if they do not already exist mochawesome #76

1.0.7 - 2017-02-15

• Fix an issue where test context could not be viewed if enableCode option was false. mochawesome #132
• Add an icon to indicate when a test has context

1.0.6 - 2017-01-31

• Layout and style fixes mochawesome #118

1.0.5 - 2017-01-30

• Layout and style fixes mochawesome #118 (Broken)

1.0.4 - 2017-01-23

• Add support for local image paths in context

1.0.3 - 2017-01-13

• Fix an issue preventing a working report when inlineAssets option is true mochawesome #109
• Restore autoOpen functionality

1.0.2 - 2016-12-27

• Transpile bin and lib for compatibility with node 4

1.0.1 - 2016-12-26

• Better url handling in context

1.0.0 - 2016-12-18

• Initial release