Merge pull request #29792 from storybookjs/storybook-env-vars-in-vitest

Addon Test: Support Storybook environment variables in Vitest
storybookjs · Dec 4, 2024 · 1370dc2 · 1370dc2
2 parents 4489350 + 4baa486
commit 1370dc2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts
@@ -87,6 +87,7 @@ export const storybookTest = (options?: UserOptions): Plugin => {
 
       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) =>
@@ -96,6 +97,7 @@ export const storybookTest = (options?: UserOptions): Plugin => {
 
       config.test.env ??= {};
       config.test.env = {
+        ...storybookEnv,
         ...config.test.env,
         // To be accessed by the setup file
         __STORYBOOK_URL__: storybookUrl,
@@ -104,6 +106,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;
       }

diff --git a/code/core/src/types/modules/core-common.ts b/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']>;