Jest HTML Report Generation

HTML Report Generation

We can conveniently fetch the test reports in an HTML format with the help of the “jest-html-reporter” package present in Node. First, we will install the package using npm.

npm install --save-dev jest-html-report

We will have to add another file in the exact location as that of package.json. We will name the file “jesthtmlreporter.config.json.” We can add various options in this file in JSON format, but we will add the following configurations to the file for now.

{
 "pageTitle": "HTML Report",
 "outputPath": "report.html",
 "includeFailureMsg": true
}

And as the last step of our configuration process, we will add the following set of instructions to our package.json file under the script section.

"test:CI": "set CI=true &&react-scripts test --env=jsdom --testResultProcessor =./node_modules/jest-html-reporter"

“set CI=true” ensures that the tests end as soon as all the tests are successfully executed.

“--env=jsdom” provides the tests with a mock browser environment.

Now that we are done with all the configurations, all we have to do is run the “test:CI” command,

npm run test:CI

As we have provided the output path as report.html, the HTML report will be stored in the root directory of the application, named report.html.

We can further fetch the stats of our test coverage using the below commands,

npm run test -- --coverage

FAQS

1. What is Jest?
   Jest is a framework in JavaScript that is used for the testing purposes of large web applications. It is maintained by Facebook. Since Jest doesn’t require a lot of configuration, it is an excellent option to be used as a testing framework among new developers.
    
2. What is jest-html-reporter?
   jest-html-reporter is a package in Node used to generate an HTML test report. It can be easily incorporated into the web application using the Javascript package manager and making a few configuration changes.
    
3. Can we use Jest for any other environment other than Node?
   Jest is specifically designed to be used with JavaScript and React, so any environment using JavaScript or React can be configured with Jest.
    
4. What is the disadvantage of using Jest?
   Although Jest is a compelling library, it is comparatively prolonged compared to other testing libraries.
    
5. How can we fetch the coverage of our test report?
   We can fetch the coverage of the test using the below mentioned line of code in Node.

npm run test -- --coverage

Key Takeaways

This Blog covered all the necessary points about Jest and the essential steps to generate a Jest report in HTML format.

Don’t stop here; check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.