[Tracking] Vitest integration

[shilman]

RFC

#28386

Milestones

The Vitest integration effort is split into multiple types of work. It involves a Storybook plugin for Vitest, which transforms stories into tests (see RFC); Improvements in the core layer of Storybook; Some updates to the interactions addon and a creation of a new Storybook addon: @storybook/addon-vitest.

Milestone 1 - Add filtering logic and improved UI to Storybook (extracted from VTA)

Tasks

Preview Give feedback

1. Move bottom bar button (filter) logic from VTA to Storybook [gert] #28682
   +0
   
2. UI: solidify story status elements #28679
   +0
   
3. UI: Rework footer filtering component and API #28680
   +0
   
4. Remove/deprecate experimental bottomBar APIs in Storybook core [gert] #28681
   +0
   
5. Migration strategy with different versions of Storybook+VTA (so that there is only one filter UI) #28683
   +0
   

Milestone 2 - Portable stories and core improvements

Tasks

Preview Give feedback

1. Use internal Storybook renderer logic for portable stories in 8.3 (as a default), as it will solve hard to debug race conditions and allows us to run the vitest test runner for all renderers [kasper] #28685
   +0
   
2. Core: Introduce run over play in portable stories, and revert back play changes of 8.2 #28764
   BREAKING CHANGE ci:daily patch:done patch:yes +4
   
3. Core: Make sure beforeAll is properly typed #28864
   addon: test bug ci:normal +3
   
4. Core: Make sure CJS build always has lowest prio #28829
   ci:daily maintenance +2
   
5. Core: Enable RSC support when parameters.react is set to true #28865
   bug ci:normal react +3
   
6. Nextjs: Fix default annotations for portable stories #28825
   bug ci:normal portable stories +3
   
7. metrics: Telemetry: Add portable stories #26764 [yann, michael]

Milestone 3 - Experimental Vitest plugin - part 1

Tasks

Preview Give feedback

1. v0.0.1 vitest-plugin#1
   patch +1
   
2. Address review feedback vitest-plugin#2
   +0
   
3. Set up tests and portable stories plugin vite-plugin-storybook-nextjs#3
   skip-release +1
   
4. Scaffold @storybook/addon-vitest with basic mocked test results [gert] #28687
   +0
   
5. Add Storybook Vitest plugin to Vite based (internal) sandboxes in the monorepo #28707
   +0
   
6. Rework file transformation logic [yann] #28684
   +0
   
7. Add support for module mocking #28744
   +0
   
8. use globalSetup instead of reporters to spawn Storybook #28775
   +0
   
9. Support auto-title #28777
   +0
   
10. Use CSF tools/babel instead of typescript #28852
    +0
    
11. add vitest plugin yannbf/mealdrop#30
    +0
    
12. https://github.com/chromaui/chromatic/pull/8864
13. Use vitest as test runner and enable code coverage using codecov storybook-rsc-demo#15
    +0
    
14. Use new run portable stories format (testingLibraryRender) [kasper, yann]
15. Write unit tests [yann]
16. Bug: Investigate double registration of plugin [yann]
17. Add unit testing/E2E testing/QA [kasper, yann]
18. metrics: make sure it's part of telemetry

Milestone 4 - Experimental Vitest plugin - part 2

Tasks

Preview Give feedback

1. Bug: Investigate global-setup storybook spawn script sometimes not killing Storybook process #28890
   bug sev:S2 +2
   
2. Report performance metrics (browser mode) #28814
   +0
   
3. [Bug]: Storybook index crashes when directories match glob as stories #28954
   bug portable stories sev:S3 +3
4. nice to have: Research on isolation mode (workspace config)
5. Vitest addon: sb add postinstall hook (auto configuring the Vitest plugin) #28807
   +0
   
6. Bug: Investigate issue with MSW and browser mode #28889
   +0
   
7. Vitest addon: Introduce initial/fallback viewport size #28901
   +0
   
8. Vitest addon: Fix error message reporting #28903
   +0
   
9. Vitest addon: Set screenshotFailures to false by default #28904
   +0
   
10. QA: Test vitest integration #28953
    3 of 14
    +0
    
11. Fix tests becoming side effect when importing from other story files #28930
    +0
    

Milestone 5 - Documentation and content creation

Tasks

Preview Give feedback

1. Documentation: Vitest plugin setup/usage #28893
   +0
   
2. ViteConf: Prepare presentation [yann]

Milestone 6 - Extended portable stories support

Tasks

Preview Give feedback

1. Introduce setProjectAnnotations for every Storybook renderer #28895
   +0
   
2. Introduce portable stories support for SvelteKit #28892
   +0
   
3. Introduce portable stories support for Web components #28891
   feature request portable stories web-components +3
4. Introduce portable stories support for Preact #28898
   feature request portable stories preact +3
5. Introduce portable stories support for Angular #28897
   angular feature request portable stories +3
6. Introduce portable stories support for HTML #28896
   feature request html portable stories +3

Unplanned work

The following tasks were discussed to be out of scope, given the probable lack of time to work on them:

Tasks

Preview Give feedback

1. Server/browser state for status API from JUnit report [yann, gert] #28688
   +0
2. Addon preset handling [kasper, yann] #28738
   +0
   
3. Portable stories: Refactor Storybook preview and Portable stories to reuse logic [kasper] #28686
   +0
   
4. Addon-interactions: Improve error handling to allow non-playfn error logs [gert]
5. nice to have: Test package: Experiment with (inline) snapshots [kasper]
6. Vitest addon: Panel with Vitest CLI raw logs [gert]
7. nice to have: Audit all of our core addons and use the afterEach mechanism if applicable (and make PS compatible) [yann, kasper]
8. nice to have: Move server connection checks to Storybook core [gert] [Bug]: Connection lost Lost connection to the Storybook server. Try refreshing the page. #28258
9. Vitest addon: Implement Vitest orchestration layer [kasper, yann]
10. Vitest addon: Pipe CLI output of Vitest onto Storybook's CLI
11. nice to have: Move top bar button (run tests) logic from VTA to Storybook [gert]
12. nice to have: Remove/deprecate experimental topBar APIs in Storybook core [gert]
13. nice to have: UI: Implement Superbar component
14. nice to have: Implement afterEach as kind of a replacement for useEffect that is more compatible with test runner, as it can be await-ed. [kasper]
15. nice to have: Implement a11y reporting mechanism [kasper]
16. Spike "always on watch mode" by running tests in watch mode via the CLI + watching for Junit files