Merge pull request #17 from storybookjs/valentin/support-react-dom-te…

…st-utils

fix: Support react-dom/test-utils

README.md

@@ -44,6 +44,18 @@ export default defineConfig({
 });
 ```
 
+If you are using `@storybook/experimental-nextjs-vite` you don't have to install `vite-plugin-storybook-nextjs`, since `@storybook/experimental-nextjs-vite` already re-exports it.
+
+```ts
+// vitest.config.ts
+import { defineConfig } from "vite";
+import { storybookNextJsPlugin } from "@storybook/experimental-nextjs-vite/vite-plugin";
+
+export default defineConfig({
+  plugins: [storybookNextJsPlugin()],
+});
+```
+
 ## Configuration Options
 
 You can configure the plugin using the following options:
@@ -68,7 +80,7 @@ This plugin is necessary to run portable stories in Vitest, as it provides the n
 
 (⚠️ **Experimental**)
 
-The experimental `@storybook/experimental-addon-vitest` can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visit https://storybook.js.org/docs/8.3/writing-tests/test-runner-with-vitest for more information.
+The experimental `@storybook/experimental-addon-test` can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visit https://storybook.js.org/docs/8.3/writing-tests/test-runner-with-vitest for more information.
 
 ## Limitations and differences to the Webpack5-based integration of Next.js in Storybook
 

example/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/nextjs-vite";
+import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
   ],
   framework: {
-    name: "@storybook/nextjs-vite",
+    name: "@storybook/experimental-nextjs-vite",
     options: {},
   },
   features: {

example/.storybook/storybook.setup.ts

@@ -1,4 +1,4 @@
-import { setProjectAnnotations } from "@storybook/nextjs-vite";
+import { setProjectAnnotations } from "@storybook/experimental-nextjs-vite";
 import { beforeAll, beforeEach } from "vitest";
 
 import * as addonActionsAnnotations from "@storybook/addon-actions/preview";

example/.storybook/vitest.config.mts

@@ -1,14 +1,17 @@
 import path from "node:path";
-import { storybookTest } from "@storybook/experimental-vitest-plugin";
+import url from "node:url";
+import { storybookTest } from "@storybook/experimental-addon-test/vite-plugin";
+import { storybookNextJsPlugin } from "@storybook/experimental-nextjs-vite/vite-plugin";
 import Inspect from "vite-plugin-inspect";
-import vitePluginNext from "vite-plugin-storybook-nextjs";
 import { defineConfig } from "vitest/config";
 
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
 export default defineConfig({
   plugins: [
-    vitePluginNext({ dir: path.join(__dirname, "..") }),
+    storybookNextJsPlugin({ dir: path.join(__dirname, "..") }),
     storybookTest({
-      renderer: "react",
+      configDir: __dirname,
     }),
     Inspect({ build: true, outputDir: ".vite-inspect" }),
   ],

example/package.json

@@ -22,17 +22,17 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-actions": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/addon-essentials": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/addon-interactions": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/addon-links": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/addon-onboarding": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/addon-toolbars": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/blocks": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/experimental-vitest-plugin": "0.0.4",
-    "@storybook/nextjs-vite": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/react": "0.0.0-pr-28800-sha-2528064a",
-    "@storybook/test": "0.0.0-pr-28800-sha-2528064a",
+    "@storybook/addon-actions": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/addon-essentials": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/addon-interactions": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/addon-links": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/addon-onboarding": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/addon-toolbars": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/blocks": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/experimental-nextjs-vite": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/experimental-addon-test": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/react": "0.0.0-pr-29044-sha-67f91ec6",
+    "@storybook/test": "0.0.0-pr-29044-sha-67f91ec6",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -48,11 +48,10 @@
     "playwright": "^1.45.3",
     "postcss": "^8.4.38",
     "serve": "^14.2.3",
-    "storybook": "0.0.0-pr-28800-sha-2528064a",
+    "storybook": "0.0.0-pr-29044-sha-67f91ec6",
     "tailwindcss": "^3.4.4",
     "typescript": "^5",
     "vite-plugin-inspect": "^0.8.5",
-    "vite-plugin-storybook-nextjs": "workspace:*",
     "vitest": "^2.0.5"
   }
 }

example/vitest.config.mts

@@ -1,11 +1,11 @@
+import { storybookNextJsPlugin } from "@storybook/experimental-nextjs-vite/vite-plugin";
 import Inspect from "vite-plugin-inspect";
-import vitePluginNext from "vite-plugin-storybook-nextjs";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   plugins: [
-    vitePluginNext(),
     Inspect({ build: true, outputDir: ".vite-inspect" }),
+    storybookNextJsPlugin(),
   ],
   test: {
     name: "next",

example/vitest.workspace.ts

@@ -4,5 +4,5 @@ export default defineWorkspace([
   // Next.js tests (non-storybook ones), run in isolation via `pnpm run test`
   "./vitest.config.mts",
   // Storybook portable stories test, run in isolation via `pnpm run test:storybook`
-  "./.storybook",
+  "./.storybook/vitest.config.mts",
 ]);

package.json

@@ -79,7 +79,7 @@
     "tsup": "^8.1.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.5"
   },
   "packageManager": "[email protected]",
   "dependencies": {
@@ -94,5 +94,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite-plugin-storybook-nextjs": "workspace:*"
+    }
   }
 }