feat(nova-react-test-utils): add proper support for storybook 10

.github/workflows/pr.yml

@@ -22,3 +22,29 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: yarn install
       - run: yarn ci
+
+  storybook-9-compatibility:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node.js 20
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20.x
+      - run: yarn install
+      - name: Install Storybook 9
+        run: >
+          yarn up
+          "@storybook/react@^9.0.0"
+          "@storybook/react-vite@^9.0.0"
+          "@storybook/addon-vitest@^9.0.0"
+          "storybook@^9.0.0"
+      - run: yarn workspace @nova/examples generate
+      - run: yarn workspace @nova/react-test-utils types
+      - run: yarn workspace @nova/react-test-utils test
+      - run: yarn workspace @nova/examples types
+      - run: yarn workspace @nova/examples test
+      - run: yarn workspace @nova/examples build-storybook

change/@nova-examples-f4b5bff0-817c-4428-9590-026260180970.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update examples to Storybook 10",
+  "packageName": "@nova/examples",
+  "email": "stwilczy@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@nova-react-test-utils-93c32b06-6618-4e50-a562-97ad8cf087d1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Support both Storybook 9 and Storybook 10",
+  "packageName": "@nova/react-test-utils",
+  "email": "stwilczy@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -35,7 +35,7 @@
     "prettier-plugin-packagejson": "^2.5.0"
   },
   "engines": {
-    "node": ">=20.11.0",
+    "node": "^20.19.0 || >=22.12.0",
     "yarn": ">=4.0.0"
   }
 }

packages/examples/.storybook/main.ts

@@ -1,14 +1,12 @@
-import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
-import { plugins } from "../vitest.plugins";
+import { plugins } from "../vitest.plugins.ts";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(ts|tsx)"],
-  addons: [
-    getAbsolutePath("@storybook/addon-vitest"),
-  ],
+  addons: ["@storybook/addon-vitest"],
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: "@storybook/react-vite",
     options: {
       strictMode: true,
     },
@@ -23,7 +21,3 @@ const config: StorybookConfig = {
   },
 };
 export default config;
-
-function getAbsolutePath(value: string): string {
-  return dirname(require.resolve(join(value, "package.json")));
-}

packages/examples/package.json

@@ -40,8 +40,8 @@
     "@graphql-codegen/cli": "^3.2.2",
     "@graphql-codegen/typescript": "^3.0.2",
     "@graphql-codegen/typescript-resolvers": "^3.1.1",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
+    "@storybook/addon-vitest": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
     "@swc/core": "^1.11.0",
     "@swc/plugin-relay": "^7.0.0",
     "@types/react": "^18.3.1",
@@ -55,7 +55,7 @@
     "playwright": "^1.51.1",
     "relay-compiler": "^20.0.0",
     "relay-test-utils": "^20.0.0",
-    "storybook": "^9.0.15",
+    "storybook": "^10.0.0",
     "typescript": "^5.8.0",
     "vite": "^6.3.0",
     "vite-plugin-graphql-loader": "^4.0.0",

packages/nova-react-test-utils/README.md

@@ -56,6 +56,8 @@ The `environment.eventing.bubble` is simple `jest.fn()` so you can assert on it.
 Similarly to unit tests this package provides decorators for storybook stories using
 either Apollo or Relay. The package exposes two implementation of same `getNovaDecorator` one for Relay and one for Apollo. One should be picked based on whether or not the component is using Apollo or Relay as GraphQL client.
 
+The Storybook integrations support Storybook 9 and Storybook 10.
+
 ```tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import type {

packages/nova-react-test-utils/package.json

@@ -46,7 +46,7 @@
     "@apollo/client": "^3.4.15",
     "@graphitation/apollo-mock-client": "^0.13.0",
     "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
-    "@storybook/react": "^9.0.15",
+    "@storybook/react": "^10.0.0",
     "@types/react-relay": "^18.0.0",
     "@types/relay-test-utils": "^19.0.0",
     "@vitest/browser": "^3.2.4",
@@ -55,22 +55,22 @@
     "react-relay": "^20.0.0",
     "relay-runtime": "^20.0.0",
     "relay-test-utils": "^20.0.0",
-    "storybook": "^9.0.15",
+    "storybook": "^10.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.4",
     "@graphitation/apollo-mock-client": "^0.13.0",
     "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
-    "@storybook/react": "^9.0.0",
+    "@storybook/react": "^9.0.0 || ^10.0.0",
     "@types/react-relay": ">=18",
     "@types/relay-test-utils": ">=19",
     "react": "^17 || ^18",
     "react-relay": ">=19",
     "relay-runtime": ">=19",
     "relay-test-utils": ">=19",
-    "storybook": "^9.0.0"
+    "storybook": "^9.0.0 || ^10.0.0"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {