HTML Test Reporting Tools Across JavaScript Test Runners
These packages generate visual HTML reports for JavaScript test suites, but they are tightly coupled to specific test frameworks. cucumber-html-reporter is designed for Cucumber.js, jest-html-reporters for Jest, and mochawesome paired with mochawesome-report-generator for Mocha. While they all aim to provide readable test results for teams and CI pipelines, their integration methods, data flows, and customization capabilities differ significantly based on the underlying test runner architecture.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
HTML Test Reporting Tools Across JavaScript Test Runners
Choosing the right test report tool depends heavily on which test runner your project uses. cucumber-html-reporter, jest-html-reporters, mochawesome, and mochawesome-report-generator all produce visual HTML outputs, but they integrate into your workflow in very different ways. Let's compare how they handle configuration, data flow, and customization.
š§© Test Runner Compatibility: The Primary Filter
The most important factor is your test framework. These tools are not interchangeable between runners.
cucumber-html-reporter works exclusively with Cucumber.js.
- It processes JSON files generated by Cucumber tests.
- Best for Behavior-Driven Development (BDD) workflows.
// cucumber-html-reporter: Programmatic usage after tests
const report = require('cucumber-html-reporter');
const options = {
jsonDir: './cucumber-reports',
reportPath: './cucumber-reports/report.html',
};
report.generate(options);
jest-html-reporters works exclusively with Jest.
- It runs as a internal reporter during the Jest process.
- Best for React and general JavaScript unit testing.
// jest-html-reporters: jest.config.js
module.exports = {
reporters: [
'default',
['jest-html-reporters', {
publicPath: './html-report',
filename: 'report.html'
}]
]
};
mochawesome works exclusively with Mocha.
- It captures test data and outputs JSON by default.
- Best for flexible Node.js testing setups.
# mochawesome: CLI flag during test run
mocha test.js --reporter mochawesome
# Outputs: ./mochawesome-report/mochawesome.json
mochawesome-report-generator works with Mochawesome JSON.
- It converts the JSON from
mochawesomeinto HTML. - Best for separating data collection from report rendering.
# mochawesome-report-generator: CLI command after tests
marge ./mochawesome-report/mochawesome.json
# Outputs: ./mochawesome-report/mochawesome.html
āļø Configuration & Setup: Config Files vs Scripts
How you configure these tools varies from simple config objects to separate build scripts.
cucumber-html-reporter requires a separate script.
- You run tests first, then run a Node script to generate the report.
- Gives you full control over when the report is built.
// cucumber-html-reporter: Custom script (generate-report.js)
const options = {
jsonDir: './reports',
reportPath: './reports/output.html',
brandTitle: 'My Project Tests'
};
require('cucumber-html-reporter').generate(options);
jest-html-reporters uses Jest configuration.
- You add it to the
reportersarray injest.config.js. - No extra scripts needed; it runs automatically with tests.
// jest-html-reporters: jest.config.js
module.exports = {
reporters: [
['jest-html-reporters', {
publicPath: './reports',
filename: 'jest-report.html',
openReport: true
}]
]
};
mochawesome uses Mocha CLI options.
- You pass the reporter name via command line flags.
- Configuration is often handled via
.mocharc.jsonor CLI args.
// mochawesome: .mocharc.json
{
"reporter": "mochawesome",
"reporter-options": {
"reportDir": "./mochawesome-report"
}
}
mochawesome-report-generator uses CLI or Programmatic API.
- You run the
margecommand after tests finish. - Can be scripted in
package.jsonscripts.
// mochawesome-report-generator: package.json script
{
"scripts": {
"test": "mocha --reporter mochawesome",
"report": "marge ./mochawesome-report/mochawesome.json"
}
}
š Data Flow: Direct HTML vs JSON Intermediate
Some tools generate HTML directly, while others use a two-step process with JSON in the middle.
cucumber-html-reporter reads existing JSON files.
- Cucumber tests must output JSON first (
--format json). - The reporter consumes these files to build the HTML.
# cucumber-html-reporter: Step 1 - Generate JSON
cucumber-js --format json --out features.json
# Step 2 - Generate HTML via script
node generate-report.js
jest-html-reporters generates HTML directly.
- Jest passes test results directly to the reporter.
- No intermediate JSON file is required for the HTML output.
// jest-html-reporters: Direct integration
// Jest handles data passing internally
// No manual JSON handling needed by developer
mochawesome generates JSON intermediate files.
- It focuses on capturing structured test data.
- HTML generation is left to the companion tool.
// mochawesome: Output structure
// Creates: mochawesome-report/mochawesome.json
// Contains: suites, tests, passes, failures
mochawesome-report-generator consumes JSON to make HTML.
- It takes the
mochawesomeJSON and renders it. - This allows you to keep the JSON for other tools too.
# mochawesome-report-generator: Conversion step
marge ./mochawesome-report/mochawesome.json --reportDir ./docs
# Creates: ./docs/mochawesome.html
šØ Customization & Theming: Branding Your Reports
Teams often want to add logos, titles, or custom colors to match their brand.
cucumber-html-reporter supports basic branding options.
- You can set
brandTitle,brandLogo, and colors in config. - Limited to the options exposed in the configuration object.
// cucumber-html-reporter: Branding config
const options = {
brandTitle: 'QA Team Report',
brandLogo: './assets/logo.png',
colors: {
pass: '#33cc33',
fail: '#ff0000'
}
};
jest-html-reporters supports inline assets and titles.
- You can define a custom title and logo path.
- Supports inline source code snapshots in the report.
// jest-html-reporters: Customization config
module.exports = {
reporters: [
['jest-html-reporters', {
pageTitle: 'Frontend Test Suite',
publicPath: './reports',
logo: './assets/company-logo.png'
}]
]
};
mochawesome supports context and metadata.
- You can add test context (like browser info) programmatically.
- Customization is mostly about the data captured, not the HTML style.
// mochawesome: Adding context in test
test('Login', function() {
this.test.context = { browser: 'Chrome' };
// This data appears in the JSON report
});
mochawesome-report-generator supports CLI theming flags.
- You can pass options like
--themeor--devduring generation. - Allows tweaking the look without changing test code.
# mochawesome-report-generator: CLI theming
marge ./mochawesome-report/mochawesome.json --theme dark --dev
# Generates report with dark theme and dev assets
š Summary: Key Differences
| Feature | cucumber-html-reporter | jest-html-reporters | mochawesome | mochawesome-report-generator |
|---|---|---|---|---|
| Test Runner | Cucumber.js | Jest | Mocha | Mocha (Companion) |
| Integration | Separate Script | Jest Config | CLI Flag | CLI Command |
| Output Type | HTML (from JSON) | HTML (Direct) | JSON (Data) | HTML (from JSON) |
| Setup Complexity | Medium | Low | Low | Medium |
| Customization | Config Object | Config Object | Test Context | CLI Flags |
š” The Big Picture
jest-html-reporters is the most streamlined option ā it lives inside your config and just works. Ideal for Jest users who want zero friction.
cucumber-html-reporter is the standard for Cucumber teams ā it turns BDD JSON into stakeholder-friendly HTML. Best for teams practicing Behavior-Driven Development.
mochawesome + mochawesome-report-generator offer the most flexibility ā separating data from view allows for complex pipelines. Perfect for Mocha users who need to archive JSON data alongside HTML reports.
Final Thought: Your choice is dictated by your test runner. If you are starting fresh, Jest with jest-html-reporters offers the smoothest experience. If you are committed to Mocha or Cucumber, their respective reporting tools are mature and reliable.
How to Choose: cucumber-html-reporter vs jest-html-reporters vs mochawesome vs mochawesome-report-generator
- cucumber-html-reporter:
Choose
cucumber-html-reporterif your project relies on Cucumber.js for behavior-driven development. It is a community-maintained tool that converts Cucumber JSON output into a structured HTML report. This package is best suited for teams that need to share test results with non-technical stakeholders who prefer visual feature maps over raw logs. Note that the official Cucumber organization now recommends@cucumber/html-formatter, so evaluate if you need community features versus official support. - jest-html-reporters:
Choose
jest-html-reportersif you are using Jest as your primary test runner and want a simple, integrated HTML report. It configures directly withinjest.config.js, requiring no separate post-test scripts. This tool is ideal for teams seeking minimal setup who want to open reports automatically after test runs. It works well for continuous integration pipelines where a single HTML artifact is preferred over JSON data. - mochawesome:
Choose
mochawesomeif you are running tests with Mocha and need a robust JSON report as the source of truth. It acts as the data collector, capturing test results, hooks, and context during execution. This package is essential for the Mocha ecosystem but does not generate HTML on its own in the standard workflow. Use this when you need to store test data for further processing or custom analysis before rendering. - mochawesome-report-generator:
Choose
mochawesome-report-generatoralongsidemochawesometo convert the generated JSON data into a visual HTML report. It is typically run as a separate step after tests complete, using the CLI commandmarge. This split approach allows you to generate multiple report formats from the same JSON data. It is the right choice if you want the rich visual features of Mochawesome without embedding rendering logic into the test run itself.
Popular Comparisons
README for cucumber-html-reporter
cucumber-html-reporter
Generate Cucumber HTML reports with pie charts
Available HTML themes:
['bootstrap', 'hierarchy', 'foundation', 'simple']
Preview of HTML Reports
Provide Cucumber JSON report file created from your framework and this module will create pretty HTML reports. Choose your best suitable HTML theme and dashboard on your CI with available HTML reporter plugins.
- Bootstrap Theme Reports with Pie Chart
- Hierarchical Feature Structure Theme Reports With Pie Chart
- Foundation Theme Reports
- Simple Theme Reports
Snapshot of Bootstrap Report
More snapshots are availble here
Install
npm install cucumber-html-reporter --save-dev
Notes:
- Latest version supports Cucumber 8
- Install
cucumber-html-reporter@5.5.0for cucumber version< Cucumber@8 - Install
cucumber-html-reporter@2.0.3for cucumber version< Cucumber@3 - Install
cucumber-html-reporter@0.5.0for cucumber version< Cucumber@2 - Install
cucumber-html-reporter@0.4.0for node version <0.12
Usage
Let's get you started:
- Install the package through npm or yarn
- Create an index.js and specify the options. Example of
bootstraptheme:
var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: 'test/report/cucumber_report.json',
output: 'test/report/cucumber_report.html',
reportSuiteAsScenarios: true,
scenarioTimestamp: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
},
failedSummaryReport: true,
};
reporter.generate(options);
//more info on `metadata` is available in `options` section below.
//to generate consodilated report from multi-cucumber JSON files, please use `jsonDir` option instead of `jsonFile`. More info is available in `options` section below.
Please look at the Options section below for more options
- Run the above code in a node.js script after Cucumber execution:
node index.js
For CucumberJS
This module converts Cucumber's JSON format to HTML reports.
The code has to be separated from CucumberJS execution (after it).
In order to generate JSON formats, run the Cucumber to create the JSON format and pass the file name to the formatter as shown below,
$ cucumberjs test/features/ -f json:test/report/cucumber_report.json
Multiple formatter are also supported,
$ cucumberjs test/features/ -f summary -f json:test/report/cucumber_report.json
Are you using cucumber with other frameworks or running cucumber-parallel? Pass relative path of JSON file to the
optionsas shown here
Options
theme
Available: ['bootstrap', 'hierarchy', 'foundation', 'simple']
Type: String
Select the Theme for HTML report.
N.B: Hierarchy theme is best suitable if your features are organized under features-folder hierarchy. Each folder will be rendered as a HTML Tab. It supports up to 3-level of nested folder hierarchy structure.
jsonFile
Type: String
Provide path of the Cucumber JSON format file
jsonDir
Type: String
If you have more than one cucumber JSON files, provide the path of JSON directory. This module will create consolidated report of all Cucumber JSON files.
e.g. jsonDir: 'test/reports' //where reports directory contains valid *.json files
N.B.: jsonFile takes precedence over jsonDir. We recommend to use either jsonFile or jsonDir option.
output
Type: String
Provide HTML output file path and name
reportSuiteAsScenarios
Type: Boolean
Supported in the Bootstrap theme.
true: Reports total number of passed/failed scenarios as HEADER.
false: Reports total number of passed/failed features as HEADER.
launchReport
Type: Boolean
Automatically launch HTML report at the end of test suite
true: Launch HTML report in the default browser
false: Do not launch HTML report at the end of test suite
ignoreBadJsonFile
Type: Boolean
Report any bad json files found during merging json files from directory option.
true: ignore any bad json files found and continue with remaining files to merge.
false: Default option. Fail report generation if any bad files found during merge.
name
Type: String (optional)
Custom project name. If not passed, module reads the name from projects package.json which is preferable.
brandTitle
Type: String (optional)
Brand Title is the brand of your report, e.g. Smoke Tests Report, Acceptance Test Report etc as per your need. If not passed, it will be displayed as "Cucumberjs Report"
columnLayout
Available: [1, 2]
Type: Number
Default: 2
Select the Column Layout. One column or Two columns
1 = One Column layout (col-xx-12) 2 = Two Columns Layout (col-xx-6)
storeScreenshots
Type: Boolean
Default: undefined
true: Stores the screenShots to the default directory. It creates a directory 'screenshot' if does not exists.
false or undefined : Does not store screenShots but attaches screenShots as a step-inline images to HTML report
screenshotsDirectory
Type: String (optional)
Default: options.output/../screenshots
Applicable if storeScreenshots=true. Relative path for directory where screenshots should be saved. E.g. the below options should store the screenshots to the <parentDirectory>/screenshots/ where as the report would be at <parentDirectory>/report/cucumber_report.html
{
...
...
output: '/report/cucumber_report.html',
screenshotsDirectory: 'screenshots/',
storeScreenshots: true
}
noInlineScreenshots
Type: Boolean
Default: undefined
true: Applicable if storeScreenshots=true. Avoids inlining screenshots, uses relative path to screenshots instead (i.e. enables lazy loading of images).
false or undefined: Keeps screenshots inlined.
scenarioTimestamp
Type: Boolean
Default: undefined
true: Applicable if theme: 'bootstrap'. Shows the starting timestamp of each scenario within the title.
false or undefined: Does not show starting timestamp.
metadata
Type: JSON (optional)
Default: undefined
Print more data to your report, such as browser info, platform, app info, environments etc. Data can be passed as JSON key-value pair. Reporter will parse the JSON and will show the Key-Value under Metadata section on HTML report. Checkout the below preview HTML Report with Metadata.
Pass the Key-Value pair as per your need, as shown in below example,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
failedSummaryReport
Type: Boolean
A summary report of all failed scenarios will be listed in a grid, which its scenario title, tags, failed step and exception.
true: Insert failed summary report.
false: Failed summary report will not be inserted.
Tips
Attach Screenshots to HTML report
Capture and Attach screenshots to the Cucumber Scenario and HTML report will render the screenshot image
for Cucumber V8
let world = this;
return driver.takeScreenshot().then((screenShot) => {
// screenShot is a base-64 encoded PNG
world.attach(screenShot, 'image/png');
});
for Cucumber V2 and V3
var world = this;
driver.takeScreenshot().then(function (buffer) {
return world.attach(buffer, 'image/png');
};
for Cucumber V1
driver.takeScreenshot().then(function (buffer) {
return scenario.attach(new Buffer(buffer, 'base64'), 'image/png');
};
Attach Plain Text to HTML report
Attach plain-texts/data to HTML report to help debug/review the results
scenario.attach('test data goes here');
Attach pretty JSON to HTML report
Attach JSON to HTML report
scenario.attach(JSON.stringify(myJsonObject, undefined, 4));