Codemod tests to waitFor pattern (8/?)

This converts some of our test suite to use the `waitFor` test pattern,
instead of the `expect(Scheduler).toFlushAndYield` pattern. Most of
these changes are automated with jscodeshift, with some slight manual
cleanup in certain cases.

See #26285 for full context.

Author: acdlite

packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js

@@ -16,6 +16,8 @@ let Scheduler;
 let act;
 let createMutableSource;
 let useMutableSource;
+let waitFor;
+let assertLog;
 
 describe('useMutableSourceHydration', () => {
   beforeEach(() => {
@@ -33,6 +35,10 @@ describe('useMutableSourceHydration', () => {
       React.createMutableSource || React.unstable_createMutableSource;
     useMutableSource =
       React.useMutableSource || React.unstable_useMutableSource;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    assertLog = InternalTestUtils.assertLog;
   });
 
   const defaultGetSnapshot = source => source.value;
@@ -156,15 +162,15 @@ describe('useMutableSourceHydration', () => {
 
     const htmlString = ReactDOMServer.renderToString(<TestComponent />);
     container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['only:one']);
+    assertLog(['only:one']);
     expect(source.listenerCount).toBe(0);
 
     act(() => {
       ReactDOMClient.hydrateRoot(container, <TestComponent />, {
         mutableSources: [mutableSource],
       });
     });
-    expect(Scheduler).toHaveYielded(['only:one']);
+    assertLog(['only:one']);
     expect(source.listenerCount).toBe(1);
   });
 
@@ -190,7 +196,7 @@ describe('useMutableSourceHydration', () => {
 
     const htmlString = ReactDOMServer.renderToString(<TestComponent />);
     container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['only:one']);
+    assertLog(['only:one']);
     expect(source.listenerCount).toBe(0);
 
     expect(() => {
@@ -211,7 +217,7 @@ describe('useMutableSourceHydration', () => {
       ],
       {withoutStack: 1},
     );
-    expect(Scheduler).toHaveYielded([
+    assertLog([
       'only:two',
       'only:two',
       'Log error: Text content does not match server-rendered HTML.',
@@ -221,7 +227,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
-  it('should detect a tear between hydrating components', () => {
+  it('should detect a tear between hydrating components', async () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
 
@@ -249,11 +255,11 @@ describe('useMutableSourceHydration', () => {
 
     const htmlString = ReactDOMServer.renderToString(<TestComponent />);
     container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
+    assertLog(['a:one', 'b:one']);
     expect(source.listenerCount).toBe(0);
 
-    expect(() => {
-      act(() => {
+    await expect(async () => {
+      await act(async () => {
         React.startTransition(() => {
           ReactDOMClient.hydrateRoot(container, <TestComponent />, {
             mutableSources: [mutableSource],
@@ -262,15 +268,15 @@ describe('useMutableSourceHydration', () => {
             },
           });
         });
-        expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+        await waitFor(['a:one']);
         source.value = 'two';
       });
     }).toErrorDev(
       'Warning: An error occurred during hydration. ' +
         'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
-    expect(Scheduler).toHaveYielded([
+    assertLog([
       'a:two',
       'b:two',
       // TODO: Before onRecoverableError, this error was never surfaced to the
@@ -288,7 +294,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
-  it('should detect a tear between hydrating components reading from different parts of a source', () => {
+  it('should detect a tear between hydrating components reading from different parts of a source', async () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
 
@@ -318,10 +324,10 @@ describe('useMutableSourceHydration', () => {
       </>,
     );
     container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
+    assertLog(['0:a:one', '1:b:one']);
 
-    expect(() => {
-      act(() => {
+    await expect(async () => {
+      await act(async () => {
         const fragment = (
           <>
             <Component
@@ -346,15 +352,15 @@ describe('useMutableSourceHydration', () => {
             },
           });
         });
-        expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
+        await waitFor(['0:a:one']);
         source.valueB = 'b:two';
       });
     }).toErrorDev(
       'Warning: An error occurred during hydration. ' +
         'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
-    expect(Scheduler).toHaveYielded([
+    assertLog([
       '0:a:one',
       '1:b:two',
       // TODO: Before onRecoverableError, this error was never surfaced to the

packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js

@@ -22,6 +22,8 @@ describe('useRef', () => {
   let useLayoutEffect;
   let useRef;
   let useState;
+  let waitForAll;
+  let assertLog;
 
   beforeEach(() => {
     React = require('react');
@@ -37,6 +39,10 @@ describe('useRef', () => {
     useLayoutEffect = React.useLayoutEffect;
     useRef = React.useRef;
     useState = React.useState;
+
+    const InternalTestUtils = require('internal-test-utils');
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
   });
 
   function Text(props) {
@@ -79,31 +85,31 @@ describe('useRef', () => {
     act(() => {
       ReactNoop.render(<App />);
     });
-    expect(Scheduler).toHaveYielded([]);
+    assertLog([]);
 
     ping(1);
     ping(2);
     ping(3);
 
-    expect(Scheduler).toHaveYielded([]);
+    assertLog([]);
 
     jest.advanceTimersByTime(100);
 
-    expect(Scheduler).toHaveYielded(['ping: 3']);
+    assertLog(['ping: 3']);
 
     ping(4);
     jest.advanceTimersByTime(20);
     ping(5);
     ping(6);
     jest.advanceTimersByTime(80);
 
-    expect(Scheduler).toHaveYielded([]);
+    assertLog([]);
 
     jest.advanceTimersByTime(20);
-    expect(Scheduler).toHaveYielded(['ping: 6']);
+    assertLog(['ping: 6']);
   });
 
-  it('should return the same ref during re-renders', () => {
+  it('should return the same ref during re-renders', async () => {
     function Counter() {
       const ref = useRef('val');
       const [count, setCount] = useState(0);
@@ -121,10 +127,10 @@ describe('useRef', () => {
     }
 
     ReactNoop.render(<Counter />);
-    expect(Scheduler).toFlushAndYield([3]);
+    await waitForAll([3]);
 
     ReactNoop.render(<Counter />);
-    expect(Scheduler).toFlushAndYield([3]);
+    await waitForAll([3]);
   });
 
   if (__DEV__) {

packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js

@@ -20,6 +20,9 @@ let useImperativeHandle;
 let useRef;
 let useState;
 let startTransition;
+let waitFor;
+let waitForAll;
+let assertLog;
 
 // This tests the native useSyncExternalStore implementation, not the shim.
 // Tests that apply to both the native implementation and the shim should go
@@ -41,6 +44,11 @@ describe('useSyncExternalStore', () => {
     useSyncExternalStore = React.useSyncExternalStore;
     startTransition = React.startTransition;
 
+    const InternalTestUtils = require('internal-test-utils');
+    waitFor = InternalTestUtils.waitFor;
+    waitForAll = InternalTestUtils.waitForAll;
+    assertLog = InternalTestUtils.assertLog;
+
     act = require('jest-react').act;
   });
 
@@ -122,13 +130,13 @@ describe('useSyncExternalStore', () => {
           root.render(<App store={store1} />);
         });
 
-        expect(Scheduler).toFlushAndYieldThrough(['A0', 'B0']);
+        await waitFor(['A0', 'B0']);
 
         // During an interleaved event, the store is mutated.
         store1.set(1);
 
         // Then we continue rendering.
-        expect(Scheduler).toFlushAndYield([
+        await waitForAll([
           // C reads a newer value from the store than A or B, which means they
           // are inconsistent.
           'C1',
@@ -152,13 +160,13 @@ describe('useSyncExternalStore', () => {
         });
 
         // Start a concurrent render that reads from the store, then yield.
-        expect(Scheduler).toFlushAndYieldThrough(['A0', 'B0']);
+        await waitFor(['A0', 'B0']);
 
         // During an interleaved event, the store is mutated.
         store2.set(1);
 
         // Then we continue rendering.
-        expect(Scheduler).toFlushAndYield([
+        await waitForAll([
           // C reads a newer value from the store than A or B, which means they
           // are inconsistent.
           'C1',
@@ -191,17 +199,17 @@ describe('useSyncExternalStore', () => {
       // Start a render that reads from the store and yields value
       root.render(<App />);
     });
-    expect(Scheduler).toHaveYielded(['value:initial']);
+    assertLog(['value:initial']);
 
     await act(() => {
       store.set('value:changed');
     });
-    expect(Scheduler).toHaveYielded(['value:changed']);
+    assertLog(['value:changed']);
 
     // If cached value was updated, we expect a re-render
     await act(() => {
       store.set('value:initial');
     });
-    expect(Scheduler).toHaveYielded(['value:initial']);
+    assertLog(['value:initial']);
   });
 });

packages/react-reconciler/src/__tests__/useRef-test.internal.js

@@ -18,6 +18,8 @@ let ReactFreshRuntime;
 let Scheduler;
 let act;
 let createReactClass;
+let waitFor;
+let assertLog;
 
 describe('ReactFresh', () => {
   let container;
@@ -32,6 +34,11 @@ describe('ReactFresh', () => {
       ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
       act = require('jest-react').act;
+
+      const InternalTestUtils = require('internal-test-utils');
+      waitFor = InternalTestUtils.waitFor;
+      assertLog = InternalTestUtils.assertLog;
+
       createReactClass = require('create-react-class/factory')(
         React.Component,
         React.isValidElement,
@@ -2441,7 +2448,7 @@ describe('ReactFresh', () => {
 
     const root = ReactDOMClient.createRoot(container);
     root.render(<AppV1 offscreen={true} />);
-    expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
+    await waitFor(['App#layout']);
     const el = container.firstChild;
     expect(el.hidden).toBe(true);
     expect(el.firstChild).toBe(null); // Offscreen content not flushed yet.
@@ -2468,7 +2475,7 @@ describe('ReactFresh', () => {
     expect(el.firstChild).toBe(null);
 
     // Process the offscreen updates.
-    expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
+    await waitFor(['Hello#layout']);
     expect(container.firstChild).toBe(el);
     expect(el.firstChild.textContent).toBe('0');
     expect(el.firstChild.style.color).toBe('red');
@@ -2481,7 +2488,7 @@ describe('ReactFresh', () => {
       );
     });
 
-    expect(Scheduler).toHaveYielded(['Hello#layout']);
+    assertLog(['Hello#layout']);
     expect(el.firstChild.textContent).toBe('1');
     expect(el.firstChild.style.color).toBe('red');
 
@@ -2507,7 +2514,7 @@ describe('ReactFresh', () => {
     expect(el.firstChild.style.color).toBe('red');
 
     // Process the offscreen updates.
-    expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
+    await waitFor(['Hello#layout']);
     expect(container.firstChild).toBe(el);
     expect(el.firstChild.textContent).toBe('1');
     expect(el.firstChild.style.color).toBe('orange');

packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js

@@ -19,7 +19,9 @@ const {format: prettyFormat} = require('pretty-format');
 // Isolate noop renderer
 jest.resetModules();
 const ReactNoop = require('react-noop-renderer');
-const Scheduler = require('scheduler');
+
+const InternalTestUtils = require('internal-test-utils');
+const waitForAll = InternalTestUtils.waitForAll;
 
 // Kind of hacky, but we nullify all the instances to test the tree structure
 // with jasmine's deep equality function, and test the instances separate. We
@@ -1015,7 +1017,7 @@ describe('ReactTestRenderer', () => {
     );
   });
 
-  it('can concurrently render context with a "primary" renderer', () => {
+  it('can concurrently render context with a "primary" renderer', async () => {
     const Context = React.createContext(null);
     const Indirection = React.Fragment;
     const App = () => (
@@ -1026,7 +1028,7 @@ describe('ReactTestRenderer', () => {
       </Context.Provider>
     );
     ReactNoop.render(<App />);
-    expect(Scheduler).toFlushWithoutYielding();
+    await waitForAll([]);
     ReactTestRenderer.create(<App />);
   });
 

packages/react-refresh/src/__tests__/ReactFresh-test.js

@@ -4,6 +4,7 @@ let React;
 let ReactTestRenderer;
 let Scheduler;
 let act;
+let assertLog;
 
 describe('ReactTestRenderer.act()', () => {
   beforeEach(() => {
@@ -12,6 +13,9 @@ describe('ReactTestRenderer.act()', () => {
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
     act = ReactTestRenderer.act;
+
+    const InternalTestUtils = require('internal-test-utils');
+    assertLog = InternalTestUtils.assertLog;
   });
 
   // @gate __DEV__
@@ -91,7 +95,7 @@ describe('ReactTestRenderer.act()', () => {
       await act(async () => {
         root.update(<App />);
       });
-      expect(Scheduler).toHaveYielded([
+      assertLog([
         // Should not flush effects without also flushing microtasks
         // First render:
         'Effect',