[Bug] Vitest plugin does not detect custom vite config paths

[vanessayuenn]

Storybook, by default, loads a vite.config file in the project root. The same goes for Vitest. However, users can customize the vite config path like so:

// .storybook/main.js
export default {
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        viteConfigPath: '.storybook/vite.config.ts',
      },
    },
  },
};

Vitest will not know about this, unless users manually load such vite config file in their vitest config file like so:

// vitest.config.ts
import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
	{ extends: '.storybook/vite.config.ts', plugins: [ storybookTest() ] ... }
])

Some people have a vite config file for their app and another for Storybook. The sb add command won't detect a vite config file in the Storybook dir (though we could), so it can end up referring to the wrong config file when setting things up.

💡 Solutions/Action items:

• We can start checking the vite config file from the storybook configDir first
• We should make this clear in our docs, if it isn't already

[ndelangen]

The code for this, exists here:

storybook/code/builders/builder-vite/src/vite-config.ts

Lines 54 to 62 in 27a47e8

	const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
	const projectRoot = resolve(options.configDir, '..');
	// I destructure away the `build` property from the user's config object
	// I do this because I can contain config that breaks storybook, such as we had in a lit project.
	// If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
	const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
	(await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};

If this code was defined in a preset property viteFinal instead, this would be automatically compatible, and it would make the vite builder less custom.