The tdd-guard-storybook reporter integrates with @storybook/test-runner to capture component test results. It follows a specific lifecycle and hierarchy to ensure TDD workflows are supported:
Test Granularity
Only stories containing a play function are reported as tests. Stories without play functions are treated as passive renders and are ignored to ensure TDD Guard only reacts to actual test signals.
Module and Test Hierarchy
Tests are grouped by their source file. One story file equals one module, and each story within that file is a test. The resulting data structure follows this pattern:
{
"testModules": [
{
"moduleId": "src/Button.stories.tsx",
"tests": [
{
"name": "Primary",
"fullName": "Button > Primary",
"state": "passed"
}
]
}
]
}
Reporter Lifecycle
To optimize performance and handle interruptions, the reporter accumulates results in memory during execution and writes them to a single file only when the process exits:
- During execution (
postVisit): Results are collected via onStoryResult. - On exit (
onExit): All accumulated results are written to .claude/tdd-guard/data/test.json via onComplete.
Failure Handling
The reporter captures two types of failures:
- Interaction Test Failures: Failures occurring within the
play function (e.g., failed expect() calls). - Render Failures: Synthetic failed tests created when a story crashes during render (e.g., import errors or component crashes).