From f4ab3a4215c13e267b82ff1f8fc526c67d52ce31 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 30 Aug 2024 15:46:29 +0200
Subject: [PATCH 01/15] Fix indentation of 'vitePluginNext' in generated Vitest
 config file

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 3ffcd813628e..368c6f7a1234 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -130,7 +130,7 @@ export default async function postInstall(options: PostinstallOptions) {
             {
               extends: '${viteConfig ? relative(dirname(browserWorkspaceFile), viteConfig) : ''}',
               plugins: [
-                storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+                storybookTest(),${vitestInfo.frameworkPluginCall ? '\n      ' + vitestInfo.frameworkPluginCall : ''}
               ],
               test: {
                 browser: {

From 4d5447cfbc37c410a33e9a46e23b5380e7b06d19 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 30 Aug 2024 16:56:09 +0200
Subject: [PATCH 02/15] Rename addon vitest to addon test

---
 code/.storybook/main.ts                       |  2 +-
 code/.storybook/vitest.config.ts              |  2 +-
 code/addons/{vitest => test}/README.md        |  0
 code/addons/{vitest => test}/package.json     |  4 ++--
 code/addons/{vitest => test}/postinstall.cjs  |  0
 code/addons/{vitest => test}/preset.cjs       |  0
 code/addons/{vitest => test}/project.json     |  4 ++--
 code/addons/{vitest => test}/src/constants.ts |  0
 code/addons/{vitest => test}/src/index.ts     |  0
 code/addons/{vitest => test}/src/manager.tsx  |  0
 .../src/plugin/global-setup.ts                |  0
 .../{vitest => test}/src/plugin/index.ts      |  6 ++---
 .../src/plugin/setup-file.test.ts             |  0
 .../{vitest => test}/src/plugin/setup-file.ts |  0
 .../{vitest => test}/src/plugin/test-utils.ts |  0
 .../{vitest => test}/src/plugin/types.ts      |  0
 .../src/plugin/viewports.test.ts              |  0
 .../{vitest => test}/src/plugin/viewports.ts  |  0
 .../{vitest => test}/src/postinstall.ts       |  4 ++--
 code/addons/{vitest => test}/src/preset.ts    |  0
 code/addons/{vitest => test}/tsconfig.json    |  0
 code/addons/{vitest => test}/typings.d.ts     |  0
 code/addons/{vitest => test}/vitest.config.ts |  0
 code/core/src/common/versions.ts              |  2 +-
 .../vitest-plugin/transformer.test.ts         | 24 +++++++++----------
 .../csf-tools/vitest-plugin/transformer.ts    |  2 +-
 code/package.json                             |  2 +-
 code/yarn.lock                                |  6 ++---
 scripts/tasks/sandbox-parts.ts                |  4 ++--
 scripts/tasks/sandbox.ts                      |  2 +-
 30 files changed, 32 insertions(+), 32 deletions(-)
 rename code/addons/{vitest => test}/README.md (100%)
 rename code/addons/{vitest => test}/package.json (97%)
 rename code/addons/{vitest => test}/postinstall.cjs (100%)
 rename code/addons/{vitest => test}/preset.cjs (100%)
 rename code/addons/{vitest => test}/project.json (83%)
 rename code/addons/{vitest => test}/src/constants.ts (100%)
 rename code/addons/{vitest => test}/src/index.ts (100%)
 rename code/addons/{vitest => test}/src/manager.tsx (100%)
 rename code/addons/{vitest => test}/src/plugin/global-setup.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/index.ts (98%)
 rename code/addons/{vitest => test}/src/plugin/setup-file.test.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/setup-file.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/test-utils.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/types.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/viewports.test.ts (100%)
 rename code/addons/{vitest => test}/src/plugin/viewports.ts (100%)
 rename code/addons/{vitest => test}/src/postinstall.ts (99%)
 rename code/addons/{vitest => test}/src/preset.ts (100%)
 rename code/addons/{vitest => test}/tsconfig.json (100%)
 rename code/addons/{vitest => test}/typings.d.ts (100%)
 rename code/addons/{vitest => test}/vitest.config.ts (100%)

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index e3f8e6b53f34..a4cedde66608 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -91,7 +91,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
-    '@storybook/experimental-addon-vitest',
+    '@storybook/experimental-addon-test',
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],
diff --git a/code/.storybook/vitest.config.ts b/code/.storybook/vitest.config.ts
index 4e7c8fdd87d2..a6120deed897 100644
--- a/code/.storybook/vitest.config.ts
+++ b/code/.storybook/vitest.config.ts
@@ -21,7 +21,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineProject({
     plugins: [
-      import('@storybook/experimental-addon-vitest/plugin').then(({ storybookTest }) =>
+      import('@storybook/experimental-addon-test/vite-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
         })
diff --git a/code/addons/vitest/README.md b/code/addons/test/README.md
similarity index 100%
rename from code/addons/vitest/README.md
rename to code/addons/test/README.md
diff --git a/code/addons/vitest/package.json b/code/addons/test/package.json
similarity index 97%
rename from code/addons/vitest/package.json
rename to code/addons/test/package.json
index fd4c94863253..8a23fa54c7a4 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/test/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@storybook/experimental-addon-vitest",
+  "name": "@storybook/experimental-addon-test",
   "version": "8.3.0-beta.0",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
@@ -29,7 +29,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./plugin": {
+    "./vite-plugin": {
       "types": "./dist/plugin/index.d.ts",
       "import": "./dist/plugin/index.js",
       "require": "./dist/plugin/index.cjs"
diff --git a/code/addons/vitest/postinstall.cjs b/code/addons/test/postinstall.cjs
similarity index 100%
rename from code/addons/vitest/postinstall.cjs
rename to code/addons/test/postinstall.cjs
diff --git a/code/addons/vitest/preset.cjs b/code/addons/test/preset.cjs
similarity index 100%
rename from code/addons/vitest/preset.cjs
rename to code/addons/test/preset.cjs
diff --git a/code/addons/vitest/project.json b/code/addons/test/project.json
similarity index 83%
rename from code/addons/vitest/project.json
rename to code/addons/test/project.json
index 71cca948ed01..f9278931287c 100644
--- a/code/addons/vitest/project.json
+++ b/code/addons/test/project.json
@@ -1,8 +1,8 @@
 {
-  "name": "vitest",
+  "name": "addon-test",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
     "build": {}
   }
-}
+}
\ No newline at end of file
diff --git a/code/addons/vitest/src/constants.ts b/code/addons/test/src/constants.ts
similarity index 100%
rename from code/addons/vitest/src/constants.ts
rename to code/addons/test/src/constants.ts
diff --git a/code/addons/vitest/src/index.ts b/code/addons/test/src/index.ts
similarity index 100%
rename from code/addons/vitest/src/index.ts
rename to code/addons/test/src/index.ts
diff --git a/code/addons/vitest/src/manager.tsx b/code/addons/test/src/manager.tsx
similarity index 100%
rename from code/addons/vitest/src/manager.tsx
rename to code/addons/test/src/manager.tsx
diff --git a/code/addons/vitest/src/plugin/global-setup.ts b/code/addons/test/src/plugin/global-setup.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/global-setup.ts
rename to code/addons/test/src/plugin/global-setup.ts
diff --git a/code/addons/vitest/src/plugin/index.ts b/code/addons/test/src/plugin/index.ts
similarity index 98%
rename from code/addons/vitest/src/plugin/index.ts
rename to code/addons/test/src/plugin/index.ts
index 322e1d5bb74b..e71b54cefe81 100644
--- a/code/addons/vitest/src/plugin/index.ts
+++ b/code/addons/test/src/plugin/index.ts
@@ -113,7 +113,7 @@ export const storybookTest = (options?: UserOptions): Plugin => {
       if (typeof config.test.setupFiles === 'string') {
         config.test.setupFiles = [config.test.setupFiles];
       }
-      config.test.setupFiles.push('@storybook/experimental-addon-vitest/internal/setup-file');
+      config.test.setupFiles.push('@storybook/experimental-addon-test/internal/setup-file');
 
       // when a Storybook script is provided, we spawn Storybook for the user when in watch mode
       if (finalOptions.storybookScript) {
@@ -121,14 +121,14 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         if (typeof config.test.globalSetup === 'string') {
           config.test.globalSetup = [config.test.globalSetup];
         }
-        config.test.globalSetup.push('@storybook/experimental-addon-vitest/internal/global-setup');
+        config.test.globalSetup.push('@storybook/experimental-addon-test/internal/global-setup');
       }
 
       config.test.server ??= {};
       config.test.server.deps ??= {};
       config.test.server.deps.inline ??= [];
       if (Array.isArray(config.test.server.deps.inline)) {
-        config.test.server.deps.inline.push('@storybook/experimental-addon-vitest');
+        config.test.server.deps.inline.push('@storybook/experimental-addon-test');
       }
     },
     async transform(code, id) {
diff --git a/code/addons/vitest/src/plugin/setup-file.test.ts b/code/addons/test/src/plugin/setup-file.test.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/setup-file.test.ts
rename to code/addons/test/src/plugin/setup-file.test.ts
diff --git a/code/addons/vitest/src/plugin/setup-file.ts b/code/addons/test/src/plugin/setup-file.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/setup-file.ts
rename to code/addons/test/src/plugin/setup-file.ts
diff --git a/code/addons/vitest/src/plugin/test-utils.ts b/code/addons/test/src/plugin/test-utils.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/test-utils.ts
rename to code/addons/test/src/plugin/test-utils.ts
diff --git a/code/addons/vitest/src/plugin/types.ts b/code/addons/test/src/plugin/types.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/types.ts
rename to code/addons/test/src/plugin/types.ts
diff --git a/code/addons/vitest/src/plugin/viewports.test.ts b/code/addons/test/src/plugin/viewports.test.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/viewports.test.ts
rename to code/addons/test/src/plugin/viewports.test.ts
diff --git a/code/addons/vitest/src/plugin/viewports.ts b/code/addons/test/src/plugin/viewports.ts
similarity index 100%
rename from code/addons/vitest/src/plugin/viewports.ts
rename to code/addons/test/src/plugin/viewports.ts
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/test/src/postinstall.ts
similarity index 99%
rename from code/addons/vitest/src/postinstall.ts
rename to code/addons/test/src/postinstall.ts
index 3ffcd813628e..a33ee94221e0 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -123,7 +123,7 @@ export default async function postInstall(options: PostinstallOptions) {
         browserWorkspaceFile,
         dedent`
           import { defineWorkspace } from 'vitest/config';
-          import { storybookTest } from '@storybook/experimental-addon-vitest/plugin';
+          import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
           ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
           export default defineWorkspace([
             '${relative(dirname(browserWorkspaceFile), rootConfig)}',
@@ -154,7 +154,7 @@ export default async function postInstall(options: PostinstallOptions) {
       resolve('vitest.config.ts'),
       dedent`
         import { defineConfig } from "vitest/config";
-        import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+        import { storybookTest } from "@storybook/experimental-addon-test/vite-plugin";
         ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
         export default defineConfig({
           plugins: [
diff --git a/code/addons/vitest/src/preset.ts b/code/addons/test/src/preset.ts
similarity index 100%
rename from code/addons/vitest/src/preset.ts
rename to code/addons/test/src/preset.ts
diff --git a/code/addons/vitest/tsconfig.json b/code/addons/test/tsconfig.json
similarity index 100%
rename from code/addons/vitest/tsconfig.json
rename to code/addons/test/tsconfig.json
diff --git a/code/addons/vitest/typings.d.ts b/code/addons/test/typings.d.ts
similarity index 100%
rename from code/addons/vitest/typings.d.ts
rename to code/addons/test/typings.d.ts
diff --git a/code/addons/vitest/vitest.config.ts b/code/addons/test/vitest.config.ts
similarity index 100%
rename from code/addons/vitest/vitest.config.ts
rename to code/addons/test/vitest.config.ts
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index de0955911dbf..6c748bde75c6 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -15,10 +15,10 @@ export default {
   '@storybook/addon-onboarding': '8.3.0-beta.0',
   '@storybook/addon-outline': '8.3.0-beta.0',
   '@storybook/addon-storysource': '8.3.0-beta.0',
+  '@storybook/experimental-addon-test': '8.3.0-beta.0',
   '@storybook/addon-themes': '8.3.0-beta.0',
   '@storybook/addon-toolbars': '8.3.0-beta.0',
   '@storybook/addon-viewport': '8.3.0-beta.0',
-  '@storybook/experimental-addon-vitest': '8.3.0-beta.0',
   '@storybook/builder-vite': '8.3.0-beta.0',
   '@storybook/builder-webpack5': '8.3.0-beta.0',
   '@storybook/core': '8.3.0-beta.0',
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index a96833accaf4..72a1d05ab403 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -73,7 +73,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           component: Button,
           title: "automatic/calculated/title"
@@ -102,7 +102,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title",
           component: Button
@@ -132,7 +132,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const meta = {
           component: Button,
           title: "automatic/calculated/title"
@@ -163,7 +163,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const meta = {
           title: "automatic/calculated/title",
           component: Button
@@ -195,7 +195,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           component: Button,
           title: "automatic/calculated/title"
@@ -229,7 +229,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title"
         };
@@ -264,7 +264,7 @@ describe('transformer', () => {
       const result = await transform({ code });
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title"
         };
@@ -299,7 +299,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title",
           component: Button,
@@ -356,7 +356,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title"
         };
@@ -387,7 +387,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title"
         };
@@ -416,7 +416,7 @@ describe('transformer', () => {
 
       expect(result.code).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const _meta = {
           title: "automatic/calculated/title"
         };
@@ -449,7 +449,7 @@ describe('transformer', () => {
 
       expect(transformedCode).toMatchInlineSnapshot(`
         import { test as _test, expect as _expect } from "vitest";
-        import { testStory as _testStory } from "@storybook/experimental-addon-vitest/internal/test-utils";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
         const meta = {
           title: "automatic/calculated/title",
           component: Button
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index b2c66693b228..51ea1169f6c3 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -260,7 +260,7 @@ export async function vitestTransform({
       ),
       t.importDeclaration(
         [t.importSpecifier(testStoryId, t.identifier('testStory'))],
-        t.stringLiteral('@storybook/experimental-addon-vitest/internal/test-utils')
+        t.stringLiteral('@storybook/experimental-addon-test/internal/test-utils')
       ),
     ];
 
diff --git a/code/package.json b/code/package.json
index 119cadfb7f2a..b5f90dc041ec 100644
--- a/code/package.json
+++ b/code/package.json
@@ -126,7 +126,7 @@
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/ember": "workspace:*",
     "@storybook/eslint-config-storybook": "^4.0.0",
-    "@storybook/experimental-addon-vitest": "workspace:*",
+    "@storybook/experimental-addon-test": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
     "@storybook/html-vite": "workspace:*",
diff --git a/code/yarn.lock b/code/yarn.lock
index e7023fe8c13f..47def263899a 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6126,9 +6126,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/experimental-addon-vitest@workspace:*, @storybook/experimental-addon-vitest@workspace:addons/vitest":
+"@storybook/experimental-addon-test@workspace:*, @storybook/experimental-addon-test@workspace:addons/test":
   version: 0.0.0-use.local
-  resolution: "@storybook/experimental-addon-vitest@workspace:addons/vitest"
+  resolution: "@storybook/experimental-addon-test@workspace:addons/test"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@vitest/browser": "npm:^2.0.0"
@@ -6720,7 +6720,7 @@ __metadata:
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/ember": "workspace:*"
     "@storybook/eslint-config-storybook": "npm:^4.0.0"
-    "@storybook/experimental-addon-vitest": "workspace:*"
+    "@storybook/experimental-addon-test": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/html": "workspace:*"
     "@storybook/html-vite": "workspace:*"
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 34c7e20c0606..055f4e335617 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -435,7 +435,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
     join(sandboxDir, 'vitest.workspace.ts'),
     dedent`
       import { defineWorkspace, defaultExclude } from "vitest/config";
-      import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+      import { storybookTest } from "@storybook/experimental-addon-test/vite-plugin";
       ${frameworkPluginImport}
 
       export default defineWorkspace([
@@ -513,7 +513,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
     const vitestAddonPath = relative(sandboxDir, join(CODE_DIRECTORY, 'addons', 'vitest'));
     packageJson.resolutions = {
       ...packageJson.resolutions,
-      '@storybook/experimental-addon-vitest': `file:${vitestAddonPath}`,
+      '@storybook/experimental-addon-test': `file:${vitestAddonPath}`,
     };
   }
 
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index 2bb4e6e3999c..70e2e4a765af 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -94,7 +94,7 @@ export const sandbox: Task = {
         'vitest',
         'playwright',
         '@vitest/browser',
-        '@storybook/experimental-addon-vitest'
+        '@storybook/experimental-addon-test'
       );
 
       if (details.template.expected.framework.includes('nextjs')) {

From 82cf64d38c2550799ba1abdd93575fdf98f2d014 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 30 Aug 2024 17:18:42 +0200
Subject: [PATCH 03/15] refactor vite plugin export paths

---
 code/addons/vitest/src/postinstall.ts                  |  5 +++--
 code/frameworks/sveltekit/package.json                 | 10 +++++-----
 .../sveltekit/src/{vite.ts => vite-plugin.ts}          |  0
 code/frameworks/vue3-vite/package.json                 | 10 +++++-----
 .../vue3-vite/src/{vite.ts => vite-plugin.ts}          |  0
 scripts/tasks/sandbox-parts.ts                         |  5 +++--
 6 files changed, 16 insertions(+), 14 deletions(-)
 rename code/frameworks/sveltekit/src/{vite.ts => vite-plugin.ts} (100%)
 rename code/frameworks/vue3-vite/src/{vite.ts => vite-plugin.ts} (100%)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 3ffcd813628e..4ce20a8f6b52 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -194,12 +194,13 @@ const getVitestPluginInfo = (framework: string) => {
   }
 
   if (framework === '@storybook/sveltekit') {
-    frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'";
+    frameworkPluginImport =
+      "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'";
     frameworkPluginCall = 'storybookSveltekitPlugin()';
   }
 
   if (framework === '@storybook/vue3-vite') {
-    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'";
+    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin'";
     frameworkPluginCall = 'storybookVuePlugin()';
   }
 
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index fd3188892a44..78117179a970 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -36,10 +36,10 @@
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
     },
-    "./vite": {
-      "types": "./dist/vite.d.ts",
-      "require": "./dist/vite.js",
-      "import": "./dist/vite.mjs"
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "require": "./dist/vite-plugin.js",
+      "import": "./dist/vite-plugin.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -84,7 +84,7 @@
       "./src/index.ts",
       "./src/preview.ts",
       "./src/preset.ts",
-      "./src/vite.ts"
+      "./src/vite-plugin.ts"
     ],
     "platform": "node"
   },
diff --git a/code/frameworks/sveltekit/src/vite.ts b/code/frameworks/sveltekit/src/vite-plugin.ts
similarity index 100%
rename from code/frameworks/sveltekit/src/vite.ts
rename to code/frameworks/sveltekit/src/vite-plugin.ts
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 80f022446be5..98e7caad462e 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -30,10 +30,10 @@
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
     },
-    "./vite": {
-      "types": "./dist/vite.d.ts",
-      "require": "./dist/vite.js",
-      "import": "./dist/vite.mjs"
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "require": "./dist/vite-plugin.js",
+      "import": "./dist/vite-plugin.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -80,7 +80,7 @@
     "entries": [
       "./src/index.ts",
       "./src/preset.ts",
-      "./src/vite.ts"
+      "./src/vite-plugin.ts"
     ],
     "platform": "node"
   },
diff --git a/code/frameworks/vue3-vite/src/vite.ts b/code/frameworks/vue3-vite/src/vite-plugin.ts
similarity index 100%
rename from code/frameworks/vue3-vite/src/vite.ts
rename to code/frameworks/vue3-vite/src/vite-plugin.ts
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 34c7e20c0606..e7521fed2013 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -374,12 +374,13 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
   }
 
   if (isSveltekit) {
-    frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'";
+    frameworkPluginImport =
+      "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'";
     frameworkPluginCall = 'storybookSveltekitPlugin()';
   }
 
   if (framework === '@storybook/vue3-vite') {
-    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'";
+    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin'";
     frameworkPluginCall = 'storybookVuePlugin()';
   }
 

From dea51a7479c7654a5fafa864ea9e13aad00cfd90 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Fri, 30 Aug 2024 16:07:05 +0200
Subject: [PATCH 04/15] Nextjs-Vite: Re-export vite-plugin-storybook-nextjs

---
 code/addons/vitest/src/postinstall.ts          | 18 ++++++++++++++----
 .../experimental-nextjs-vite/package.json      | 15 ++++++++++-----
 .../experimental-nextjs-vite/src/preset.ts     |  1 -
 .../src/vite-plugin/index.ts                   |  3 +++
 .../lib/cli-storybook/src/sandbox-templates.ts |  7 +------
 code/yarn.lock                                 | 13 ++++++-------
 .../portable-stories-vitest.mdx                |  2 +-
 scripts/tasks/sandbox-parts.ts                 |  5 +++--
 scripts/tasks/sandbox.ts                       |  2 +-
 9 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 3ffcd813628e..dd5c284723b5 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -64,10 +64,19 @@ export default async function postInstall(options: PostinstallOptions) {
     logger.info(
       dedent`
         We detected that you're using Next.js.
-        We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+        We will configure the @storybook/experimental-nextjs-vite/vite-plugin to allow you to run tests in Vitest.
       `
     );
-    packages.push('vite-plugin-storybook-nextjs@latest');
+
+    try {
+      const storybookVersion = await packageManager.getInstalledVersion('storybook');
+
+      packages.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`);
+    } catch (e) {
+      console.error(
+        'Failed to install @storybook/experimental-nextjs-vite. Please install it manually'
+      );
+    }
   }
 
   logger.info(c.bold('Installing packages...'));
@@ -189,8 +198,9 @@ const getVitestPluginInfo = (framework: string) => {
   let frameworkPluginCall = '';
 
   if (framework === '@storybook/nextjs') {
-    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
-    frameworkPluginCall = 'vitePluginNext()';
+    frameworkPluginImport =
+      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+    frameworkPluginCall = 'storybookNextJsPlugin()';
   }
 
   if (framework === '@storybook/sveltekit') {
diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index 02c5cf4fa714..6d1339955e7b 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -53,6 +53,11 @@
       "import": "./dist/export-mocks/router/index.mjs",
       "require": "./dist/export-mocks/router/index.js"
     },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin/index.d.ts",
+      "import": "./dist/vite-plugin/index.js",
+      "require": "./dist/vite-plugin/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -93,21 +98,20 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
-    "styled-jsx": "5.1.6"
+    "styled-jsx": "5.1.6",
+    "vite-plugin-storybook-nextjs": "^1.0.10"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
     "next": "^14.2.5",
-    "typescript": "^5.3.2",
-    "vite-plugin-storybook-nextjs": "^1.0.0"
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "next": "^14.1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^5.0.0",
-    "vite-plugin-storybook-nextjs": "^1.0.8"
+    "vite": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -126,6 +130,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
+      "./src/vite-plugin/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
       "./src/export-mocks/cache/index.ts",
diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
index 6af7f9a877f0..0a725be35804 100644
--- a/code/frameworks/experimental-nextjs-vite/src/preset.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -6,7 +6,6 @@ import type { PresetProperty } from 'storybook/internal/types';
 import type { StorybookConfigVite } from '@storybook/builder-vite';
 
 import { dirname, join } from 'path';
-// @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve
 import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs';
 
 import type { FrameworkOptions } from './types';
diff --git a/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts b/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts
new file mode 100644
index 000000000000..2b8e5dff5622
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts
@@ -0,0 +1,3 @@
+import vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
+export const storybookNextJsPlugin = vitePluginStorybookNextJs;
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index ffdbccdd5e4d..f5937d53714b 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -216,12 +216,7 @@ const baseTemplates = {
         framework: '@storybook/experimental-nextjs-vite',
         features: { experimentalRSC: true },
       },
-      extraDependencies: [
-        'server-only',
-        'vite-plugin-storybook-nextjs',
-        '@storybook/experimental-nextjs-vite',
-        'vite',
-      ],
+      extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
diff --git a/code/yarn.lock b/code/yarn.lock
index e7023fe8c13f..9b8a426f6016 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6155,14 +6155,13 @@ __metadata:
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
-    vite-plugin-storybook-nextjs: "npm:^1.0.0"
+    vite-plugin-storybook-nextjs: "npm:^1.0.10"
   peerDependencies:
     next: ^14.1.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
     vite: ^5.0.0
-    vite-plugin-storybook-nextjs: ^1.0.8
   dependenciesMeta:
     sharp:
       optional: true
@@ -28374,9 +28373,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "vite-plugin-storybook-nextjs@npm:1.0.0"
+"vite-plugin-storybook-nextjs@npm:^1.0.10":
+  version: 1.0.10
+  resolution: "vite-plugin-storybook-nextjs@npm:1.0.10"
   dependencies:
     "@next/env": "npm:^14.2.5"
     image-size: "npm:^1.1.1"
@@ -28386,13 +28385,13 @@ __metadata:
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
     "@storybook/test": ^8.3.0-alpha.3
-    next: ^14.2.5
+    next: ^14.1.0
     storybook: ^8.3.0-alpha.3
     vite: ^5.0.0
   dependenciesMeta:
     sharp:
       optional: true
-  checksum: 10c0/6ca17326e0387044d7bfa4373e6ccb64e8bb5bec1f19898ba9b8338c7817d8bea0fb01169adfb623f652fded5e6f59170129f7c8c4d4c3c54ca3764727e5a195
+  checksum: 10c0/e0e373ef94e1761b871b2cc846c205a846901d93c7e61f9d9ee3c69740681e42e6403a7d61109c59f2d98d5829476c3e6d4e9d5a329c4bd51e758b763fa8ea9e
   languageName: node
   linkType: hard
 
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index a764fbe28a56..115f3d50b949 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -28,7 +28,7 @@ sidebar:
 
   <If renderer="react">
     <Callout variant="warning">
-      **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
+      **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/experimental-nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
     </Callout>
   </If>
 
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 34c7e20c0606..69af0a63fda3 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -369,8 +369,9 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
   const isSveltekit = framework.includes('sveltekit');
 
   if (isNextjs) {
-    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
-    frameworkPluginCall = 'vitePluginNext()';
+    frameworkPluginImport =
+      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+    frameworkPluginCall = 'storybookNextJsPlugin()';
   }
 
   if (isSveltekit) {
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index 2bb4e6e3999c..ae175fe3c13c 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -98,7 +98,7 @@ export const sandbox: Task = {
       );
 
       if (details.template.expected.framework.includes('nextjs')) {
-        extraDeps.push('vite-plugin-storybook-nextjs', 'jsdom');
+        extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom');
       }
 
       // if (details.template.expected.renderer === '@storybook/svelte') {

From 1dadd476f9bd3ab73880bd2afb77ecd6aaed7cb0 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 2 Sep 2024 09:56:54 +0200
Subject: [PATCH 05/15] don't use parameters for default viewports, as they are
 not overridable

---
 code/addons/viewport/src/components/Tool.tsx | 6 +++---
 code/addons/viewport/src/preview.ts          | 8 --------
 code/addons/viewport/src/utils.tsx           | 2 --
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx
index 3564ecad2c08..52b8713c7919 100644
--- a/code/addons/viewport/src/components/Tool.tsx
+++ b/code/addons/viewport/src/components/Tool.tsx
@@ -7,15 +7,15 @@ import { Global } from 'storybook/internal/theming';
 import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { MINIMAL_VIEWPORTS } from '../defaults';
 import { responsiveViewport } from '../responsiveViewport';
 import { registerShortcuts } from '../shortcuts';
-import type { Config, GlobalState, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
+import type { Config, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
 import {
   ActiveViewportLabel,
   ActiveViewportSize,
   IconButtonLabel,
   IconButtonWithLabel,
-  emptyViewportMap,
   iconsMap,
 } from '../utils';
 
@@ -39,7 +39,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => {
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyViewportMap, disable } = config || {};
+  const { options = MINIMAL_VIEWPORTS, disable } = config || {};
   const data = globals?.[KEY] || {};
   const viewportName: string = data.value;
   const isRotated: boolean = data.isRotated;
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
index 21f45e310635..9c8ddc9cfb0e 100644
--- a/code/addons/viewport/src/preview.ts
+++ b/code/addons/viewport/src/preview.ts
@@ -10,11 +10,3 @@ const modern: Record<string, GlobalState> = {
 const legacy = { viewport: 'reset', viewportRotated: false };
 
 export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
-
-export const parameters = FEATURES?.viewportStoryGlobals
-  ? {
-      [KEY]: {
-        options: MINIMAL_VIEWPORTS,
-      },
-    }
-  : {};
diff --git a/code/addons/viewport/src/utils.tsx b/code/addons/viewport/src/utils.tsx
index e83572e89628..619ddc178d3e 100644
--- a/code/addons/viewport/src/utils.tsx
+++ b/code/addons/viewport/src/utils.tsx
@@ -42,5 +42,3 @@ export const iconsMap: Record<Viewport['type'], React.ReactNode> = {
   tablet: <TabletIcon />,
   other: <Fragment />,
 };
-
-export const emptyViewportMap: ViewportMap = {};

From f9454736396716177be5ff5edc2d653f85cef9bf Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 2 Sep 2024 10:17:11 +0200
Subject: [PATCH 06/15] Fix type export for
 @storybook/experimental-nextjs-vite/vite-plugin

---
 code/frameworks/experimental-nextjs-vite/src/index.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/code/frameworks/experimental-nextjs-vite/src/index.ts b/code/frameworks/experimental-nextjs-vite/src/index.ts
index a904f93ec89d..32476387c88c 100644
--- a/code/frameworks/experimental-nextjs-vite/src/index.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/index.ts
@@ -1,2 +1,10 @@
+import type vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
 export * from './types';
 export * from './portable-stories';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+declare module '@storybook/experimental-nextjs-vite/vite-plugin' {
+  export const storybookNextJsPlugin: typeof vitePluginStorybookNextJs;
+}

From 873493b3f762c268d4623c687b339325a361a941 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 2 Sep 2024 10:29:28 +0200
Subject: [PATCH 07/15] dont' use parameters for default backgrounds, as they
 are not overridable

---
 .../backgrounds/src/components/Tool.tsx       |  5 ++---
 code/addons/backgrounds/src/decorator.ts      |  8 +++++++-
 code/addons/backgrounds/src/defaults.ts       |  6 ++++++
 code/addons/backgrounds/src/preview.ts        | 19 +++++--------------
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 code/addons/backgrounds/src/defaults.ts

diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx
index 5f94606d0614..828cc3b3a3d4 100644
--- a/code/addons/backgrounds/src/components/Tool.tsx
+++ b/code/addons/backgrounds/src/components/Tool.tsx
@@ -6,18 +6,17 @@ import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { DEFAULT_BACKGROUNDS } from '../defaults';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
 
 type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
 
-const emptyBackgroundMap: BackgroundMap = {};
-
 export const BackgroundTool = memo(function BackgroundSelector() {
   const config = useParameter<Config>(KEY);
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyBackgroundMap, disable = true } = config || {};
+  const { options = DEFAULT_BACKGROUNDS, disable = true } = config || {};
   if (disable) {
     return null;
   }
diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts
index ecaccb44c99d..82d12f715366 100644
--- a/code/addons/backgrounds/src/decorator.ts
+++ b/code/addons/backgrounds/src/decorator.ts
@@ -6,6 +6,7 @@ import type {
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import type { Config, GridConfig } from './types';
 import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
 
@@ -25,7 +26,11 @@ export const withBackgroundAndGrid = (
   context: StoryContext<Renderer>
 ) => {
   const { globals, parameters, viewMode, id } = context;
-  const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config;
+  const {
+    options = DEFAULT_BACKGROUNDS,
+    disable,
+    grid = defaultGrid,
+  } = (parameters[KEY] || {}) as Config;
   const data = globals[KEY] || {};
   const backgroundName: string | undefined = data.value;
 
@@ -35,6 +40,7 @@ export const withBackgroundAndGrid = (
   const showGrid = data.grid || false;
   const shownBackground = !!item && !disable;
 
+  console.log({ context, globals, parameters, options, data, item, value, shownBackground, KEY });
   const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
   const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
 
diff --git a/code/addons/backgrounds/src/defaults.ts b/code/addons/backgrounds/src/defaults.ts
new file mode 100644
index 000000000000..6b9329d15458
--- /dev/null
+++ b/code/addons/backgrounds/src/defaults.ts
@@ -0,0 +1,6 @@
+import type { BackgroundMap } from './types';
+
+export const DEFAULT_BACKGROUNDS: BackgroundMap = {
+  light: { name: 'light', value: '#F8F8F8' },
+  dark: { name: 'dark', value: '#333' },
+};
diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts
index 9d773da2d48e..212a88c0bec2 100644
--- a/code/addons/backgrounds/src/preview.ts
+++ b/code/addons/backgrounds/src/preview.ts
@@ -2,6 +2,7 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import { withBackground } from './legacy/withBackgroundLegacy';
 import { withGrid } from './legacy/withGridLegacy';
 import type { Config, GlobalState } from './types';
@@ -18,20 +19,10 @@ export const parameters = {
       cellAmount: 5,
     },
     disable: false,
-    ...(FEATURES?.backgroundsStoryGlobals
-      ? {
-          options: {
-            light: { name: 'light', value: '#F8F8F8' },
-            dark: { name: 'dark', value: '#333' },
-          },
-        }
-      : {
-          // TODO: remove in 9.0
-          values: [
-            { name: 'light', value: '#F8F8F8' },
-            { name: 'dark', value: '#333333' },
-          ],
-        }),
+    // TODO: remove in 9.0
+    ...(!FEATURES?.backgroundsStoryGlobals && {
+      values: Object.values(DEFAULT_BACKGROUNDS),
+    }),
   } satisfies Partial<Config>,
 };
 

From a0ccf5b8a14ee7334e8ee5f6b060e54c9163fe6d Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 2 Sep 2024 10:50:23 +0200
Subject: [PATCH 08/15] Add type declaration for storybookTest in plugin module

---
 code/addons/test/src/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/code/addons/test/src/index.ts b/code/addons/test/src/index.ts
index dafa948eda6c..9a3583d228c5 100644
--- a/code/addons/test/src/index.ts
+++ b/code/addons/test/src/index.ts
@@ -1,2 +1,9 @@
+import type { storybookTest as storybookTestImport } from './plugin';
+
 // make it work with --isolatedModules
 export default {};
+
+// @ts-expect-error - this is a hack to make the module's sub-path augmentable
+declare module '@storybook/experimental-addon-test/vite-plugin' {
+  export const storybookTest: typeof storybookTestImport;
+}

From ec394c0ac7a9b926773c49e65dd58769b72cddf9 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 2 Sep 2024 12:45:26 +0200
Subject: [PATCH 09/15] cleanup

---
 code/addons/backgrounds/src/decorator.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts
index 82d12f715366..9fa8419d8eb0 100644
--- a/code/addons/backgrounds/src/decorator.ts
+++ b/code/addons/backgrounds/src/decorator.ts
@@ -40,7 +40,6 @@ export const withBackgroundAndGrid = (
   const showGrid = data.grid || false;
   const shownBackground = !!item && !disable;
 
-  console.log({ context, globals, parameters, options, data, item, value, shownBackground, KEY });
   const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
   const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
 

From a476108e33ec17c414a46f432c0c1d35b89efe08 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 2 Sep 2024 13:17:54 +0200
Subject: [PATCH 10/15] CLI: Handle Yarn PnP wrapper scenario when adding an
 addon

---
 code/lib/cli-storybook/src/add.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index df3ac84f140f..acc259c83b55 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -13,6 +13,11 @@ import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import SemVer from 'semver';
 import { dedent } from 'ts-dedent';
 
+import {
+  getRequireWrapperName,
+  isRequireWrapperNecessary,
+  wrapValueWithRequireWrapper,
+} from './automigrate/fixes/wrap-require-utils';
 import { postinstallAddon } from './postinstallAddon';
 
 export interface PostinstallOptions {
@@ -136,7 +141,17 @@ export async function add(
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 
   logger.log(`Adding '${addon}' to main.js addons field.`);
-  main.appendValueToArray(['addons'], addonName);
+
+  const mainConfigAddons = main.getFieldNode(['addons']);
+
+  if (mainConfigAddons && getRequireWrapperName(main) !== null) {
+    const addonNode = main.valueToNode(addonName);
+    main.appendNodeToArray(['addons'], addonNode as any);
+    wrapValueWithRequireWrapper(main, addonNode as any);
+  } else {
+    main.appendValueToArray(['addons'], addonName);
+  }
+
   await writeConfig(main);
 
   if (!skipPostinstall && isCoreAddon(addonName)) {

From 57af7c05dd582cc985c4d97103deceb5688b6016 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 2 Sep 2024 14:34:04 +0200
Subject: [PATCH 11/15] add tests

---
 code/lib/cli-storybook/src/add.test.ts | 43 +++++++++++++++++++++++++-
 code/lib/cli-storybook/src/add.ts      |  2 --
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/code/lib/cli-storybook/src/add.test.ts b/code/lib/cli-storybook/src/add.test.ts
index 137e60a72008..5fb009f11df3 100644
--- a/code/lib/cli-storybook/src/add.test.ts
+++ b/code/lib/cli-storybook/src/add.test.ts
@@ -1,10 +1,13 @@
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { add, getVersionSpecifier } from './add';
 
 const MockedConfig = vi.hoisted(() => {
   return {
     appendValueToArray: vi.fn(),
+    getFieldNode: vi.fn(),
+    valueToNode: vi.fn(),
+    appendNodeToArray: vi.fn(),
   };
 });
 const MockedPackageManager = vi.hoisted(() => {
@@ -20,6 +23,12 @@ const MockedPostInstall = vi.hoisted(() => {
     postinstallAddon: vi.fn(),
   };
 });
+const MockWrapRequireUtils = vi.hoisted(() => {
+  return {
+    getRequireWrapperName: vi.fn(),
+    wrapValueWithRequireWrapper: vi.fn(),
+  };
+});
 const MockedConsole = {
   log: vi.fn(),
   warn: vi.fn(),
@@ -35,6 +44,9 @@ vi.mock('storybook/internal/csf-tools', () => {
 vi.mock('./postinstallAddon', () => {
   return MockedPostInstall;
 });
+vi.mock('./automigrate/fixes/wrap-require-utils', () => {
+  return MockWrapRequireUtils;
+});
 vi.mock('storybook/internal/common', () => {
   return {
     getStorybookInfo: vi.fn(() => ({ mainConfig: {}, configDir: '' })),
@@ -103,6 +115,35 @@ describe('add', () => {
 });
 
 describe('add (extra)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  test('should not add a "wrap require" to the addon when not needed', async () => {
+    MockedConfig.getFieldNode.mockReturnValue({});
+    MockWrapRequireUtils.getRequireWrapperName.mockReturnValue(null);
+    await add(
+      '@storybook/addon-docs',
+      { packageManager: 'npm', skipPostinstall: true },
+      MockedConsole
+    );
+
+    expect(MockWrapRequireUtils.wrapValueWithRequireWrapper).not.toHaveBeenCalled();
+    expect(MockedConfig.appendValueToArray).toHaveBeenCalled();
+    expect(MockedConfig.appendNodeToArray).not.toHaveBeenCalled();
+  });
+  test('should add a "wrap require" to the addon when applicable', async () => {
+    MockedConfig.getFieldNode.mockReturnValue({});
+    MockWrapRequireUtils.getRequireWrapperName.mockReturnValue('require');
+    await add(
+      '@storybook/addon-docs',
+      { packageManager: 'npm', skipPostinstall: true },
+      MockedConsole
+    );
+
+    expect(MockWrapRequireUtils.wrapValueWithRequireWrapper).toHaveBeenCalled();
+    expect(MockedConfig.appendValueToArray).not.toHaveBeenCalled();
+    expect(MockedConfig.appendNodeToArray).toHaveBeenCalled();
+  });
   test('not warning when installing the correct version of storybook', async () => {
     await add(
       '@storybook/addon-docs',
diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index acc259c83b55..d0e64efdf443 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -15,7 +15,6 @@ import { dedent } from 'ts-dedent';
 
 import {
   getRequireWrapperName,
-  isRequireWrapperNecessary,
   wrapValueWithRequireWrapper,
 } from './automigrate/fixes/wrap-require-utils';
 import { postinstallAddon } from './postinstallAddon';
@@ -143,7 +142,6 @@ export async function add(
   logger.log(`Adding '${addon}' to main.js addons field.`);
 
   const mainConfigAddons = main.getFieldNode(['addons']);
-
   if (mainConfigAddons && getRequireWrapperName(main) !== null) {
     const addonNode = main.valueToNode(addonName);
     main.appendNodeToArray(['addons'], addonNode as any);

From 6744cb021cc3c223b100a75e43870cc0fbb68d46 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 2 Sep 2024 15:01:34 +0200
Subject: [PATCH 12/15] fix

---
 code/addons/test/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
index 3cd7a55ba7cb..c334d9f0571e 100644
--- a/code/addons/test/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -13,7 +13,7 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import { findUp } from 'find-up';
+import findUp from 'find-up';
 import c from 'tinyrainbow';
 import dedent from 'ts-dedent';
 

From 9ca96c6a338bbb044283b54e9054709ed5753060 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 2 Sep 2024 15:22:35 +0200
Subject: [PATCH 13/15] fix import

---
 code/addons/test/package.json       | 2 +-
 code/addons/test/src/postinstall.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index 14713ac2fcc2..e3a601080035 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -103,4 +103,4 @@
       "./src/postinstall.ts"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
index 3ab64f32be92..3ecbff0432da 100644
--- a/code/addons/test/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -13,7 +13,7 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import findUp from 'find-up';
+import { findUp } from 'find-up';
 import c from 'tinyrainbow';
 import dedent from 'ts-dedent';
 

From e3a010f4a963f9a18bcab926015f3f0a223293e6 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 2 Sep 2024 16:36:59 +0200
Subject: [PATCH 14/15] fix package order in versions

---
 code/core/src/common/versions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index 32af6bec2a1d..825ffd040a7b 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -15,10 +15,10 @@ export default {
   '@storybook/addon-onboarding': '8.3.0-beta.1',
   '@storybook/addon-outline': '8.3.0-beta.1',
   '@storybook/addon-storysource': '8.3.0-beta.1',
+  '@storybook/experimental-addon-test': '8.3.0-beta.1',
   '@storybook/addon-themes': '8.3.0-beta.1',
   '@storybook/addon-toolbars': '8.3.0-beta.1',
   '@storybook/addon-viewport': '8.3.0-beta.1',
-  '@storybook/experimental-addon-test': '8.3.0-beta.1',
   '@storybook/builder-vite': '8.3.0-beta.1',
   '@storybook/builder-webpack5': '8.3.0-beta.1',
   '@storybook/core': '8.3.0-beta.1',

From 5784359850096de941df7483a874d425f07ea0aa Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Mon, 2 Sep 2024 14:40:27 +0000
Subject: [PATCH 15/15] Write changelog for 8.3.0-beta.2 [skip ci]

---
 CHANGELOG.prerelease.md | 9 +++++++++
 code/package.json       | 3 ++-
 docs/versions/next.json | 2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index cdf788cb9219..7b7e15e5fb6a 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,12 @@
+## 8.3.0-beta.2
+
+- Addon Vitest: Fix indentation of 'vitePluginNext' in generated Vitest config file - [#29011](https://github.com/storybookjs/storybook/pull/29011), thanks @ghengeveld!
+- Backgrounds/Viewports: Make defaults overridable in `StoryGlobals`-mode - [#29025](https://github.com/storybookjs/storybook/pull/29025), thanks @JReinhold!
+- CLI: Handle Yarn PnP wrapper scenario when adding an addon - [#29027](https://github.com/storybookjs/storybook/pull/29027), thanks @yannbf!
+- Maintenance: Rename addon-vitest to addon-test - [#29014](https://github.com/storybookjs/storybook/pull/29014), thanks @yannbf!
+- Nextjs-Vite: Re-export vite-plugin-storybook-nextjs - [#29012](https://github.com/storybookjs/storybook/pull/29012), thanks @valentinpalkovic!
+- SvelteKit/Vue3: Refactor plugin export paths - [#29016](https://github.com/storybookjs/storybook/pull/29016), thanks @yannbf!
+
 ## 8.3.0-beta.1
 
 - ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman!
diff --git a/code/package.json b/code/package.json
index b47aef2163e1..11832a3f8ff3 100644
--- a/code/package.json
+++ b/code/package.json
@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.3.0-beta.2"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index ac9013eefadf..cee5922cb222 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.3.0-beta.1","info":{"plain":"- ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman!\n- Core: Move `util` to regular dependency - [#29008](https://github.com/storybookjs/storybook/pull/29008), thanks @ndelangen!\n- Next.js-Vite: Streamline Next.js dir option - [#28995](https://github.com/storybookjs/storybook/pull/28995), thanks @valentinpalkovic!\n- Next.js: Fix wrong Next.js framework reference - [#28992](https://github.com/storybookjs/storybook/pull/28992), thanks @valentinpalkovic!\n- Vue3: Add vite plugin for portable stories - [#29004](https://github.com/storybookjs/storybook/pull/29004), thanks @yannbf!"}}
+{"version":"8.3.0-beta.2","info":{"plain":"- Addon Vitest: Fix indentation of 'vitePluginNext' in generated Vitest config file - [#29011](https://github.com/storybookjs/storybook/pull/29011), thanks @ghengeveld!\n- Backgrounds/Viewports: Make defaults overridable in `StoryGlobals`-mode - [#29025](https://github.com/storybookjs/storybook/pull/29025), thanks @JReinhold!\n- CLI: Handle Yarn PnP wrapper scenario when adding an addon - [#29027](https://github.com/storybookjs/storybook/pull/29027), thanks @yannbf!\n- Maintenance: Rename addon-vitest to addon-test - [#29014](https://github.com/storybookjs/storybook/pull/29014), thanks @yannbf!\n- Nextjs-Vite: Re-export vite-plugin-storybook-nextjs - [#29012](https://github.com/storybookjs/storybook/pull/29012), thanks @valentinpalkovic!\n- SvelteKit/Vue3: Refactor plugin export paths - [#29016](https://github.com/storybookjs/storybook/pull/29016), thanks @yannbf!"}}