Merge pull request #219 from relay-tools/react-v18

support React v18

Author: morrys

__tests__/ReactRelayPaginationContainer-test.tsx

@@ -1821,7 +1821,9 @@ describe('ReactRelayPaginationContainer', () => {
                     },
                 },
             });
-            instance.unmount();
+            ReactTestRenderer.act(() => {
+                instance.unmount();
+            });
             expect(references.length).toBe(1);
             expect(references[0].dispose).toBeCalled();
         });

__tests__/ReactRelayQueryRenderer-test.tsx

@@ -10,7 +10,7 @@
 
 /* eslint-disable */
 
-jest.mock('scheduler', () => require('scheduler/unstable_mock'));
+jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
 
 import * as React from 'react';
 import * as Scheduler from 'scheduler';
@@ -350,22 +350,30 @@ describe('ReactRelayQueryRenderer', () => {
                             );
                         }
                     }
-                    const renderer = ReactTestRenderer.create(<Example />, {
-                        unstable_isConcurrent: true,
+                    let renderer;
+                    // https://github.com/facebook/react/issues/24392
+                    React.startTransition(() => {
+                        renderer = ReactTestRenderer.create(<Example />, {
+                            unstable_isConcurrent: true,
+                            unstable_concurrentUpdatesByDefault: true,
+                        });
                     });
-
+    
                     // Flush some of the changes, but don't commit
                     (Scheduler as any).unstable_flushNumberOfYields(2);
+
+                    
                     expect((Scheduler as any).unstable_clearYields()).toEqual(['A', 'B']);
                     expect(renderer.toJSON()).toEqual(null);
                     expect().loadingRendered();
                     expect(environment.execute.mock.calls.length).toBe(1);
                     render.mockClear();
-
                     // Interrupt with higher priority updates
                     renderer.unstable_flushSync(() => {
                         renderer.update(<Example />);
                     });
+
+                    
                     expect(environment.execute.mock.calls.length).toBe(1);
                     expect().loadingRendered();
                 });
@@ -412,8 +420,13 @@ describe('ReactRelayQueryRenderer', () => {
                             );
                         }
                     }
-                    const renderer = ReactTestRenderer.create(<Example />, {
-                        unstable_isConcurrent: true,
+                    let renderer;
+                    // https://github.com/facebook/react/issues/24392
+                    React.startTransition(() => {
+                        renderer = ReactTestRenderer.create(<Example />, {
+                            unstable_isConcurrent: true,
+                            unstable_concurrentUpdatesByDefault: true,
+                        });
                     });
                     const owner = createOperationDescriptor(TestQuery, variables);
 
@@ -501,8 +514,13 @@ describe('ReactRelayQueryRenderer', () => {
                             );
                         }
                     }
-                    const renderer = ReactTestRenderer.create(<Example />, {
-                        unstable_isConcurrent: true,
+                    let renderer;
+                    // https://github.com/facebook/react/issues/24392
+                    React.startTransition(() => {
+                        renderer = ReactTestRenderer.create(<Example />, {
+                            unstable_isConcurrent: true,
+                            unstable_concurrentUpdatesByDefault: true,
+                        });
                     });
                     const owner = createOperationDescriptor(TestQuery, variables);
 
@@ -1644,7 +1662,9 @@ describe('ReactRelayQueryRenderer', () => {
             expect(environment.retain.mock.calls.length).toBe(1);
             const dispose = environment.retain.mock.dispose;
             expect(dispose).not.toBeCalled();
-            renderer.unmount();
+            ReactTestRenderer.act(() => {
+                renderer.unmount();
+            });
             expect(dispose).toBeCalled();
         });
 
@@ -1662,7 +1682,9 @@ describe('ReactRelayQueryRenderer', () => {
             expect(environment.retain.mock.calls.length).toBe(1);
             const dispose = environment.retain.mock.dispose;
             expect(dispose).not.toBeCalled();
-            renderer.unmount();
+            ReactTestRenderer.act(() => {
+                renderer.unmount();
+            });
             expect(dispose).toBeCalled();
         });
 
@@ -1677,7 +1699,9 @@ describe('ReactRelayQueryRenderer', () => {
             );
             const subscription = environment.execute.mock.subscriptions[0];
             expect(subscription.closed).toBe(false);
-            renderer.unmount();
+            ReactTestRenderer.act(() => {
+                renderer.unmount();
+            });
             expect(subscription.closed).toBe(true);
         });
     });

__tests__/ReactRelayRefetchContainer-test.tsx

@@ -951,7 +951,9 @@ describe('ReactRelayRefetchContainer', () => {
                     },
                 },
             });
-            instance.unmount();
+            ReactTestRenderer.act(() => {
+                instance.unmount();
+            });
             expect(references.length).toBe(1);
             expect(references[0].dispose).toBeCalled();
         });

__tests__/RelayHooks-test.tsx

