@storybook/addon-vitest: storybookTest() fails to discover tests when configDir is nested (monorepo)

[shiharuharu]

Summary

In a monorepo where the Storybook config directory is NOT located at the repository root (e.g. apps/storybook-web/.storybook), @storybook/addon-vitest's storybookTest() plugin fails to discover any test files (Vitest reports no tests found). Setting test.root to the Storybook app directory fixes the issue.

This appears to be a path resolution base (root/cwd) mismatch when the plugin generates/augments Vitest's test include patterns for stories.

Reproduction

Directory Structure:

repo/
  package.json
  vitest.config.ts
  apps/
    storybook-web/
      .storybook/
        main.ts
        preview.ts
        vitest.setup.ts
      src/
        Button.tsx
        Button.stories.tsx

main.ts (stories relative to configDir as per Storybook docs):

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-vitest'],
  framework: { name: '@storybook/react-vite', options: {} },
};

vitest.config.ts (Problem - without test.root):

export default defineConfig({
  plugins: [
    storybookTest({
      configDir: path.join(dirname, 'apps/storybook-web/.storybook'),
    }),
  ],
  test: {
    name: 'storybook',
    // NO test.root set
    browser: { enabled: true, headless: true, provider: playwright(), instances: [{ browser: 'chromium' }] },
    setupFiles: ['./apps/storybook-web/.storybook/vitest.setup.ts'],
  },
});

Steps to Reproduce

1. Place Storybook config under a subdirectory: apps/storybook-web/.storybook/main.ts
2. In main.ts, set stories relative to configDir: stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)']
3. Add a story file: apps/storybook-web/src/Button.stories.tsx
4. Configure Vitest with storybookTest({ configDir: '<repo>/apps/storybook-web/.storybook' })
5. Do NOT set test.root
6. Run: pnpm vitest list -c vitest.config.ts --reporter=verbose

Expected Behavior

Vitest should discover and list/run tests generated from stories, even when configDir is not at repo root.

Actual Behavior

Vitest discovers 0 tests / no output from vitest list.

Output without test.root (Problem):

> vitest list -c vitest.config.ts --reporter=verbose

(no output - no tests found)

Workaround

Setting test.root to the Storybook app directory makes discovery work:

test: {
  root: path.join(dirname, 'apps/storybook-web'),
  // ...
}

Output with test.root (Working):

> vitest list -c vitest.config.with-root.ts --reporter=verbose

[storybook (chromium)] src/Button.stories.tsx > Primary
[storybook (chromium)] src/Button.stories.tsx > Secondary

Environment

• OS: macOS Darwin 24.6.0 (arm64)
• Node: v24.12.0
• pnpm: 10.27.0
• Storybook: 10.2.1
• @storybook/addon-vitest: 10.2.1
• Vitest: 4.0.18
• Vite: 6.4.1
• @vitest/browser: 4.0.18
• Playwright: 1.57.0

Suspected Cause

The storybookTest plugin resolves story globs (from main.ts) against Vitest's root directory instead of configDir. When configDir is nested (e.g., apps/storybook-web/.storybook), the relative glob ../src/**/*.stories.* is interpreted from the wrong base directory.

Potential Fix Directions

1. Resolve main.ts story globs relative to configDir and inject absolute globs into Vitest config
2. Normalize injected include patterns relative to Vitest root
3. Derive an appropriate root (e.g., path.dirname(configDir)) internally when configDir is nested
4. Document the need to set test.root when using nested configDir in monorepos

[dosubot]

Hi @shiharuharu! I'm Dosu and I’m helping the storybook team.

This is a current limitation of @storybook/addon-vitest: when your Storybook configDir is nested (e.g., in a monorepo), the storybookTest plugin resolves story globs relative to Vitest's root (which defaults to process.cwd() if test.root is not set). This causes relative globs like ../src/**/.stories. to be interpreted from the wrong base, so no tests are found. Setting test.root to the Storybook app directory aligns the roots and allows test discovery to work as expected. This workaround is widely recommended and used by others in the community [issue #33287, issue #31619].

There is no robust, officially supported workaround for keeping .storybook in a subdirectory without path resolution issues; symlinking or patching the plugin is fragile and may break with updates. The only reliable solutions are to set test.root to the app directory or move .storybook to the project root [issue #33287].

If you must keep .storybook nested, always set test.root to the parent directory of configDir, and ensure your stories field in main.ts uses relative paths from the .storybook folder (not absolute paths) to avoid unwanted prefixing [issue #33287].

This behavior is not yet documented as a known limitation in the official docs. You can follow the linked issues for updates.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}