[Bug] Vitest Plugin ignores custom scripts in preview config

[vanessayuenn]

Users can define a custom previewHead or previewBody script in main.js like so

// .storybook/main.js
export default {
  previewHead: (head) => `
    ${head}
    ${
      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
    }
  `,
};

And that is not going to be taken into account by the Vitest plugin. It's important because users might be loading certain scripts that impact on how components render/behave.

💡 Solutions/Action items:

• Do nothing, acknowledge this limitation and have people move away from it or just accept it won't be present

• Make the vitest plugin smart and use the [transformIndexHtml](https://vite.dev/guide/api-plugin#transformindexhtml) plugin hook internally (the code below is not what users would have to do, I'm just showing how to do it in user land. This would be done as part of the vitest plugin instead):

  // vitest.config.ts
  import { defineWorkspace } from 'vitest/config'
  
  // hopefully something we can add internally via the storybook test plugin
  const previewHeadPlugin = (previewHead) => {
    return {
      name: 'storybook-preview-head-injection',
      transformIndexHtml(html) {
        return html.replace('</head>', `${previewHead}</head>`)
      },
    }
  }
  
  export default defineWorkspace([
  	{ 
  	  extends: '.storybook/vite.config.ts', 
  	  plugins: [ 
  	    storybookTest(),
  	    // this would happen internally 👇
  	    previewHeadPlugin(`
          <style>
            body {
              background: yellow !important;
            }
          </style>`),
        }
  	  ] 
  	  // ... 
  	}
  ])