{"id":13374,"library":"jest-html-reporters","title":"Jest HTML Test Report Generator","description":"jest-html-reporters is a Jest test results processor that generates an interactive HTML summary of test execution. Currently at version 3.1.7, it receives regular maintenance updates with frequent minor releases addressing bug fixes and adding new features like dark mode support and console log integration. Key differentiators include its ability to produce a standalone HTML file, offering features such as sorting, filtering by test status, displaying detailed failure messages, and custom branding options. Unlike simple console reporters, it provides a persistent, shareable artifact of test runs, making it valuable for continuous integration environments and team collaboration, facilitating quick overviews of test health and granular investigation into failures.","status":"active","version":"3.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/Hazyzh/jest-html-reporters","tags":["javascript","jest","html","reporter","report","plugin","typescript"],"install":[{"cmd":"npm install jest-html-reporters","lang":"bash","label":"npm"},{"cmd":"yarn add jest-html-reporters","lang":"bash","label":"yarn"},{"cmd":"pnpm add jest-html-reporters","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"JestHtmlReporter is a default export, primarily for programmatic usage or custom Jest environments, not typical reporter configuration via `jest.config.json`.","wrong":"import { JestHtmlReporter } from 'jest-html-reporters';","symbol":"JestHtmlReporter","correct":"import JestHtmlReporter from 'jest-html-reporters';"},{"note":"CommonJS import for programmatic usage in Node.js environments. The primary usage is via Jest's configuration array.","symbol":"JestHtmlReporter","correct":"const JestHtmlReporter = require('jest-html-reporters');"},{"note":"Imports the TypeScript interface for defining reporter configuration options, useful for type-checking custom configurations.","wrong":"import { ReporterOptions } from 'jest-html-reporters';","symbol":"ReporterOptions","correct":"import type { ReporterOptions } from 'jest-html-reporters';"}],"quickstart":{"code":"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst config: Config = {\n  testEnvironment: 'node',\n  reporters: [\n    'default',\n    [\n      'jest-html-reporters',\n      {\n        publicPath: './html-report',\n        filename: 'test-report.html',\n        expand: true,\n        darkTheme: true,\n        includeConsoleLog: true,\n        pageTitle: 'My Project Test Report'\n      }\n    ]\n  ]\n};\n\nexport default config;\n\n// my-test.test.ts\ndescribe('User Authentication', () => {\n  test('should allow a valid user to log in', () => {\n    console.log('Attempting login for valid user...');\n    expect(true).toBe(true);\n  });\n\n  test('should reject invalid credentials', () => {\n    console.warn('Invalid credentials test initiated.');\n    expect(false).toBe(true); // This test will fail\n  });\n\n  test.skip('should handle session timeout', () => {\n    console.info('Skipped session timeout test.');\n    expect(true).toBe(false);\n  });\n});\n\n// To run:\n// npm install --save-dev jest jest-html-reporters typescript ts-jest @types/jest\n// Add script in package.json: \"test\": \"jest --verbose=false --config jest.config.ts\"\n// Then run: npm test","lang":"typescript","description":"This quickstart demonstrates how to configure jest-html-reporters in a TypeScript Jest project, including custom options like dark theme, console log inclusion, and custom filenames. It also shows a simple test file with passing, failing, and skipped tests, along with console output. Note the use of `--verbose=false` to ensure console logs are captured."},"warnings":[{"fix":"Ensure your Jest command includes `--verbose=false` when `includeConsoleLog` is enabled in your reporter options. Example: `jest --verbose=false`.","message":"To capture and display console logs within the HTML report using the `includeConsoleLog` option, Jest must be run with `--verbose=false`. Running with `--verbose=true` will prevent logs from being captured by the reporter.","severity":"gotcha","affected_versions":">=3.1.2"},{"fix":"Explicitly set `openReport: false` in your reporter options within `jest.config.json` for CI/production environments to prevent automatic browser opening.","message":"The `openReport` option automatically opens the generated HTML report in the browser. By default, it's `true` in development environments and `false` in other environments. This can lead to unexpected browser launches in CI/production if not explicitly set to `false`.","severity":"gotcha","affected_versions":">=3.1.0"},{"fix":"Upgrade to `jest-html-reporters@3.1.4` or newer to ensure proper handling of circular objects in test results, which can prevent report generation failures.","message":"When upgrading from versions prior to 3.1.4, be aware of fixes related to circular object cloning. If your tests generate circular JSON objects in their results (e.g., from `console.log` output or complex error objects), older versions might fail to generate a report or throw errors. Newer versions handle this robustly.","severity":"gotcha","affected_versions":"<3.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the package as a development dependency: `npm install jest-html-reporters --save-dev` or `yarn add jest-html-reporters --dev`.","cause":"The package `jest-html-reporters` is not installed or not resolvable in your project's `node_modules`.","error":"Configuration error: Unknown reporter 'jest-html-reporters'"},{"fix":"Check your `jest.config.json` for correct `publicPath` and `filename` settings. Also, verify `failureMessageOnly` is not set to `2` if you expect a report even when all tests pass, or ensure some tests are failing if it is.","cause":"The HTML report file was not generated, possibly due to incorrect Jest configuration, a custom `filename` or `publicPath` setting, or the `failureMessageOnly` option preventing report creation.","error":"Report file not found: jest_html_reporters.html"},{"fix":"Run Jest with the `--verbose=false` flag to allow the reporter to correctly capture console logs. For example: `jest --verbose=false`.","cause":"Jest's default verbosity (or `--verbose=true`) can interfere with the reporter's ability to capture console output.","error":"console.log output is missing from the HTML report despite `includeConsoleLog: true`."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}