search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.73k stars 9.33k forks source link

[Bug]: Support preview-head.js, middleware.js in @storybook/experimental-addon-test/vitest/plugin #29422

Open valentinpalkovic opened 1 month ago

valentinpalkovic commented 1 month ago

Describe the bug

Currently, the preview-head.js or the middleware.js file in your .storybook folder doesn't automatically injected into the Vitest environment. Users would have to manually provide scripts in preview-head.js using the browser.testerscripts configuration and to import CSS files manually in their vitest.setup.ts file.

Additionally, the previewHead hook in .storybook/main.js is ignored as well and isn't considered.

Reproduction steps

  1. git clone https://github.com/pkp/ui-library.git
  2. pnpm install
  3. pnpm dlx storybook@0.0.0-pr-29241-sha-4da1ec12 add @storybook/experimental-addon-test
  4. Tests do not consider the scripts set up in .storybook/preview-head.js, which sets up a global.js script and an external jquery script to provide the global $ variable. Additionally, the previewHead preset in .storybook/main.js is ignored as well as the proxying of a URL via .storybook/middleware.js.
JReinhold commented 1 month ago

I don't think we should put effort into supporting middleware.js. I wouldn't expect it to be easy to do, it's an undocumented functionality, and I personally think that users should configure it in their Vite config if they need it.