Home

Awesome

<!-- [![CircleCI](https://circleci.com/gh/dkelosky/jest-stare.svg?style=svg)](https://circleci.com/gh/dkelosky/jest-stare) --> <!-- [![Travis CI](https://travis-ci.com/dkelosky/jest-stare.svg?branch=master)](https://travis-ci.com/dkelosky/jest-stare) --> <!-- Builds have been temporarily disabled for public repositories due to a negative credit balance. Please go to the Plan page to replenish your credit balance or alter your Consume paid credits for OSS setting. -->

Azure Pipelines Node.js CI Codecov Coverage jest npm version downloads License

Jest HTML Reporter

This is a Jest HTML reporter. It takes summary test results from jest and parses them into an HTML file for improved readability and filtering.

Sample

Features

Usage

Run tests or a test with jest and specify jest-stare on the --reporters option:

Alternatively, in your jest config within package.json set reporters to jest-stare :

jest-stare when used as a reporter updates the HTML report on each completed test run. You can use this to view test output that is incomplete (before each test suite completes). Refresh your browser to see new tests as each suite completes.

By default, after a report is generated, output will go to ./jest-stare and will contain:

Config

You can configure custom reporters by passing the jest-stare config as a second argument:

    "reporters": [
      "default",
      [
        "jest-stare",
        {
          "resultDir": "results/jest-stare",
          "reportTitle": "jest-stare!",
          "additionalResultsProcessors": [
            "jest-junit"
          ],
          "coverageLink": "../../coverage/lcov-report/index.html",
          "jestStareConfigJson": "jest-stare.json",
          "jestGlobalConfigJson": "globalStuff.json"
        }
      ]
    ]

Note: testResultsProcessor will not use config options specified in the way above

Or, do so by adding a jest-stare object to your package.json, for example:

jest-stare: {
    ...
}

You can also configure each option via environmental variables instead. Environmental variables take precedence over values in package.json. CLI options take precedence of environmental variables and configuration.

Within the configuration object you can specify the following fields:

FieldEnvironmental VariableDefaultDescriptionExample
resultDirJEST_STARE_RESULT_DIRjest-stareset the results directory"resultDir": "results/jest-stare"
resultJsonJEST_STARE_RESULT_JSONjest-results.jsonindicate the raw JSON results file name"resultJson": "data.json"
resultHtmlJEST_STARE_RESULT_HTMLindex.htmlindicate the main html file name"resultHtml": "main.html"
logJEST_STARE_LOGtruespecify whether or not jest-stare should log to the console"log": false
jestStareConfigJsonJEST_STARE_CONFIG_JSONundefinedrequest to save jest-stare config raw JSON results in the file name"jestStareConfigJson": "jest-stare-config.json"
jestGlobalConfigJsonJEST_STARE_GLOBAL_CONFIG_JSONundefinedrequest to save global config results in the file name"jestGlobalConfigJson": "global-config.json"
reportJEST_STARE_REPORTundefinedboolean, set to false to suppress creating a HTML report (JSON only retained)"report": false
reportTitleJEST_STARE_REPORT_TITLEjest-stare!string, indicate the title of the report"reportTitle": "my title"
reportHeadlineJEST_STARE_REPORT_HEADLINEjest-starestring, indicate the headline of the report"reportHeadline": "my headline"
reportSummaryJEST_STARE_REPORT_SUMMARYundefinedboolean, shows the report summary"reportSummary": true
additionalResultsProcessorsJEST_STARE_ADDITIONAL_RESULTS_PROCESSORSundefinedadd additional test result processors to produce multiple report"additionalResultsProcessors": ["jest-junit"]
coverageLinkJEST_STARE_COVERAGE_LINKundefinedlink to coverage report if available"coverageLink": "../../coverage/lcov-report/index.html"
disableChartsJEST_STARE_DISABLE_CHARTSundefinedhide the doughnut charts in the HTML report"disableCharts": true
hidePassingJEST_STARE_HIDE_PASSINGundefinedhide passing tests in the report on page load"hidePassing": true
hideFailingJEST_STARE_HIDE_FAILINGundefinedhide failing tests in the report on page load"hideFailing": true
hidePendingJEST_STARE_HIDE_PENDINGundefinedhide pending tests in the report on page load"hidePending": true

API

You can programmatically invoke jest-stare and provide jest response data via:

// require jest-stare
const processor = require("jest-stare");

// load some jest results JSON data
const simplePassingTests = require("../__tests__/__resources__/simplePassingTests.json");

// call jest-stare processor, passing a first parm of the jest json results,
// and optionally a second parm of jest-stare config
processor(simplePassingTests, {log: false, resultDir: __dirname + "/output"});

CLI

Use the jest-stare CLI to create or recreate an HTML report. You only need to supply an input JSON file containing the jest test results.

You can invoke jest-stare as a CLI after installing globally via npm install -g jest-stare. Or if jest-stare is a local dependency you can invoke the CLI via npx jest-stare...

Assuming that you have a relative file to your current location in a folder "data" and "simplePassingTests.json" contains saved JSON output from a jest test invocation, you can run the CLI providing a single positional input jest JSON file:

jest-stare data/simplePassingTests.json

Optionally you can control where the report will be stored using a second positional:

jest-stare data/simplePassingTests.json c:/users/myId/desktop/output

The command response takes a form of:

jest-stare was called with programmatic config
**  jest-stare: wrote output report to c:/users/myId/desktop/output/index.html  **

Jest Watch

Because jest-stare writes *.js files when generating a report, you may get an infinite loop when using jest-stare and jest --watch. Samples of the problem are documented here:

To get around this problem, consider excluding jest-stare *.js files from watch via something like this:

    "watchPathIgnorePatterns": [
      ".*jest-stare.*\\.js"
    ],

Contributing

See contributing.

Acknowledgements

Thanks to dogboydog and others for additions!

This project is based on: