react-jest-test-viewer

A React component for viewing Jest tests in the browser

Install

npm install react-jest-test-viewer

Usage

This package will display HTML test reports generated by jest-html-reporter in the browser alongside your React app. First, you'll need a configuration file to output the test results to the public directory. Make a file called jesthtmlreporter.config.json, and put in these options:

{
  "pageTitle": "Test Report",
  "outputPath": "public/test.html",
  "includeFailureMsg": true
}

Next, when running tests, you'll need to tell Jest to use jest-html-reporter as a reporter:

"scripts": {
  "start": "react-scripts start",
  "test": "react-scripts test --reporters jest-html-reporter default --watchAll"
}

It's recommended to run npm test in one terminal window, and npm start in another, so that your tests will be watched and run in the background; and your app will be hot-reloaded in the browser.

To display the component:

import React from 'react'
import ReactDOM from 'react-dom'
import TestViewer from 'react-jest-test-viewer'
import App from './App'

ReactDOM.render(
  <TestViewer
    active={process.env.NODE_ENV === 'development'}
    showTests={true}
    testFile='test.html'
  >
    <App />
  </TestViewer>,
  document.getElementById('root')
)

License

MIT © ihollander