Enable concurrent mode for useQueryLoader-test and useQueryLoader-liv…

…e-query-test Reviewed By: tyao1 Differential Revision: D60396846 fbshipit-source-id: 3095acd57a7584d4379f46060c20d276c6eb2fcb
facebook · Jul 30, 2024 · 98b104f · 98b104f
1 parent c665044
commit 98b104f
Show file tree

Hide file tree

Showing 2 changed files with 204 additions and 202 deletions.
diff --git a/packages/react-relay/relay-hooks/__tests__/useQueryLoader-live-query-test.js b/packages/react-relay/relay-hooks/__tests__/useQueryLoader-live-query-test.js
@@ -635,113 +635,114 @@ it('should release and cancel queries on unmount if the callback is called, the
   expect(dispose).toHaveBeenCalledTimes(1);
 });
 
-skipIf(
-  process.env.OSS,
-  'releases and cancels all queries if a the callback is called, the component suspends, another query is called and then the component unmounts',
-  () => {
-    let shouldSuspend;
-    let setShouldSuspend;
-    const suspensePromise = new Promise(() => {});
-    function SuspendingComponent() {
-      [shouldSuspend, setShouldSuspend] = React.useState(false);
-      if (shouldSuspend) {
-        throw suspensePromise;
-      }
-      return null;
-    }
-    function Outer() {
-      return (
-        <RelayEnvironmentProvider environment={environment}>
-          <React.Suspense fallback="fallback">
-            <SuspendingComponent />
-            <Container />
-          </React.Suspense>
-        </RelayEnvironmentProvider>
-      );
+it('releases and cancels all queries if a the callback is called, the component suspends, another query is called and then the component unmounts', () => {
+  let shouldSuspend;
+  let setShouldSuspend;
+  const suspensePromise = new Promise(() => {});
+  function SuspendingComponent() {
+    [shouldSuspend, setShouldSuspend] = React.useState(false);
+    if (shouldSuspend) {
+      throw suspensePromise;
     }
+    return null;
+  }
+  function Outer() {
+    return (
+      <RelayEnvironmentProvider environment={environment}>
+        <React.Suspense fallback="fallback">
+          <SuspendingComponent />
+          <Container />
+        </React.Suspense>
+      </RelayEnvironmentProvider>
+    );
+  }
 
-    let outerInstance;
-    ReactTestRenderer.act(() => {
-      outerInstance = ReactTestRenderer.create(<Outer />);
-    });
-    expect(renderCount).toEqual(1);
-    ReactTestRenderer.act(() => {
-      /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
-       * useQueryLoader */
-      queryLoaderCallback({});
-    });
-    expect(renderCount).toEqual(2);
-    const firstDispose = dispose;
-    ReactTestRenderer.act(() => {
-      setShouldSuspend(true);
-    });
-    expect(renderCount).toEqual(2);
-    expect(firstDispose).not.toHaveBeenCalled();
-    expect(outerInstance?.toJSON()).toEqual('fallback');
+  let outerInstance;
+  ReactTestRenderer.act(() => {
+    outerInstance = ReactTestRenderer.create(
+      <Outer />,
+      // $FlowFixMe[prop-missing]
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+  });
+  expect(renderCount).toEqual(1);
+  ReactTestRenderer.act(() => {
+    /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
+     * useQueryLoader */
+    queryLoaderCallback({});
+  });
+  expect(renderCount).toEqual(2);
+  ReactTestRenderer.act(() => {
+    setShouldSuspend(true);
+  });
+  expect(renderCount).toEqual(2);
+  expect(dispose).not.toHaveBeenCalled();
+  expect(outerInstance?.toJSON()).toEqual('fallback');
 
-    ReactTestRenderer.act(() => {
-      /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
-       * useQueryLoader */
-      queryLoaderCallback({});
-    });
-    const secondDispose = dispose;
-    expect(renderCount).toEqual(3);
-    expect(outerInstance?.toJSON()).toEqual('fallback');
-    expect(firstDispose).toHaveBeenCalledTimes(1);
-    expect(secondDispose).not.toHaveBeenCalled();
-    ReactTestRenderer.act(() => outerInstance?.unmount());
-    expect(secondDispose).toHaveBeenCalledTimes(1);
-  },
-);
-
-skipIf(
-  process.env.OSS,
-  'releases and cancels all queries if the component suspends, another query is loaded and then the component unmounts',
-  () => {
-    let shouldSuspend;
-    let setShouldSuspend;
-    const suspensePromise = new Promise(() => {});
-    function SuspendingComponent() {
-      [shouldSuspend, setShouldSuspend] = React.useState(false);
-      if (shouldSuspend) {
-        throw suspensePromise;
-      }
-      return null;
-    }
-    function Outer() {
-      return (
-        <RelayEnvironmentProvider environment={environment}>
-          <React.Suspense fallback="fallback">
-            <SuspendingComponent />
-            <Container />
-          </React.Suspense>
-        </RelayEnvironmentProvider>
-      );
+  ReactTestRenderer.act(() => {
+    /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
+     * useQueryLoader */
+    queryLoaderCallback({});
+  });
+  expect(renderCount).toEqual(2);
+  expect(outerInstance?.toJSON()).toEqual('fallback');
+  expect(dispose).not.toHaveBeenCalled();
+  ReactTestRenderer.act(() => outerInstance?.unmount());
+  expect(dispose).toHaveBeenCalledTimes(1);
+});
+
+it('releases and cancels all queries if the component suspends, another query is loaded and then the component unmounts', () => {
+  let shouldSuspend;
+  let setShouldSuspend;
+  const suspensePromise = new Promise(() => {});
+  function SuspendingComponent() {
+    [shouldSuspend, setShouldSuspend] = React.useState(false);
+    if (shouldSuspend) {
+      throw suspensePromise;
     }
+    return null;
+  }
+  function Outer() {
+    return (
+      <RelayEnvironmentProvider environment={environment}>
+        <React.Suspense fallback="fallback">
+          <SuspendingComponent />
+          <Container />
+        </React.Suspense>
+      </RelayEnvironmentProvider>
+    );
+  }
 
-    let outerInstance;
-    ReactTestRenderer.act(() => {
-      outerInstance = ReactTestRenderer.create(<Outer />);
-    });
-    expect(renderCount).toEqual(1);
-    ReactTestRenderer.act(() => {
-      setShouldSuspend(true);
-    });
-    expect(renderCount).toEqual(1);
-    expect(outerInstance?.toJSON()).toEqual('fallback');
-    ReactTestRenderer.act(() => {
-      /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
-       * useQueryLoader */
-      queryLoaderCallback({});
-    });
+  let outerInstance;
+  ReactTestRenderer.act(() => {
+    outerInstance = ReactTestRenderer.create(
+      <Outer />,
+      // $FlowFixMe[prop-missing]
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+  });
+  expect(renderCount).toEqual(1);
+  ReactTestRenderer.act(() => {
+    setShouldSuspend(true);
+  });
+  expect(renderCount).toEqual(1);
+  expect(outerInstance?.toJSON()).toEqual('fallback');
+  ReactTestRenderer.act(() => {
+    /* $FlowFixMe[prop-missing] error exposed when improving flow typing of
+     * useQueryLoader */
+    queryLoaderCallback({});
+  });
 
-    expect(renderCount).toEqual(2);
-    expect(outerInstance?.toJSON()).toEqual('fallback');
-    expect(dispose).not.toHaveBeenCalled();
-    ReactTestRenderer.act(() => outerInstance?.unmount());
-    expect(dispose).toHaveBeenCalledTimes(1);
-  },
-);
+  expect(renderCount).toEqual(1);
+  expect(outerInstance?.toJSON()).toEqual('fallback');
+  expect(dispose).not.toHaveBeenCalled();
+  ReactTestRenderer.act(() => outerInstance?.unmount());
+  expect(dispose).toHaveBeenCalledTimes(1);
+});
 
 it('releases and cancels the query on unmount if the component unmounts and then the callback is called before rendering', () => {
   // Case 1: unmount, then loadQuery