Introduction to Jest HTML Reporter

The jest-html-reporter is a custom reporter for Jest that generates a configurable, visually pleasing HTML report for your tests. With this tool, you can enhance your test reports and gain deeper insights into your testing outcomes. In this article, we will introduce you to jest-html-reporter and demonstrate several of its useful APIs with comprehensive examples and an application example.

Installation

To get started with jest-html-reporter, install it via npm:

  
    npm install --save-dev jest-html-reporter
  

Basic Configuration

To configure jest-html-reporter, add the following configuration to your Jest configuration file:

  
    "reporters": [
      "default",
      ["./node_modules/jest-html-reporter", {
        "pageTitle": "Test Report",
        "outputPath": "./test-report.html"
      }]
    ]
  

API Examples

Customizing the Report Title

You can customize the title of the test report using the pageTitle option:

  
    "reporters": [
      ["jest-html-reporter", {
        "pageTitle": "My Custom Test Report"
      }]
    ]
  

Setting the Output File Path

Define where the HTML report is saved using the outputPath option:

  
    "reporters": [
      ["jest-html-reporter", {
        "outputPath": "./reports/custom-report.html"
      }]
    ]
  

Adding Style to the Report

Customize your report’s appearance by providing your own CSS file through the styleOverridePath option:

  
    "reporters": [
      ["jest-html-reporter", {
        "styleOverridePath": "./path/to/custom/styles.css"
      }]
    ]
  

Changing the Report Theme

You can change the report theme using the theme option:

  
    "reporters": [
      ["jest-html-reporter", {
        "theme": "darkTheme"
      }]
    ]
  

Enabling Charts

Enable charts to visualize test results using the includeCharts option:

  
    "reporters": [
      ["jest-html-reporter", {
        "includeCharts": true
      }]
    ]
  

Application Example

Here’s an example of how to structure a Node.js application with Jest and integrate jest-html-reporter:

  
    // jest.config.js
    module.exports = {
      reporters: [
        "default",
        ["./node_modules/jest-html-reporter", {
          "pageTitle": "Node.js App Test Report",
          "outputPath": "./test-report.html",
          "includeFailureMsg": true,
          "includeConsoleLog": true
        }]
      ]
    };

    // Sample test file: __tests__/app.test.js
    const request = require('supertest');
    const app = require('../app'); // Your Express app

    describe('GET /', () => {
      it('should return 200 status', async () => {
        const response = await request(app).get('/');
        expect(response.status).toBe(200);
      });

      it('should return a welcome message', async () => {
        const response = await request(app).get('/');
        expect(response.text).toContain('Welcome to My App');
      });
    });
  

With these configurations and test cases, you’ll receive a comprehensive test report for your Node.js application, making it easier to monitor and debug your code.

Conclusion

The jest-html-reporter is an excellent tool for generating detailed and visually appealing test reports. By customizing various options, you can tailor the reports to fit your project’s needs, thereby improving the clarity and presentation of your test outcomes.

Explore the various APIs and configurations to fully leverage the power of jest-html-reporter for your testing needs.

Hash: ffd89e427941e08b97dd6b4d6268a7f0bc0513c3826d45a709dc1770cc0e5d6c