@@ -13,8 +13,9 @@ import {
 } from '../src';
 
 function createHooks(component, options?: any) {
-    const result = ReactTestRenderer.create(component, options);
+    let result;// = ReactTestRenderer.create(component, options);
     ReactTestRenderer.act(() => {
+        result= ReactTestRenderer.create(component, options);
         jest.runAllImmediates();
     });
     return result;

__tests__/enqueue.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+relay
+ * @format
+ */
+
+// This file is sync'd from https://github.com/facebook/react/tree/main/packages/jest-react
+
+'use strict';
+
+let didWarnAboutMessageChannel = false;
+let enqueueTaskImpl = null;
+
+export function enqueueTask(task: () => void) {
+  if (enqueueTaskImpl === null) {
+    try {
+      // read require off the module object to get around the bundlers.
+      // we don't want them to detect a require and bundle a Node polyfill.
+      const requireString = ('require' + Math.random()).slice(0, 7);
+      const nodeRequire = module && module[requireString];
+      // assuming we're in node, let's try to get node's
+      // version of setImmediate, bypassing fake timers if any.
+      enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
+    } catch {
+      // we're in a browser
+      // we can't use regular timers because they may still be faked
+      // so we try MessageChannel+postMessage instead
+      enqueueTaskImpl = function (callback: () => void) {
+        if (__DEV__) {
+          if (didWarnAboutMessageChannel === false) {
+            didWarnAboutMessageChannel = true;
+            if (typeof MessageChannel === 'undefined') {
+              console.error(
+                'This browser does not have a MessageChannel implementation, ' +
+                  'so enqueuing tasks via await act(async () => ...) will fail. ' +
+                  'Please file an issue at https://github.com/facebook/react/issues ' +
+                  'if you encounter this warning.',
+              );
+            }
+          }
+        }
+        /*global MessageChannel*/
+        const channel = new MessageChannel();
+        channel.port1.onmessage = callback;
+        channel.port2.postMessage(undefined);
+      };
+    }
+  }
+  return enqueueTaskImpl(task);
+}

__tests__/internalAct.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+relay
+ * @format
+ */
+
+/* global jest */
+
+// This file is sync'd from https://github.com/facebook/react/tree/main/packages/jest-react
+
+// This version of `act` is only used by our tests. Unlike the public version
+// of `act`, it's designed to work identically in both production and
+// development. It may have slightly different behavior from the public
+// version, too, since our constraints in our test suite are not the same as
+// those of developers using React — we're testing React itself, as opposed to
+// building an app with React.
+
+'use strict';
+
+import { enqueueTask } from "./enqueue";
+
+const Scheduler = require('scheduler/unstable_mock');
+let actingUpdatesScopeDepth = 0;
+
+export function act<T>(scope: any): any {
+  if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
+    throw Error(
+      'This version of `act` requires a special mock build of Scheduler.',
+    );
+  }
+  if ((setTimeout as any)._isMockFunction !== true) {
+    throw Error(
+      "This version of `act` requires Jest's timer mocks " +
+        '(i.e. jest.useFakeTimers).',
+    );
+  }
+
+  const previousIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
+  actingUpdatesScopeDepth++;
+  if (__DEV__ && actingUpdatesScopeDepth === 1) {
+    // Because this is not the "real" `act`, we set this to `false` so React
+    // knows not to fire `act` warnings.
+    global.IS_REACT_ACT_ENVIRONMENT = false;
+  }
+
+  const unwind = () => {
+    if (__DEV__ && actingUpdatesScopeDepth === 1) {
+      global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
+    }
+    actingUpdatesScopeDepth--;
+
+    if (__DEV__) {
+      if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
+        // if it's _less than_ previousActingUpdatesScopeDepth, then we can
+        // assume the 'other' one has warned
+        console.error(
+          'You seem to have overlapping act() calls, this is not supported. ' +
+            'Be sure to await previous act() calls before making a new one. ',
+        );
+      }
+    }
+  };
+
+  // TODO: This would be way simpler if 1) we required a promise to be
+  // returned and 2) we could use async/await. Since it's only our used in
+  // our test suite, we should be able to.
+  try {
+    const result = scope();
+    if (
+      typeof result === 'object' &&
+      result !== null &&
+      typeof result.then === 'function'
+    ) {
+      const thenableResult: any = (result as any);
+      return {
+        then(resolve, reject) {
+          thenableResult.then(
+            returnValue => {
+              flushActWork(
+                () => {
+                  unwind();
+                  resolve(returnValue);
+                },
+                error => {
+                  unwind();
+                  reject(error);
+                },
+              );
+            },
+            error => {
+              unwind();
+              reject(error);
+            },
+          );
+        },
+      };
+    } else {
+      const returnValue: any = (result as any);
+      try {
+        // TODO: Let's not support non-async scopes at all in our tests. Need to
+        // migrate existing tests.
+        let didFlushWork;
+        do {
+          didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
+        } while (didFlushWork);
+        return {
+          then(resolve, reject) {
+            resolve(returnValue);
+          },
+        };
+      } finally {
+        unwind();
+      }
+    }
+  } catch (error) {
+    unwind();
+    throw error;
+  }
+}
+
+function flushActWork(resolve, reject) {
+  // Flush suspended fallbacks
+  // $FlowFixMe: Flow doesn't know about global Jest object
+  jest.runOnlyPendingTimers();
+  enqueueTask(() => {
+    try {
+      const didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
+      if (didFlushWork) {
+        flushActWork(resolve, reject);
+      } else {
+        resolve();
+      }
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+