fix(nova-react-test-utils): fix issue with store being shared between stories

change/@nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use custom store is some stories",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@nova-react-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix issue with store being shared between stories",
+  "packageName": "@nova/react-test-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/examples/package.json

@@ -24,7 +24,8 @@
     "graphql": "^15.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-relay": "^17.0.0"
+    "react-relay": "^17.0.0",
+    "relay-runtime": "^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -53,6 +54,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.0",
+    "@types/relay-runtime": "^17.0.0",
     "esbuild-loader": "^3.0.1",
     "monorepo-scripts": "*",
     "prop-types": "15.8.1",

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

@@ -15,14 +15,21 @@ import type { FeedbackStoryQuery } from "./__generated__/FeedbackStoryQuery.grap
 import { getSchema } from "../../testing-utils/getSchema";
 import * as React from "react";
 import type { events } from "../../events/events";
+import { RecordSource, Store } from "relay-runtime";
 
 const schema = getSchema();
 
 const MockPayloadGenerator = new PayloadGenerator(schema);
 
+const novaDecorator = getNovaDecorator(schema, {
+  getEnvironmentOptions: () => ({
+    store: new Store(new RecordSource()),
+  }),
+});
+
 const meta = {
   component: FeedbackComponent,
-  decorators: [getNovaDecorator(schema)],
+  decorators: [novaDecorator],
   parameters: {
     novaEnvironment: {
       query: graphql`

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

@@ -17,14 +17,21 @@ import type { FeedbackStoryRelayQuery } from "./__generated__/FeedbackStoryRelay
 import { getSchema } from "../../testing-utils/getSchema";
 import * as React from "react";
 import type { events } from "../../events/events";
+import { RecordSource, Store } from "relay-runtime";
 
 const schema = getSchema();
 
 const MockPayloadGenerator = new PayloadGenerator(schema);
 
+const novaDecorator = getNovaDecorator(schema, {
+  getEnvironmentOptions: () => ({
+    store: new Store(new RecordSource()),
+  }),
+});
+
 const meta = {
   component: FeedbackComponent,
-  decorators: [getNovaDecorator(schema)],
+  decorators: [novaDecorator],
   parameters: {
     novaEnvironment: {
       query: graphql`

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

@@ -252,7 +252,7 @@ const meta = {
 } satisfies Meta<typeof FeedbackContainer>;
 ```
 
-#### I need to configure Relay store to support some custom setup I have in my repository. Is it possible?
+#### I need to configure Relay environment to support some custom setup I have in my repository. Is it possible?
 
 Similarly as with configuring Apollo cache, one can pass options to `createMockEnvironment`:
 
@@ -262,14 +262,16 @@ const environment = createMockEnvironment(schema, {
 });
 ```
 
-and if you are using through storybook decorator you can pass options to `getNovaDecorator`:
+and if you are using through storybook decorator you can pass options to `getNovaDecorator`. However, in case of storybook environment we need to make sure that for example `store` is unique for each story, so we need to pass a function that will return the options:
 
 ```tsx
 const meta = {
   component: FeedbackContainer,
   decorators: [
     getNovaDecorator(schema, {
-      store: myCustomStoreConfig,
+      getEnvironmentOptions: () => ({
+        store: myCustomStoreConfig,
+      }),
     }),
   ],
 } satisfies Meta<typeof FeedbackContainer>;

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

@@ -14,18 +14,21 @@ import { createMockEnvironment } from "relay-test-utils";
 import type { GraphQLSchema } from "graphql";
 import type { ReactRenderer } from "@storybook/react";
 import type { PlayFunctionContext } from "@storybook/types";
+import type { EnvironmentConfig } from "relay-runtime";
 
-type RelayEnvironmentOptions = Parameters<typeof createMockEnvironment>[0];
-
-type Options = RelayEnvironmentOptions & {
+type Options = { getEnvironmentOptions?: () => Partial<EnvironmentConfig> } & {
   generateFunction?: typeof RelayMockPayloadGenerator.prototype.generate;
 };
 
 export const getNovaRelayDecorator: (
   schema: GraphQLSchema,
   options?: Options,
-) => MakeDecoratorResult = (schema, { generateFunction, ...rest } = {}) => {
-  const createEnvironment = () => createNovaRelayEnvironment(rest);
+) => MakeDecoratorResult = (
+  schema,
+  { generateFunction, getEnvironmentOptions } = {},
+) => {
+  const createEnvironment = () =>
+    createNovaRelayEnvironment(getEnvironmentOptions?.());
   const relayMockPayloadGenerator = new RelayMockPayloadGenerator(schema);
   const initializeGenerator = (
     parameters: WithNovaEnvironment["novaEnvironment"],
@@ -45,7 +48,7 @@ export const getNovaRelayDecorator: (
 };
 
 function createNovaRelayEnvironment(
-  options?: RelayEnvironmentOptions,
+  options?: Partial<EnvironmentConfig>,
 ): NovaMockEnvironment<"relay", "storybook"> {
   const relayEnvironment = createMockEnvironment(options);
   const env: NovaMockEnvironment<"relay", "storybook"> = {

yarn.lock

@@ -3856,7 +3856,7 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/relay-runtime@*", "@types/relay-runtime@>16":
+"@types/relay-runtime@*", "@types/relay-runtime@>16", "@types/relay-runtime@^17.0.0":
   version "17.0.4"
   resolved "https://registry.yarnpkg.com/@types/relay-runtime/-/relay-runtime-17.0.4.tgz#428526fc3e6dfb6e0a5730c38ad521cb1eea189b"
   integrity sha512-fB77br4lXlBYM/HpI6VI6KCrj5pw0LiAnkZOkffjirNYso+dzXGWkeIm0G0MGszD8WY1et+r1Uj2TA6rscBXNQ==