Clear _react prop on mockUrqlClient between tests

packages/react/spec/auth/useIsSignedIn.spec.ts

@@ -1,8 +1,8 @@
 import { renderHook } from "@testing-library/react";
 import { superAuthApi } from "../../spec/apis";
+import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 import { useIsSignedIn } from "../../src/auth/useIsSignedIn";
 import { TestWrapper } from "../testWrapper";
-import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 
 describe("useIsSignedIn", () => {
   test("returns true if the user is signed in", async () => {

packages/react/spec/auth/useSession.spec.ts

@@ -1,15 +1,14 @@
 import { renderHook } from "@testing-library/react";
 import { superAuthApi } from "../../spec/apis";
+import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 import { useSession } from "../../src/auth/useSession";
 import { TestWrapper } from "../testWrapper";
-import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 
 describe("useSession", () => {
   test("it returns the current session when the user is logged in", async () => {
     const { result, rerender } = renderHook(() => useSession(), { wrapper: TestWrapper(superAuthApi) });
 
     expectMockSignedInUser();
-
     rerender();
 
     expect(result.current!.id).toEqual("123");
@@ -20,9 +19,10 @@ describe("useSession", () => {
   });
 
   test("it returns the current session when the user is logged out", async () => {
-    const { result } = renderHook(() => useSession(), { wrapper: TestWrapper(superAuthApi) });
+    const { result, rerender } = renderHook(() => useSession(), { wrapper: TestWrapper(superAuthApi) });
 
     expectMockSignedOutUser();
+    rerender();
 
     expect(result.current).toBeDefined();
     expect(result.current!.id).toEqual("123");

packages/react/spec/auth/useUser.spec.ts

@@ -1,8 +1,8 @@
 import { renderHook } from "@testing-library/react";
 import { superAuthApi } from "../../spec/apis";
+import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 import { useUser } from "../../src/auth/useUser";
 import { TestWrapper } from "../testWrapper";
-import { expectMockSignedInUser, expectMockSignedOutUser } from "../../spec/utils";
 
 describe("useUser", () => {
   test("it returns the current user when the user is logged in", async () => {

packages/react/spec/testWrapper.tsx

@@ -10,7 +10,6 @@ import { makeErrorResult } from "urql";
 import type { Subject } from "wonka";
 import { makeSubject } from "wonka";
 import { Provider } from "../src/GadgetProvider";
-import { bulkExampleApi, relatedProductsApi, superAuthApi } from "./apis";
 
 export type MockOperationFn = jest.Mock & {
   subjects: Record<string, Subject<OperationResult>>;
@@ -35,6 +34,7 @@ export interface MockUrqlClient extends Client {
   [$gadgetConnection]: {
     fetch: MockFetchFn;
   };
+  _react?: any;
 }
 
 export const graphqlDocumentName = (doc: DocumentNode) => {
@@ -134,6 +134,12 @@ beforeEach(() => {
   };
 });
 
+afterEach(() => {
+  // force clear _react, which useQuery sets on the client if not present
+  mockUrqlClient._react = undefined;
+  jest.clearAllMocks();
+});
+
 export const createMockUrqlCient = (assertions?: {
   mutationAssertions?: (request: GraphQLRequest) => void;
   queryAssertions?: (request: GraphQLRequest) => void;
@@ -154,9 +160,7 @@ export const TestWrapper = (api: AnyClient) => (props: { children: ReactNode })
 
   return (
     <Provider api={api}>
-      <Suspense fallback={<div>Loading...</div>}>
-        {props.children}
-      </Suspense>
+      <Suspense fallback={<div>Loading...</div>}>{props.children}</Suspense>
     </Provider>
   );
 };

packages/react/src/components/SignedIn.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
+import React from "react";
 import { useSession } from "../../src/auth/useSession";
 import { isSessionSignedIn } from "../../src/auth/utils";
-import React from "react";
 
 export const SignedIn = (props: { children: ReactNode }) => {
   const session = useSession();

packages/react/src/components/SignedInOrRedirect.tsx

@@ -1,9 +1,8 @@
 import type { ReactNode } from "react";
-import { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { GadgetClientContext } from "../../src/GadgetProvider";
 import { useSession } from "../../src/auth/useSession";
 import { isSessionSignedIn } from "../../src/auth/utils";
-import React from "react";
 
 export const SignedInOrRedirect = (props: { children: ReactNode }) => {
   const [redirected, setRedirected] = useState(false);

packages/react/src/components/SignedOut.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
+import React from "react";
 import { useSession } from "../../src/auth/useSession";
 import { isSessionSignedOut } from "../../src/auth/utils";
-import React from "react";
 
 export const SignedOut = (props: { children: ReactNode }) => {
   const session = useSession();

packages/react/src/utils.ts

@@ -2,6 +2,7 @@ import type { FieldSelection, GadgetError, InvalidFieldError, InvalidRecordError
 import { gadgetErrorFor, getNonNullableError } from "@gadgetinc/api-client-core";
 import type { CombinedError, RequestPolicy } from "@urql/core";
 import { GraphQLError } from "graphql";
+import { omit } from "lodash";
 import { useMemo } from "react";
 import type { AnyVariables, Operation, OperationContext, UseQueryArgs, UseQueryState } from "urql";
 
@@ -266,7 +267,7 @@ export const useMemoizedQueryArgs = <Plan extends QueryPlan, Options extends Que
   return {
     query: plan.query,
     variables: plan.variables,
-    ...options,
+    ...omit(options, ["context", "suspense"]),
     context,
   };
 };