[Bug] staticDirs API not compatible with vitest plugin

[vanessayuenn]

Storybook has a powerful API that provides users a way to serve static assets in Storybook:

// .storybook/main.js
export default {
  // simple notation
  staticDirs: ['../public', '../static'],
  // object notation
  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
};

This is important for things like registering MSW. The vitest plugin will not know about this and will fail if your stories use MSW. This is quite tricky because Vitest relies on Vite's publicDir property, which relates to a single directory (by default, /public), while Storybook allows for multiple directories.

💡 Solutions/Action items:

• Detect staticDirs usage in the sb add postinstall script and point to the documentation (there is no documentation at the moment)
• (From @JReinhold) Hook into the Vite server from the plugin (configureServer) and add the necessary middlewares to serve all staticDirs. This is almost already what we do today internally in Storybook, except we attach the serving-middlewares to Storybook’s Polka router instead of to Vite’s server, but the interface should be more or less the same.
• Try to make the Vitest plugin smarter and somehow translate staticDirs into publicDir:
  • If a single string path, just use it
  • If multiple string paths or object notation, warn users and acknowledge the limitation
  • OR if multiple string paths or object notation, make a copy of all of these files into a single file in a cache directory somewhere (e.g. node_modules) and reference that path as a publicDir in vitest

[ndelangen]

@JReinhold you had an idea on how to implement this right?

Can you give me a pointer to where you wanted to customize the server from vite?
IIRC you wanted to inject some middleware.

[JReinhold]

Where we define the Storybook Test plugin:

https://github.com/storybookjs/storybook/blob/next/code/addons/test/src/vitest-plugin/index.ts/#L63-L67

We can add the configureServer hook (next to eg. pre, config), which takes in the server as an argument, where we can add middlewares or anything. See docs: https://vite.dev/guide/api-plugin#configureserver

We should be able to add our middleware, perhaps with some slight tweaks: https://github.com/storybookjs/storybook/blob/next/code/core/src/core-server/utils/server-statics.ts/#L14-L64