fix(nova-react-test-utils): throw error from apollo

change/@nova-examples-de823586-089b-422c-8fcc-75c183c08260.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "showcase error behavior",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@nova-react-test-utils-ac20973e-e120-4dbc-bb0d-4adbfba1c1c7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "throw error from apollo in decorator",
+  "packageName": "@nova/react-test-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/examples/jest.config.ts

@@ -4,8 +4,7 @@ export default {
   ...config,
   transform: {
     "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
-    // Needed for packages/examples to load relay compiler generated artifacts.
-    // It would be better if it could be config local to examples package but haven't found a way to configure it with just
+    // Needed to load relay compiler generated artifacts.
     ".+[\\\\/]relay[\\\\/].+\\.tsx?$":
       "@graphitation/embedded-document-artefact-loader/ts-jest",
     "^.+\\.tsx?$": [

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

@@ -2,11 +2,12 @@ import { graphql } from "@nova/react";
 import {
   EventingProvider,
   getNovaDecorator,
+  getNovaEnvironmentForStory,
   type WithNovaEnvironment,
   type WithoutFragmentRefs,
 } from "@nova/react-test-utils/apollo";
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
 import { getSchema } from "../../testing-utils/getSchema";
 import type { TypeMap } from "../../__generated__/schema.all.interface";
 import { FeedbackComponent, Feedback_feedbackFragment } from "./Feedback";
@@ -84,6 +85,25 @@ export const Like: Story = {
   },
 };
 
+export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
+  {
+    parameters: {
+      novaEnvironment: {
+        enableQueuedMockResolvers: false,
+      },
+    } satisfies WithNovaEnvironment<FeedbackStoryQuery, TypeMap>,
+    play: async (context) => {
+      const {
+        graphql: { mock },
+      } = getNovaEnvironmentForStory(context);
+      await waitFor(async () => {
+        const operation = mock.getMostRecentOperation();
+        await expect(operation).toBeDefined();
+      });
+      await mock.rejectMostRecentOperation(new Error("Query failed"));
+    },
+  };
+
 const FeedbackWithDeleteDialog = (props: Story["args"]) => {
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");

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

@@ -0,0 +1,28 @@
+import { composeStories } from "@storybook/react";
+import * as stories from "./Feedback.stories";
+import { render } from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom";
+import { prepareStoryContextForTest } from "@nova/react-test-utils/apollo";
+import { executePlayFunction } from "../../testing-utils/executePlayFunction";
+
+const { ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError } =
+  composeStories(stories);
+
+describe("Feedback", () => {
+  it("throws an error when the developer makes a mistake", async () => {
+    const { container } = render(
+      <ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError />,
+    );
+    const context = prepareStoryContextForTest(
+      ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError,
+      container,
+    );
+    expect(async () => {
+      await executePlayFunction(
+        ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError,
+        context,
+      );
+    }).rejects.toThrowError("Query failed");
+  });
+});

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

@@ -98,6 +98,24 @@ export const LikeFailure: Story = {
   },
 };
 
+export const QueryFailure: Story = {
+  parameters: {
+    novaEnvironment: {
+      enableQueuedMockResolvers: false,
+    },
+  } satisfies WithNovaEnvironment<UnknownOperation, TypeMap>,
+  play: async (context) => {
+    const {
+      graphql: { mock },
+    } = getNovaEnvironmentForStory(context);
+    await waitFor(async () => {
+      const operation = mock.getMostRecentOperation();
+      await expect(operation).toBeDefined();
+    });
+    await mock.rejectMostRecentOperation(new Error("Query failed"));
+  },
+};
+
 export const Loading: Story = {
   parameters: {
     novaEnvironment: {

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

@@ -103,6 +103,25 @@ export const Like: Story = {
   },
 };
 
+export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError: Story =
+  {
+    parameters: {
+      novaEnvironment: {
+        enableQueuedMockResolvers: false,
+      },
+    } satisfies WithNovaEnvironment<FeedbackStoryQuery, TypeMap>,
+    play: async (context) => {
+      const {
+        graphql: { mock },
+      } = getNovaEnvironmentForStory(context);
+      await waitFor(async () => {
+        const operation = mock.getMostRecentOperation();
+        await expect(operation).toBeDefined();
+      });
+      await mock.rejectMostRecentOperation(new Error("Query failed"));
+    },
+  };
+
 const FeedbackWithDeleteDialog = (props: Story["args"]) => {
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");

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

@@ -0,0 +1,28 @@
+import { composeStories } from "@storybook/react";
+import * as stories from "./Feedback.stories";
+import { render } from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom";
+import { executePlayFunction } from "../../testing-utils/executePlayFunction";
+import { prepareStoryContextForTest } from "@nova/react-test-utils/relay";
+
+const { ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError } =
+  composeStories(stories);
+
+describe("Feedback", () => {
+  it("throws an error when the developer makes a mistake", async () => {
+    const { container } = render(
+      <ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError />,
+    );
+    const context = prepareStoryContextForTest(
+      ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError,
+      container,
+    );
+    expect(async () => {
+      await executePlayFunction(
+        ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError,
+        context,
+      );
+    }).rejects.toThrowError("Query failed");
+  });
+});

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

@@ -126,6 +126,24 @@ export const LikeFailure: Story = {
   },
 };
 
+export const QueryFailure: Story = {
+  parameters: {
+    novaEnvironment: {
+      enableQueuedMockResolvers: false,
+    },
+  } satisfies WithNovaEnvironment<UnknownOperation, TypeMap>,
+  play: async (context) => {
+    const {
+      graphql: { mock },
+    } = getNovaEnvironmentForStory(context);
+    await waitFor(async () => {
+      const operation = mock.getMostRecentOperation();
+      await expect(operation).toBeDefined();
+    });
+    await mock.rejectMostRecentOperation(new Error("Query failed"));
+  },
+};
+
 export const Loading: Story = {
   parameters: {
     novaEnvironment: {

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

@@ -77,10 +77,7 @@
     "@storybook/types": "^7.6.19",
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.2.0",
-    "@types/react": "^18.3.1",
     "@types/react-relay": "^16.0.0",
-    "@types/relay-runtime": "^17.0.0",
-    "@types/relay-test-utils": "^17.0.0",
     "@types/react-test-renderer": "^18.3.0",
     "monorepo-scripts": "*",
     "react": "^18.3.1",

packages/nova-react-test-utils/src/shared/storybook-nova-decorator-shared.tsx

@@ -83,14 +83,18 @@ export function getRenderer(
 ): React.FC<React.PropsWithChildren<unknown>> {
   if (query) {
     const Renderer: React.FC<unknown> = () => {
-      const { data } = useLazyLoadQuery(
+      const { data, error } = useLazyLoadQuery(
         // There are no consequences of the cast, we do it only to make sure pure relay components can also leverage the decorator
         query as GraphQLTaggedNode,
         variables,
       );
 
       // apollo does not suspend, but returns undefined data
       if (!data) {
+        if (error) {
+          // apollo returns an error, while Relay throws, let's align the behavior
+          throw error;
+        }
         return <div>Loading...</div>;
       }
 
@@ -100,7 +104,7 @@ export function getRenderer(
       Object.assign(context.args, Object.fromEntries(entries));
       return <>{getStory(context)}</>;
     };
-    return Renderer;
+    return () => <Renderer />;
   } else {
     return () => {
       return <>{getStory(context)}</>;