Test Results
Display test suite results with pass/fail/skip status and error details.
The TestResults component displays test suite results including summary statistics, progress, individual tests, and error details.
12 passed2 failed1 skipped
3.25s12/15 tests passed80%
should login with valid credentials45ms
should reject invalid password32ms
should handle expired tokens28ms
should create new user120ms
Expected status 200 but received 500
at Object.<anonymous> (src/user.test.ts:45:12) at Promise.then.completed (node_modules/jest-circus/build/utils.js:391:28)
should delete user
Installation
npx ai-elements@latest add test-results
Features
- Summary statistics (passed/failed/skipped)
- Progress bar visualization
- Collapsible test suites
- Individual test status and duration
- Error messages with stack traces
- Color-coded status indicators
Status Colors
| Status | Color | Use Case |
|---|---|---|
passed | Green | Test succeeded |
failed | Red | Test failed |
skipped | Yellow | Test skipped |
running | Blue (animated) | Test in progress |
Examples
Basic Usage
10 passed2 failed1 skipped
3.50sWith Test Suites
3 passed
With Error Details
1 passed1 failed
should fetch data45ms
Expected 200, got 500
at Object.<anonymous> (/app/src/api.test.ts:45:12)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)Props
<TestResults />
Prop
Type
<TestSuite />
Prop
Type
<Test />
Prop
Type
<TestResultsHeader />
Prop
Type
<TestResultsSummary />
Prop
Type
<TestResultsDuration />
Prop
Type
<TestResultsProgress />
Prop
Type
<TestResultsContent />
Prop
Type
<TestSuiteName />
Prop
Type
<TestSuiteStats />
Prop
Type
<TestSuiteContent />
Prop
Type
<TestStatus />
Prop
Type
<TestName />
Prop
Type
<TestDuration />
Prop
Type
<TestError />
Prop
Type
<TestErrorMessage />
Prop
Type
<TestErrorStack />
Prop
Type