fix: Support react-dom/test-utils

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 Inspect from "vite-plugin-inspect";
-import vitePluginNext from "vite-plugin-storybook-nextjs";
 import { defineConfig } from "vitest/config";
+import { storybookNextJsPlugin } from "@storybook/experimental-nextjs-vite/vite-plugin";
 
 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:*"
+ }
  }
 }