microsoft · sjwilczynski · Mar 9, 2026 · Jul 6, 2025 · Jul 6, 2025 · Jul 7, 2025
diff --git a/change/@nova-examples-a5d454b6-8777-45dd-9899-e463886ccc52.json b/change/@nova-examples-a5d454b6-8777-45dd-9899-e463886ccc52.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update to Storybook v9",
+  "packageName": "@nova/examples",
+  "email": "stwilczy@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@nova-react-0b8d2cbc-6439-40c4-8d07-5adc91323d30.json b/change/@nova-react-0b8d2cbc-6439-40c4-8d07-5adc91323d30.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Dependency version bumps",
+  "packageName": "@nova/react",
+  "email": "stwilczy@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@nova-react-test-utils-07fcd02a-a1e6-4641-967e-63826f9c6bff.json b/change/@nova-react-test-utils-07fcd02a-a1e6-4641-967e-63826f9c6bff.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "BREAKING: Drop Storybook v8 support, require Storybook v9",
+  "packageName": "@nova/react-test-utils",
+  "email": "stwilczy@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/examples/.storybook/main.ts b/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"),

diff --git a/packages/examples/.storybook/preview.ts b/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,

diff --git a/packages/examples/.storybook/vitest.setup.ts b/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);
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -40,13 +40,8 @@
     "@graphql-codegen/cli": "^3.2.2",
     "@graphql-codegen/typescript": "^3.0.2",
     "@graphql-codegen/typescript-resolvers": "^3.1.1",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/experimental-addon-test": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/types": "^8.6.14",
+    "@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",
@@ -60,12 +55,12 @@
     "playwright": "^1.51.1",
     "relay-compiler": "^20.0.0",
     "relay-test-utils": "^20.0.0",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.15",
     "typescript": "^5.8.0",
     "vite": "^6.3.0",
     "vite-plugin-graphql-loader": "^4.0.0",
     "vitest": "^3.2.4",
-    "vitest-browser-react": "^0.1.1"
+    "vitest-browser-react": "^1.0.0"
   },
   "publishConfig": {
     "exports": {

diff --git a/packages/examples/src/apollo/Feedback/Feedback.stories.tsx b/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";
@@ -98,7 +98,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {

diff --git a/packages/examples/src/apollo/Feedback/FeedbackContainer.stories.tsx b/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,
@@ -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 }]) => {

diff --git a/packages/examples/src/relay/Feedback/Feedback.stories.tsx b/packages/examples/src/relay/Feedback/Feedback.stories.tsx
@@ -7,15 +7,15 @@ 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 { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import { type withErrorBoundaryParameters } from "../../testing-utils/decorators";
 
 type NovaParameters = WithNovaEnvironment<
@@ -121,7 +121,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {

diff --git a/packages/examples/src/relay/Feedback/FeedbackContainer.stories.tsx b/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,6 +15,7 @@ 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,
@@ -32,7 +26,7 @@ type NovaParameters = WithNovaEnvironment<
 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,
@@ -125,9 +119,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 }]) => {

diff --git a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx b/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";
@@ -140,7 +140,7 @@ export const Like: Story = {
   },
 };
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
   {

diff --git a/packages/examples/src/relay/pure-relay/SuggestedFriends/SuggestedFriends.stories.tsx b/packages/examples/src/relay/pure-relay/SuggestedFriends/SuggestedFriends.stories.tsx
@@ -5,7 +5,7 @@ import {
   type StoryObjWithoutFragmentRefs,
 } from "@nova/react-test-utils/relay";
 import type { Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { within, expect } from "storybook/test";
 import { schema } from "../../../testing-utils/schema";
 import type { TypeMap } from "../../../__generated__/schema.all.interface";
 import { SuggestedFriendsComponent } from "./SuggestedFriends";

diff --git a/packages/examples/src/relay/pure-relay/extensions/ServerWithExtension.stories.ts b/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";
 
 const novaDecorator = getNovaDecorator(schema, {

diff --git a/packages/examples/src/relay/pure-relay/extensions/ViewDataOnly.stories.ts b/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,7 +9,7 @@ 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";
 
@@ -19,7 +19,7 @@ type NovaParameters = WithNovaEnvironment<
   typeof ViewDataOnly
 >;
 
-const mockOnError = fn<[Error]>();
+const mockOnError = fn<(error: Error) => void>();
 
 const originalConsoleWarn = console.warn;
 const consoleWarnMock = fn((...args) => {

diff --git a/packages/examples/vitest.config.ts b/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";
 

diff --git a/packages/nova-react-test-utils/package.json b/packages/nova-react-test-utils/package.json
@@ -46,10 +46,7 @@
     "@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": "^18.0.0",
     "@types/relay-test-utils": "^19.0.0",
     "@vitest/browser": "^3.2.4",
@@ -58,23 +55,22 @@
     "react-relay": "^20.0.0",
     "relay-runtime": "^20.0.0",
     "relay-test-utils": "^20.0.0",
+    "storybook": "^9.0.15",
     "vitest": "^3.2.4",
-    "vitest-browser-react": "^0.1.1"
+    "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/react": "^9.0.0",
     "@types/react-relay": ">=18",
     "@types/relay-test-utils": ">=19",
     "react": "^17 || ^18",
     "react-relay": ">=19",
     "relay-runtime": ">=19",
-    "relay-test-utils": ">=19"
+    "relay-test-utils": ">=19",
+    "storybook": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {

diff --git a/packages/nova-react-test-utils/src/apollo/storybook-nova-decorator-apollo.tsx b/packages/nova-react-test-utils/src/apollo/storybook-nova-decorator-apollo.tsx
@@ -11,15 +11,13 @@ import {
   getNovaEnvironmentForStory,
   type WithNovaEnvironment,
 } from "../shared/storybook-nova-decorator-shared";
-import type { MakeDecoratorResult } from "../shared/shared-utils";
 import {
   defaultTrigger,
   defaultBubble,
   defaultLocalization,
 } from "../shared/shared-utils";
-import type { ReactRenderer } from "@storybook/react";
-import type { PlayFunctionContext } from "@storybook/types";
 import type { NovaMockEnvironment } from "./nova-mock-environment";
+import type { StoryContext, Decorator, Args } from "@storybook/react";
 
 type MockClientOptions = Parameters<typeof createMockClient>[1];
 
@@ -30,10 +28,7 @@ type Options = MockClientOptions & {
 export const getNovaApolloDecorator: (
   schema: GraphQLSchema,
   options?: Options,
-) => MakeDecoratorResult = (
-  schema,
-  { generateFunction, localization, ...rest } = {},
-) => {
+) => Decorator<Args> = (schema, { generateFunction, localization, ...rest } = {}) => {
   const createEnvironment = () =>
     createNovaEnvironment(schema, rest, localization);
   const initializeGenerator = (
@@ -78,7 +73,7 @@ function createNovaEnvironment(
 }
 
 export const getNovaApolloEnvironmentForStory = (
-  context: PlayFunctionContext<ReactRenderer>,
+  context: StoryContext,
 ): NovaMockEnvironment => {
   const env = getNovaEnvironmentForStory(context);
   if (!isApolloMockEnv(env)) {