This document describes the test coverage collection, aggregation, and reporting mechanisms in the tdesign-react project. Coverage is collected across three distinct testing layers: unit tests with Vitest, server-side rendering tests with Node.js, and end-to-end tests with Cypress. The system generates multiple report formats and produces coverage badges for README display.
For details on the individual testing frameworks themselves, see Unit and Vitest Tests, Server-Side Rendering Tests, and End-to-End Testing with Cypress.
The tdesign-react project employs a multi-layered coverage collection strategy that captures code execution data from three independent test execution environments. Each layer uses specialized instrumentation tools suited to its testing context.
Sources: package.json1-145 test/config/jest.base.conf.js1-47 test/config/jest.ssr.conf.js1-9 test/scripts/cypress/plugins/index.js1-28
Vitest serves as the primary test runner for both client-side unit tests and snapshot tests. Coverage collection is handled by the @vitest/coverage-v8 provider, which uses V8's built-in code coverage instrumentation for performance and accuracy.
| Command | Purpose | Output Location |
|---|---|---|
pnpm test:coverage | Run all Vitest tests with coverage | Generated coverage reports |
pnpm test | Run unit tests + snapshot tests | No coverage |
pnpm test:snap | Run snapshot tests only | No coverage |
The project uses V8 coverage rather than Istanbul-based instrumentation. V8 coverage is faster and more accurate for modern JavaScript, as it leverages the native coverage data collected by the V8 engine during execution.
Sources: package.json24 package.json86-87
Coverage collection is configured to include only relevant source files and exclude test infrastructure, examples, and generated artifacts.
The collectCoverageFrom configuration in the Jest base config defines the coverage scope:
packages/components/**/*.{ts,tsx,js,jsx}
| Pattern | Reason |
|---|---|
**/node_modules/** | Third-party dependencies |
**/__tests__/** | Test files themselves |
**/style/** | Pure style definitions |
**/coverage/** | Coverage artifacts |
This configuration ensures that coverage metrics reflect only production code quality, not test code or infrastructure.
Sources: test/config/jest.base.conf.js29-35
Server-side rendering tests execute in a Node.js environment rather than a browser context. These tests verify that components can be safely rendered on the server without browser-specific APIs.
The SSR test configuration extends the base Jest config with Node-specific settings:
The SSR test configuration specifies a separate coverage directory to avoid conflicts with client-side test coverage:
test/ssr/coveragetest/ssr/coverage/ (prevents Jest from scanning coverage artifacts)test/ssr/.*\.test\.js$Sources: test/config/jest.ssr.conf.js1-9 test/config/jest.base.conf.js19-20
End-to-end tests with Cypress collect coverage through a different mechanism that requires both build-time instrumentation and runtime coverage collection.
The Cypress coverage plugin is registered in the plugins configuration file, which enables automatic coverage collection after each test:
@cypress/code-coverage/task plugin is loaded in the Cypress plugins file@cypress/code-coverage/support to hook into test lifecyclewindow.__coverage__Sources: test/scripts/cypress/plugins/index.js26 test/scripts/cypress/support/index.js20
The testing infrastructure generates coverage reports in multiple formats to support different use cases:
| Format | Purpose | Output Path | Generated By |
|---|---|---|---|
| JSON | Machine-readable coverage data | coverage/coverage-final.json | All test types |
| HTML | Interactive browser-based report | coverage/index.html | All test types |
| LCOV | Legacy format for CI integration | coverage/lcov.info | Cypress only |
| Text | Terminal summary output | Console | Vitest only |
The HTML coverage report provides an interactive interface for exploring coverage metrics:
coverage/
├── index.html # Main coverage dashboard
├── coverage-final.json # Raw coverage data
├── lcov-report/ # LCOV HTML format
│ ├── index.html # Component-level summary
│ ├── base.css # Report styling
│ └── [component]/ # Per-component reports
└── lcov.info # LCOV text format
Each component's coverage report shows:
Sources: test/config/jest.base.conf.js20 package.json24
The project includes an automated badge generation script that creates coverage badges for display in README files and documentation.
The badge generation command runs coverage tests and then generates the badge:
This command executes two steps:
pnpm test:coverage to generate fresh coverage datanode script/generate-coverage.js to create the badge from coverage JSONSources: package.json16
The base Jest configuration defines core coverage settings that apply to both unit and SSR tests:
| Option | Value | Purpose |
|---|---|---|
collectCoverage | true | Enable coverage collection |
coverageReporters | ['json', 'html'] | Output formats |
collectCoverageFrom | Component source patterns | Files to instrument |
coverageDirectory | Test-type specific | Output location |
The coverageReporters array specifies which report formats to generate:
Sources: test/config/jest.base.conf.js19-20 test/config/jest.base.conf.js29-35
Snapshot tests contribute to coverage metrics by exercising component rendering logic. The project includes two types of snapshot tests:
CSR snapshot tests render components in a browser-like environment and capture the resulting HTML:
test/snap/csr.test.jsxtest/snap/__snapshots__/csr.test.jsx.snapSSR snapshot tests render components in Node.js to verify server-side compatibility:
test/snap/ssr.test.jsxtest/snap/__snapshots__/ssr.test.jsx.snapBoth snapshot test types run during pnpm test:coverage and contribute to the overall coverage percentage. The snapshot files show that tests cover all component examples systematically.
Sources: test/snap/__snapshots__/csr.test.jsx.snap1-1270 test/snap/__snapshots__/ssr.test.jsx.snap1-40 package.json21-24
The complete coverage collection and reporting process follows this sequence:
Sources: package.json19-24 package.json16
While explicit coverage thresholds are not enforced in the Jest configuration files, the project maintains high coverage through comprehensive testing across all three layers:
Each test type contributes to different coverage dimensions:
| Coverage Type | Unit Tests | SSR Tests | E2E Tests |
|---|---|---|---|
| Line Coverage | ✓ High | ✓ Medium | ✓ Medium |
| Branch Coverage | ✓ High | ✓ Low | ✓ High |
| Function Coverage | ✓ High | ✓ Medium | ✓ Low |
| Statement Coverage | ✓ High | ✓ Medium | ✓ Medium |
The multi-layered approach ensures:
This strategy produces comprehensive coverage without relying on a single test type.
Sources: test/config/jest.base.conf.js1-47 package.json19-24
Developers can view coverage reports locally after running tests:
The coverage collection system integrates with CI pipelines through standard exit codes and report formats:
test/e2e/cy-report/cypress-output-[hash].xmlSources: test/config/cypress.json16-19 package.json24
Coverage collection generates several artifact directories that are typically excluded from version control:
| Directory | Contents | Cleanup Command |
|---|---|---|
coverage/ | Vitest unit test coverage | rimraf coverage |
test/unit/coverage/ | Unit test coverage (alternate location) | Part of prebuild |
test/ssr/coverage/ | SSR test coverage | Part of prebuild |
test/e2e/cy-report/ | Cypress E2E coverage and test reports | Manual cleanup |
.nyc_output/ | Intermediate nyc coverage data | Automatic cleanup |
The prebuild script in package.json cleans several output directories but does not explicitly clean coverage directories, suggesting these are managed separately or retained between builds.
Sources: package.json25 test/config/jest.unit.conf.js17 test/config/jest.ssr.conf.js6
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.