breaking(nova-react-test-utils): support Storybook 9

.github/workflows/pr.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

packages/examples/.storybook/main.ts

@@ -5,9 +5,7 @@ import { plugins } from "../vitest.plugins";
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(ts|tsx)"],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/experimental-addon-test"),
+    getAbsolutePath("@storybook/addon-vitest"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

packages/examples/.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react";
-import { configure } from "@storybook/test";
+import type { Preview } from "@storybook/react-vite";
+import { configure } from "storybook/test";
 
 configure({
   asyncUtilTimeout: 2000,

packages/examples/.storybook/vitest.setup.ts

@@ -1,11 +1,8 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/react';
-import * as projectAnnotations from './preview';
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
+setProjectAnnotations([projectAnnotations]);
 
 window.global = globalThis;
-
-beforeAll(project.beforeAll);

packages/examples/package.json

@@ -40,32 +40,27 @@
     "@graphql-codegen/cli": "^3.2.2",
     "@graphql-codegen/typescript": "^3.0.2",
     "@graphql-codegen/typescript-resolvers": "^3.1.1",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/experimental-addon-test": "8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
-    "@storybook/types": "^8.6.11",
+    "@storybook/addon-vitest": "9.0.15",
+    "@storybook/react-vite": "^9.0.15",
     "@swc/core": "^1.11.0",
     "@swc/plugin-relay": "^7.0.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.0",
     "@types/relay-runtime": "^18.0.0",
     "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/browser": "^3.1.0",
-    "@vitest/coverage-v8": "^3.1.0",
+    "@vitest/browser": "^3.2.0",
+    "@vitest/coverage-v8": "^3.2.0",
     "monorepo-scripts": "*",
     "playwright": "^1.51.1",
     "relay-compiler": "^18.0.0",
     "relay-test-utils": "^18.0.0",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.15",
     "typescript": "^5.8.0",
-    "vite": "^6.2.0",
+    "vite": "^6.3.0",
     "vite-plugin-graphql-loader": "^4.0.0",
-    "vitest": "^3.1.0",
-    "vitest-browser-react": "^0.1.1"
+    "vitest": "^3.2.0",
+    "vitest-browser-react": "^1.0.0"
   },
   "publishConfig": {
     "exports": {

packages/examples/src/apollo/Feedback/Feedback.stories.tsx

@@ -6,8 +6,8 @@ import {
   type WithNovaEnvironment,
   type StoryObjWithoutFragmentRefs,
 } from "@nova/react-test-utils/apollo";
-import type { Meta } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import type { TypeMap } from "../../__generated__/schema.all.interface";
 import { FeedbackComponent } from "./Feedback";
 import type { FeedbackStoryQuery } from "./__generated__/FeedbackStoryQuery.graphql";
@@ -94,7 +94,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {

packages/examples/src/apollo/Feedback/FeedbackContainer.stories.tsx

@@ -1,12 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  userEvent,
-  within,
-  waitFor,
-  expect,
-  fn,
-  screen,
-} from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { userEvent, within, waitFor, expect, fn, screen } from "storybook/test";
 import {
   type UnknownOperation,
   type WithNovaEnvironment,
@@ -22,9 +15,10 @@ import type { events, FeedbackTelemetryEvent } from "../../events/events";
 import * as React from "react";
 import { schema } from "../../testing-utils/schema";
 import { defaultNodeResolver } from "../../testing-utils/resolvers";
+import type { EventWrapper } from "@nova/types";
 
 const telemetryEventMock =
-  fn<[{ event: FeedbackTelemetryEvent; source: unknown }]>();
+  fn<(args: { event: FeedbackTelemetryEvent }) => Promise<EventWrapper>>();
 
 type NovaParams = WithNovaEnvironment<UnknownOperation, TypeMap>;
 
@@ -117,9 +111,7 @@ export const Like: Story = {
 
     await container.findByRole("button", { name: "Unlike" });
 
-    let feedbackOperationEvents: [
-      { event: FeedbackTelemetryEvent; source: unknown },
-    ][] = [];
+    let feedbackOperationEvents: [{ event: FeedbackTelemetryEvent }][] = [];
     await waitFor(() => {
       feedbackOperationEvents = telemetryEventMock.mock.calls.filter(
         ([{ event }]) => {

packages/examples/src/relay/Feedback/Feedback.stories.tsx

@@ -7,16 +7,16 @@ import {
   MockPayloadGenerator as PayloadGenerator,
   EventingInterceptor,
 } from "@nova/react-test-utils/relay";
-import type { Meta } from "@storybook/react";
-import { userEvent, waitFor, within, expect } from "@storybook/test";
+import type { Meta } from "@storybook/react-vite";
+import { userEvent, waitFor, within, expect } from "storybook/test";
 import { schema } from "../../testing-utils/schema";
 import type { TypeMap } from "../../__generated__/schema.all.interface";
 import { FeedbackComponent } from "./Feedback";
 import type { FeedbackStoryQuery } from "./__generated__/FeedbackStoryQuery.graphql";
 import * as React from "react";
 import type { events } from "../../events/events";
 import { RecordSource, Store } from "relay-runtime";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import { type withErrorBoundaryParameters } from "../../testing-utils/decorators";
 
 type NovaParameters = WithNovaEnvironment<FeedbackStoryQuery, TypeMap>;
@@ -113,7 +113,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {

packages/examples/src/relay/Feedback/FeedbackContainer.stories.tsx

@@ -1,12 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  userEvent,
-  within,
-  waitFor,
-  expect,
-  fn,
-  screen,
-} from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { userEvent, within, waitFor, expect, fn, screen } from "storybook/test";
 import {
   type UnknownOperation,
   type WithNovaEnvironment,
@@ -22,13 +15,14 @@ import { FeedbackContainer } from "./FeedbackContainer";
 import { type events, type FeedbackTelemetryEvent } from "../../events/events";
 import * as React from "react";
 import { schema } from "../../testing-utils/schema";
+import type { EventWrapper } from "@nova/types";
 
 type NovaParameters = WithNovaEnvironment<UnknownOperation, TypeMap>;
 
 const MockPayloadGenerator = new PayloadGenerator(schema);
 
 const telemetryEventMock =
-  fn<[{ event: FeedbackTelemetryEvent; source: unknown }]>();
+  fn<(args: { event: FeedbackTelemetryEvent }) => Promise<EventWrapper>>();
 
 const meta: Meta<typeof FeedbackContainer> = {
   component: FeedbackContainer,
@@ -121,9 +115,7 @@ export const Like: Story = {
     });
 
     await container.findByRole("button", { name: "Unlike" });
-    let feedbackOperationEvents: [
-      { event: FeedbackTelemetryEvent; source: unknown },
-    ][] = [];
+    let feedbackOperationEvents: [{ event: FeedbackTelemetryEvent }][] = [];
     await waitFor(() => {
       feedbackOperationEvents = telemetryEventMock.mock.calls.filter(
         ([{ event }]) => {

packages/examples/src/relay/pure-relay/Feedback.stories.tsx

@@ -9,8 +9,8 @@ import {
   type StoryObjWithoutFragmentRefs,
 } from "@nova/react-test-utils/relay";
 import { MockPayloadGenerator } from "relay-test-utils";
-import type { Meta } from "@storybook/react";
-import { userEvent, waitFor, within, expect, fn } from "@storybook/test";
+import type { Meta } from "@storybook/react-vite";
+import { userEvent, waitFor, within, expect, fn } from "storybook/test";
 import type { TypeMap } from "../../__generated__/schema.all.interface";
 import { FeedbackComponent } from "./Feedback";
 import type { FeedbackStoryRelayQuery } from "./__generated__/FeedbackStoryRelayQuery.graphql";
@@ -132,7 +132,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {
@@ -143,8 +143,7 @@ export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError
       errorBoundary: {
         onError: mockOnError,
       },
-    } satisfies NovaParameters &
-      withErrorBoundaryParameters,
+    } satisfies NovaParameters & withErrorBoundaryParameters,
     play: async (context) => {
       const {
         graphql: { mock },

packages/examples/src/relay/pure-relay/extensions/ServerWithExtension.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react";
+import type { Meta } from "@storybook/react-vite";
 import { graphql } from "react-relay";
 import {
   getNovaDecorator,
@@ -9,7 +9,7 @@ import { MockPayloadGenerator } from "relay-test-utils";
 import { ServerWithExtension } from "./ServerWithExtension";
 import type { TypeMap } from "../../../__generated__/schema.all.interface";
 import type { ServerWithExtensionStoryRelayQuery } from "./__generated__/ServerWithExtensionStoryRelayQuery.graphql";
-import { within, expect } from "@storybook/test";
+import { within, expect } from "storybook/test";
 import { schema } from "../../../testing-utils/schema";
 
 

packages/examples/src/relay/pure-relay/extensions/ViewDataOnly.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react";
+import type { Meta } from "@storybook/react-vite";
 import { schema } from "../../../testing-utils/schema";
 import { graphql } from "react-relay";
 import {
@@ -9,13 +9,13 @@ import {
 import { MockPayloadGenerator } from "relay-test-utils";
 import type { TypeMap } from "../../../__generated__/schema.all.interface";
 import type { ViewDataOnlyStoryRelayQuery } from "./__generated__/ViewDataOnlyStoryRelayQuery.graphql";
-import { fn, within, expect, waitFor } from "@storybook/test";
+import { fn, within, expect, waitFor } from "storybook/test";
 import { type withErrorBoundaryParameters } from "../../../testing-utils/decorators";
 import { ViewDataOnly } from "./ViewDataOnly";
 
 type NovaParameters = WithNovaEnvironment<ViewDataOnlyStoryRelayQuery, TypeMap>;
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 const originalConsoleWarn = console.warn;
 const consoleWarnMock = fn((...args) => {

packages/examples/vitest.config.ts

@@ -5,7 +5,7 @@ import {
   defineConfig,
   mergeConfig,
 } from "vitest/config";
-import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { plugins, pluginsWithoutRelay } from "./vitest.plugins";
 import defaultConfig from "../../scripts/config/vitest.config";
 
@@ -16,7 +16,7 @@ const dirname =
 
 export default defineConfig({
   test: {
-    workspace: [
+    projects: [
       {
         plugins: [...plugins],
         test: mergeConfig(defaultConfig, {

packages/nova-graphql-compiler/package.json

@@ -31,7 +31,7 @@
     "yargs": "^16.2.0"
   },
   "devDependencies": {
-    "vitest": "^3.1.0",
+    "vitest": "^3.2.0",
     "cross-spawn": "^7.0.0",
     "monorepo-scripts": "*"
   },

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

@@ -39,42 +39,41 @@
     "@types/relay-runtime": ">16",
     "graphql": "^15.5.0",
     "invariant": "^2.2.4",
+    "semver": "^7.6.0",
     "tslib": "^2.2.0",
     "type-fest": "~2.19"
   },
   "devDependencies": {
     "@apollo/client": "^3.4.15",
     "@graphitation/apollo-mock-client": "^0.11.9",
     "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
-    "@storybook/addon-actions": "^8.4.5",
-    "@storybook/preview-api": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/types": "^8.4.5",
+    "@storybook/react": "^9.0.15",
     "@types/react-relay": "^16.0.0",
     "@types/relay-test-utils": "^18.0.0",
-    "@vitest/browser": "^3.1.0",
+    "@vitest/browser": "^3.2.0",
     "monorepo-scripts": "*",
     "react": "^18.3.1",
     "react-relay": "^18.0.0",
     "relay-runtime": "^18.0.0",
     "relay-test-utils": "^18.0.0",
-    "vitest": "^3.1.0",
-    "vitest-browser-react": "^0.1.1"
+    "storybook": "^9.0.15",
+    "vitest": "^3.2.0",
+    "vitest-browser-react": "^1.0.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.4",
     "@graphitation/apollo-mock-client": "^0.11.9",
     "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
-    "@storybook/addon-actions": ">7.6",
-    "@storybook/preview-api": ">7.6",
-    "@storybook/react": ">7.6",
-    "@storybook/types": ">7.6",
+    "@storybook/addon-actions": ">8.0",
+    "@storybook/preview-api": ">8.0",
+    "@storybook/react": ">8.0",
     "@types/react-relay": ">16",
     "@types/relay-test-utils": ">16",
     "react": "^17 || ^18",
     "react-relay": ">16",
     "relay-runtime": ">16",
-    "relay-test-utils": ">16"
+    "relay-test-utils": ">16",
+    "storybook": ">8.0"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {
@@ -89,6 +88,14 @@
       "optional": true,
       "reason": "This package is only required if you are using Apollo as your GraphQL client."
     },
+    "@storybook/addon-actions": {
+      "optional": true,
+      "reason": "This package is only required if you are using Storybook 8."
+    },
+    "@storybook/preview-api": {
+      "optional": true,
+      "reason": "This package is only required if you are using Storybook 8."
+    },
     "@types/react-relay": {
       "optional": true,
       "reason": "This package is only required if you are using Relay as your GraphQL client."