[RFC] VSCode Extension like Jest for @storybook/test and @storybook/test-runner

[Christian-Garrison]

Summary

A VSCode extension that integrates with @storybook/test and @storybook/test-runner to provide a seamless developer experience, similar to how Jest has a VSCode extension for running and debugging tests. This would allow developers to run Storybook tests directly from the editor with inline feedback and test status indicators.

Problem Statement

• Running Storybook tests currently requires switching between the terminal and the code editor for the test-runner or viewing them in the browser on each story.
• There is no built-in way to visualize or debug test results within VSCode to know at a glance before looking at storybook or terminal.
• Developers using Jest benefit from a VSCode extension that offers direct integration, while Storybook users do not have a similar tool.

Non-goals

• This proposal does not aim to replace @storybook/test and @storybook/test-runner functionality but rather to enhance its usability within VSCode.
• It does not introduce new testing features but focuses on developer experience improvements.

Implementation

• Develop a VSCode extension that integrates with @storybook/test and the @storybook/test-runner.
• Provide UI elements for:
  • Running tests directly from the file explorer and editor.
  • Displaying inline pass/fail statuses.
  • Debugging failed tests with clear error messaging.
• Implement support for:
• Running all tests, tests within a specific story file, or a single test.
• Hot-reloading when stories change.
• Test coverage integration.
• Utilize VSCode’s Testing API to register test cases dynamically based on Storybook test files.

Prior Art

• Jest VSCode extension provides a similar experience for unit tests.
• Cypress and Playwright have integrations with VSCode for running and debugging tests.
• Other testing tools like Vitest and Mocha have extensions providing similar functionality.

Deliverables

1. Create a VSCode extension project with basic Storybook test detection.
2. Implement inline test execution and status indicators.
3. Add debugging support with stack traces and logs.
4. Publish and maintain the extension via the VSCode marketplace.

Risks

• Performance concerns if Storybook tests take too long to execute.
• Compatibility issues across different versions of Storybook.
• Potential maintenance overhead as Storybook evolves.

Mitigation Strategies

• Implement caching and selective test execution to improve performance.
• Work closely with Storybook maintainers to ensure compatibility.
• Open-source the extension and encourage community contributions.

Unresolved Questions

No response

Alternatives considered / Abandoned Ideas

• Command-line only approach: Rejected because it doesn’t improve the developer experience within VSCode.
• Integration with existing Jest extension: Dropped since @storybook/test isn’t Jest-based and requires a separate implementation.
• Standalone test runner UI: Considered but determined that a VSCode extension would provide better workflow integration.