[Bug?] Vitest has issues finding modules from @storybook/experimental-addon-test (with yarn PnP)

[ekeijl]

Summary

I followed manual install instructions from here with react-vite framework. The autoinstall script would not run for some reason using yarn dlx, could be something on my side.

When trying to run Storybook tests with Vitest, all tests fail with the following error:

 FAIL  src/antd/stories/Empty.stories.jsx [ src/antd/stories/Empty.stories.jsx ]
 FAIL  src/antd/stories/Input.stories.jsx [ src/antd/stories/Input.stories.jsx ]
 FAIL  src/antd/stories/Spin.stories.jsx [ src/antd/stories/Spin.stories.jsx ]
TypeError: Failed to fetch dynamically imported module: http://localhost:5173/<absolute/path/to/my/repo>/@storybook/experimental-addon-test/internal/setup-file?import&v=1727698286451

Originates from this line of code

A different, but similar error is shown when enabling the storybookScript option in the vitest plugin:

Error: Failed to load url <absolute/path/to/my/repo>/@storybook/experimental-addon-test/internal/global-setup (resolved id: <absolute/path/to/my/repo>/@storybook/experimental-addon-test/internal/global-setup). Does the file exist?

Originates from this line of code.

It seems Vite tries to resolve these modules as an absolute path and relative to my repository root instead of as an NPM module.
I think this might be related to the fact that I'm using Yarn pnpm. I had to do this getAbsolutePath trick before to make things work (see main.js below), could something similar be going on here?

This is also mentioned in your FAQ.

I can run my Storybook with Vite perfectly fine.

framework: react-vite
Storybook packages: 8.3.4
vite: 5.4.8
vitest: 2.1.1

Additional information

main.js

import react from '@vitejs/plugin-react';
import { dirname, join } from 'node:path';

function getAbsolutePath(value) {
	return dirname(require.resolve(join(value, 'package.json')));
}

const config = {
	stories: ['../src/**/*.@(mdx|stories.@(jsx))'],

	addons: [
		getAbsolutePath('@storybook/experimental-addon-test'),
		getAbsolutePath('@storybook/addon-a11y'),
		getAbsolutePath('@storybook/addon-essentials'),
		getAbsolutePath('@storybook/addon-interactions'),
		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
	],

	async viteFinal(config) {
		// Merge custom configuration into the default config
		const { mergeConfig } = await import('vite');

		return mergeConfig(config, {
			// plugins: [react()],
		});
	}, 

	framework: {
		// name: getAbsolutePath('@storybook/react-webpack5'),
		name: getAbsolutePath('@storybook/react-vite'),
		options: {},
	},

	docs: {},

	typescript: {
		reactDocgen: 'react-docgen-typescript',
	},

	core: {
		disableTelemetry: true,
	},
};
export default config;

vitest.config.js

import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { defineConfig, mergeConfig } from 'vitest/config';

import viteConfig from './vite.config';

export default mergeConfig(
	viteConfig,
	defineConfig({
		plugins: [
			storybookTest({
				// storybookScript: 'yarn storybook --ci',
			}),
		],
		test: {
			exclude: ['**/*.pw.test.jsx', 'dist/**'],
			// Glob pattern to find story files
			include: ['src/**/*.stories.?(m)[jt]s?(x)'],
			// Enable browser mode
			browser: {
				enabled: true,
				name: 'chromium',
				// Make sure to install Playwright
				provider: 'playwright',
				headless: true,
			},
			// Speed up tests and better match how they run in Storybook itself
			// https://vitest.dev/config/#isolate
			// Consider removing this if you have flaky tests
			isolate: false,
			setupFiles: ['./vitest.setup.js'],
		},
	}),
);

vitest.setup.js

import { setProjectAnnotations } from '@storybook/react';
import { beforeAll } from 'vitest';

import * as previewAnnotations from './.storybook/preview';

const annotations = setProjectAnnotations([previewAnnotations]);

// Run Storybook's beforeAll hook
beforeAll(annotations.beforeAll);

Create a reproduction

No response