jest-html-report-pro

Jest HTML Report Pro

🚀 Professional HTML test report generator with interactive Chart.js visualizations for Jest test results.

Features

✨ Interactive Charts

• Doughnut chart showing test distribution by category (Happy Path, Error Paths, Edge Cases)
• Bar chart displaying tests per functionality
• Powered by Chart.js for smooth, interactive visualizations

🎨 Modern UI/UX

• Beautiful gradient backgrounds
• Animated checkmarks and hover effects
• Responsive design
• Professional styling with shadows and transitions

📊 Comprehensive Reports

• Test success/failure statistics
• Detailed breakdown by functionality
• Categorized test results
• Execution time and coverage metrics

Installation

As a dev dependency in your project:

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

Global installation:

npm install -g jest-html-report-pro

Usage

Step 1: Run Jest with JSON output

First, run your Jest tests and output the results to a JSON file:

jest --json --outputFile=test-results.json

Or add to your package.json scripts:

{
  "scripts": {
    "test:report": "jest --json --outputFile=test-results.json && jest-html-report"
  }
}

Step 2: Generate HTML Report

# Using default settings
jest-html-report

# Custom input/output files
jest-html-report -i test-results.json -o my-report.html

# Custom title and subtitle
jest-html-report -t "My Project Tests" -s "Sprint 23 - QA Report"

CLI Options

Options:
  -i, --input <file>      Input JSON file from Jest (default: test-results.json)
  -o, --output <file>     Output HTML file (default: test-report.html)
  -t, --title <title>     Report title (default: Test Report)
  -s, --subtitle <text>   Report subtitle (default: Generated on [date])
  -h, --help              Show help message

Programmatic Usage

You can also use it programmatically in your Node.js scripts:

const { generateReport } = require('jest-html-report-pro');
const fs = require('fs');

// Read Jest JSON results
const jestResults = JSON.parse(fs.readFileSync('test-results.json', 'utf8'));

// Generate HTML report
const html = generateReport(jestResults, {
  title: 'My Project Tests',
  subtitle: 'Generated on ' + new Date().toLocaleDateString(),
});

// Write to file
fs.writeFileSync('report.html', html, 'utf8');
console.log('Report generated successfully!');

Integration with NestJS

Add to your package.json:

{
  "scripts": {
    "test": "jest",
    "test:cov": "jest --coverage",
    "test:report": "jest --json --outputFile=test-results.json && jest-html-report -t 'NestJS Test Report' -o test-report.html"
  }
}

Then run:

npm run test:report

Example Output

The generated HTML report includes:

• Summary Cards: Total tests, passed, failed, success rate
• Interactive Charts:
  • Test category distribution (Happy Path vs Error Paths vs Edge Cases)
  • Tests per functionality (bar chart)
• Detailed Test Results:
  • Organized by functionality
  • Grouped by test categories
  • Individual test case status with checkmarks
• Footer Statistics: Functionalities count, pass rate, execution time

Report Structure

The report automatically organizes tests based on your Jest describe blocks:

describe('MyService', () => {
  describe('myMethod()', () => {        // Functionality level
    describe('Happy Path', () => {      // Category level
      it('should work correctly', ...); // Test level
    });
  });
});

Requirements

• Node.js >= 14.0.0
• Jest test framework
• Internet connection (for Chart.js CDN)

License

MIT

Author

Your Name

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

Found a bug or have a feature request? Please open an issue on GitHub.

Changelog

v1.0.0

• Initial release
• Interactive Chart.js visualizations
• Modern gradient UI
• CLI support
• Programmatic API