Release: Prerelease 8.5.0-alpha.18

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.5.0-alpha.18
+
+- Addon Test: Clarify message when `vitest` detects missing deps - [#29763](https://github.com/storybookjs/storybook/pull/29763), thanks @ndelangen!
+- Addon Test: Refactor test addon to include stories automatically - [#29367](https://github.com/storybookjs/storybook/pull/29367), thanks @yannbf!
+- Addon Test: Replace `glob` with `tinyglobby` - [#29817](https://github.com/storybookjs/storybook/pull/29817), thanks @ghengeveld!
+- Addon Test: Support Storybook environment variables in Vitest - [#29792](https://github.com/storybookjs/storybook/pull/29792), thanks @ghengeveld!
+- Composition: Hide contextMenu on composed storybooks - [#29803](https://github.com/storybookjs/storybook/pull/29803), thanks @ndelangen!
+- Vue: Properly resolve Vite plugin - [#29795](https://github.com/storybookjs/storybook/pull/29795), thanks @tobiasdiez!
+
 ## 8.5.0-alpha.17
 
 - CLI: Fix new-frameworks automigration - [#29804](https://github.com/storybookjs/storybook/pull/29804), thanks @yannbf!

code/.storybook/vitest.config.ts

@@ -34,20 +34,13 @@ export default mergeConfig(
     ],
     test: {
       name: 'storybook-ui',
-      include: [
-        '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        // '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-      ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
         '../**/__mockdata__/**',
-        // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
-        '**/Zoom.stories.tsx',
+        '**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
+        '**/lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
       ],
       // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
       // @ts-expect-error this type does not exist but the property does!

code/addons/test/package.json

@@ -111,6 +111,7 @@
     "semver": "^7.6.3",
     "slash": "^5.0.0",
     "strip-ansi": "^7.1.0",
+    "tinyglobby": "^0.2.10",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.3.2",
     "vitest": "^2.1.3"

code/addons/test/src/node/test-manager.ts

@@ -56,6 +56,13 @@ export class TestManager {
         this.coverage = payload.config.coverage;
         await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
       } catch (e) {
+        const isV8 = e.message?.includes('@vitest/coverage-v8');
+        const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
+
+        if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
+          const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
+          e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
+        }
         this.reportFatalError('Failed to change coverage mode', e);
       }
     }

code/addons/test/src/node/vitest-manager.ts

@@ -83,6 +83,14 @@ export class VitestManager {
     try {
       await this.vitest.init();
     } catch (e) {
+      const isV8 = e.message?.includes('@vitest/coverage-v8');
+      const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
+
+      if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
+        const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
+        e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
+      }
+
       this.testManager.reportFatalError('Failed to init Vitest', e);
     }
 

code/addons/test/src/postinstall.ts

@@ -336,8 +336,6 @@ export default async function postInstall(options: PostinstallOptions) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
     const extension = extname(rootConfig);
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
-    // to be set in vitest config
-    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -355,6 +353,7 @@ export default async function postInstall(options: PostinstallOptions) {
           {
             extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
             plugins: [
+              // The plugin will run tests for the stories defined in your Storybook config 
               // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
               storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
             ],
@@ -366,9 +365,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 name: 'chromium',
                 provider: 'playwright',
               },
-              // Make sure to adjust this pattern to match your stories files.
-              include: ['**/*.stories.?(m)[jt]s?(x)'],
-              setupFiles: ['${vitestSetupFilePath}'],
+              setupFiles: ['./.storybook/vitest.setup.ts'],
             },
           },
         ]);
@@ -393,6 +390,7 @@ export default async function postInstall(options: PostinstallOptions) {
         // More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
         export default defineConfig({
           plugins: [
+            // The plugin will run tests for the stories defined in your Storybook config 
             // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
             storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
           ],
@@ -404,8 +402,6 @@ export default async function postInstall(options: PostinstallOptions) {
               name: 'chromium',
               provider: 'playwright',
             },
-            // Make sure to adjust this pattern to match your stories files.
-            include: ['**/*.stories.?(m)[jt]s?(x)'],
             setupFiles: ['${vitestSetupFilePath}'],
           },
         });

code/addons/test/src/vitest-plugin/index.ts

@@ -4,13 +4,16 @@ import type { Plugin } from 'vitest/config';
 import {
   getInterpretedFile,
   loadAllPresets,
+  normalizeStories,
   validateConfigurationFiles,
 } from 'storybook/internal/common';
+import { StoryIndexGenerator } from 'storybook/internal/core-server';
 import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
-import type { StoriesEntry } from 'storybook/internal/types';
+import type { DocsOptions, StoriesEntry } from 'storybook/internal/types';
 
 import { join, resolve } from 'pathe';
+import { convertPathToPattern } from 'tinyglobby';
 
 import type { InternalOptions, UserOptions } from './types';
 
@@ -51,15 +54,15 @@ export const storybookTest = (options?: UserOptions): Plugin => {
   process.env.__STORYBOOK_URL__ = storybookUrl;
   process.env.__STORYBOOK_SCRIPT__ = finalOptions.storybookScript;
 
-  let stories: StoriesEntry[];
-
   if (!finalOptions.configDir) {
     finalOptions.configDir = resolve(join(process.cwd(), '.storybook'));
   } else {
     finalOptions.configDir = resolve(process.cwd(), finalOptions.configDir);
   }
 
   let previewLevelTags: string[];
+  let storiesGlobs: StoriesEntry[];
+  let storiesFiles: string[];
 
   return {
     name: 'vite-plugin-storybook-test',
@@ -82,20 +85,49 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         packageJson: {},
       });
 
-      stories = await presets.apply('stories', []);
+      const workingDir = process.cwd();
+      const directories = {
+        configDir,
+        workingDir,
+      };
+      storiesGlobs = await presets.apply('stories');
+      const indexers = await presets.apply('experimental_indexers', []);
+      const docsOptions = await presets.apply<DocsOptions>('docs', {});
+      const normalizedStories = normalizeStories(await storiesGlobs, directories);
+
+      const generator = new StoryIndexGenerator(normalizedStories, {
+        ...directories,
+        indexers: indexers,
+        docs: docsOptions,
+        workingDir,
+      });
+
+      await generator.initialize();
+
+      storiesFiles = generator.storyFileNames();
+
       previewLevelTags = await extractTagsFromPreview(configDir);
 
       const framework = await presets.apply('framework', undefined);
       const frameworkName = typeof framework === 'string' ? framework : framework.name;
+      const storybookEnv = await presets.apply('env', {});
 
       // If we end up needing to know if we are running in browser mode later
       // const isRunningInBrowserMode = config.plugins.find((plugin: Plugin) =>
       //   plugin.name?.startsWith('vitest:browser')
       // )
+
       config.test ??= {};
 
+      config.test.include ??= [];
+      config.test.include.push(...storiesFiles.map((path) => convertPathToPattern(path)));
+
+      config.test.exclude ??= [];
+      config.test.exclude.push('**/*.mdx');
+
       config.test.env ??= {};
       config.test.env = {
+        ...storybookEnv,
         ...config.test.env,
         // To be accessed by the setup file
         __STORYBOOK_URL__: storybookUrl,
@@ -104,6 +136,8 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         __VITEST_SKIP_TAGS__: finalOptions.tags.skip.join(','),
       };
 
+      config.envPrefix = Array.from(new Set([...(config.envPrefix || []), 'STORYBOOK_', 'VITE_']));
+
       if (config.test.browser) {
         config.test.browser.screenshotFailures ??= false;
       }
@@ -163,13 +197,13 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         return code;
       }
 
-      if (id.match(/(story|stories)\.[cm]?[jt]sx?$/)) {
+      if (storiesFiles.includes(id)) {
         return vitestTransform({
           code,
           fileName: id,
           configDir: finalOptions.configDir,
           tagsFilter: finalOptions.tags,
-          stories,
+          stories: storiesGlobs,
           previewLevelTags,
         });
       }

code/core/src/core-server/index.ts

@@ -6,3 +6,4 @@ export * from './build-static';
 export * from './build-dev';
 export * from './withTelemetry';
 export { default as build } from './standalone';
+export { StoryIndexGenerator } from './utils/StoryIndexGenerator';

code/core/src/manager/components/sidebar/Tree.tsx

@@ -273,7 +273,10 @@ const Node = React.memo<NodeProps>(function Node({
   ]);
 
   const id = createId(item.id, refId);
-  const contextMenu = useContextMenu(item, statusLinks, api);
+  const contextMenu =
+    refId === 'storybook_internal'
+      ? useContextMenu(item, statusLinks, api)
+      : { node: null, onMouseEnter: () => {} };
 
   if (item.type === 'story' || item.type === 'docs') {
     const LeafNode = item.type === 'docs' ? DocumentNode : StoryNode;

code/core/src/types/modules/core-common.ts

@@ -71,6 +71,7 @@ export interface Presets {
   apply(extension: 'babel', config?: {}, args?: any): Promise<any>;
   apply(extension: 'swc', config?: {}, args?: any): Promise<any>;
   apply(extension: 'entries', config?: [], args?: any): Promise<unknown>;
+  apply(extension: 'env', config?: {}, args?: any): Promise<any>;
   apply(extension: 'stories', config?: [], args?: any): Promise<StoriesEntry[]>;
   apply(extension: 'managerEntries', config: [], args?: any): Promise<string[]>;
   apply(extension: 'refs', config?: [], args?: any): Promise<StorybookConfigRaw['refs']>;

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -3,7 +3,7 @@ import { dirname, join, parse, relative, resolve } from 'node:path';
 
 import findPackageJson from 'find-package-json';
 import MagicString from 'magic-string';
-import type { ModuleNode, PluginOption } from 'vite';
+import type { ModuleNode, Plugin } from 'vite';
 import {
   type ComponentMeta,
   type MetaCheckerOptions,
@@ -21,7 +21,7 @@ type MetaSource = {
 } & ComponentMeta &
   MetaCheckerOptions['schema'];
 
-export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<PluginOption> {
+export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   // exclude stories, virtual modules and storybook internals

code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

@@ -1,8 +1,8 @@
 import MagicString from 'magic-string';
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 import { parse } from 'vue-docgen-api';
 
-export async function vueDocgen(): Promise<PluginOption> {
+export async function vueDocgen(): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   const include = /\.(vue)$/;

code/frameworks/vue3-vite/src/plugins/vue-template.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite';
 
-export async function templateCompilation() {
+export async function templateCompilation(): Promise<Plugin> {
   return {
     name: 'storybook:vue-template-compilation',
     config: () => ({

code/frameworks/vue3-vite/src/preset.ts

@@ -2,7 +2,7 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 
 import { vueComponentMeta } from './plugins/vue-component-meta';
 import { vueDocgen } from './plugins/vue-docgen';
@@ -18,7 +18,7 @@ export const core: PresetProperty<'core'> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
-  const plugins: PluginOption[] = [templateCompilation()];
+  const plugins: Plugin[] = [await templateCompilation()];
 
   const framework = await options.presets.apply('framework');
   const frameworkOptions: FrameworkOptions =

code/frameworks/vue3-vite/src/vite-plugin.ts

@@ -1,5 +1,7 @@
+import type { Plugin } from 'vite';
+
 import { templateCompilation } from './plugins/vue-template';
 
-export const storybookVuePlugin = () => {
+export const storybookVuePlugin = (): Promise<Plugin>[] => {
   return [templateCompilation()];
 };

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.0-alpha.18"
 }

code/yarn.lock

@@ -6633,6 +6633,7 @@ __metadata:
     semver: "npm:^7.6.3"
     slash: "npm:^5.0.0"
     strip-ansi: "npm:^7.1.0"
+    tinyglobby: "npm:^0.2.10"
     ts-dedent: "npm:^2.2.0"
     typescript: "npm:^5.3.2"
     vitest: "npm:^2.1.3"
@@ -15758,7 +15759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.2.0":
+"fdir@npm:^6.2.0, fdir@npm:^6.4.2":
   version: 6.4.2
   resolution: "fdir@npm:6.4.2"
   peerDependencies:
@@ -23192,6 +23193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
 "picoquery@npm:^1.4.0":
   version: 1.4.0
   resolution: "picoquery@npm:1.4.0"
@@ -27703,6 +27711,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyglobby@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "tinyglobby@npm:0.2.10"
+  dependencies:
+    fdir: "npm:^6.4.2"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/ce946135d39b8c0e394e488ad59f4092e8c4ecd675ef1bcd4585c47de1b325e61ec6adfbfbe20c3c2bfa6fd674c5b06de2a2e65c433f752ae170aff11793e5ef
+  languageName: node
+  linkType: hard
+
 "tinypool@npm:^1.0.0":
   version: 1.0.0
   resolution: "tinypool@npm:1.0.0"

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.5.0-alpha.17","info":{"plain":"- CLI: Fix new-frameworks automigration - [#29804](https://github.com/storybookjs/storybook/pull/29804), thanks @yannbf!\n- ReactVite: Add `@storybook/test` as optional peer dependency - [#29754](https://github.com/storybookjs/storybook/pull/29754), thanks @yannbf!\n- Vite: Fix preview runtime import - [#29802](https://github.com/storybookjs/storybook/pull/29802), thanks @yannbf!"}}
+{"version":"8.5.0-alpha.18","info":{"plain":"- Addon Test: Clarify message when `vitest` detects missing deps - [#29763](https://github.com/storybookjs/storybook/pull/29763), thanks @ndelangen!\n- Addon Test: Refactor test addon to include stories automatically - [#29367](https://github.com/storybookjs/storybook/pull/29367), thanks @yannbf!\n- Addon Test: Replace `glob` with `tinyglobby` - [#29817](https://github.com/storybookjs/storybook/pull/29817), thanks @ghengeveld!\n- Addon Test: Support Storybook environment variables in Vitest - [#29792](https://github.com/storybookjs/storybook/pull/29792), thanks @ghengeveld!\n- Composition: Hide contextMenu on composed storybooks - [#29803](https://github.com/storybookjs/storybook/pull/29803), thanks @ndelangen!\n- Vue: Properly resolve Vite plugin - [#29795](https://github.com/storybookjs/storybook/pull/29795), thanks @tobiasdiez!"}}