Fix tests

packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js

@@ -17,6 +17,10 @@ let act;
 const util = require('util');
 const realConsoleError = console.error;
 
+function errorHandler() {
+  // forward to console.error but don't fail the tests
+}
+
 describe('ReactDOMServerHydration', () => {
   let container;
 
@@ -27,12 +31,14 @@ describe('ReactDOMServerHydration', () => {
     ReactDOMServer = require('react-dom/server');
     act = React.act;
 
+    window.addEventListener('error', errorHandler);
     console.error = jest.fn();
     container = document.createElement('div');
     document.body.appendChild(container);
   });
 
   afterEach(() => {
+    window.removeEventListener('error', errorHandler);
     document.body.removeChild(container);
     console.error = realConsoleError;
   });

packages/react-dom/src/__tests__/ReactDOMRoot-test.js

@@ -319,9 +319,11 @@ describe('ReactDOMRoot', () => {
     });
     container.innerHTML = '';
 
-    expect(() => {
-      root.unmount();
-    }).toThrow('The node to be removed is not a child of this node.');
+    await expect(async () => {
+      await act(() => {
+        root.unmount();
+      });
+    }).rejects.toThrow('The node to be removed is not a child of this node.');
   });
 
   it('opts-in to concurrent default updates', async () => {

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -1448,7 +1448,13 @@ describe('ReactDOMSelect', () => {
               </select>,
             );
           }),
-        ).rejects.toThrowError(new TypeError('prod message'));
+        ).rejects.toThrowError(
+          // eslint-disable-next-line no-undef
+          new AggregateError([
+            new TypeError('prod message'),
+            new TypeError('prod message'),
+          ]),
+        );
       }).toErrorDev([
         'The provided `value` attribute is an unsupported type TemporalLike.' +
           ' This value must be coerced to a string before using it here.',

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -643,7 +643,7 @@ describe('ReactErrorBoundaries', () => {
       root.render(<BrokenComponentWillUnmount />);
     });
     await expect(async () => {
-      root.unmount();
+      await act(() => root.unmount());
     }).rejects.toThrow('Hello');
   });
 
@@ -2470,7 +2470,7 @@ describe('ReactErrorBoundaries', () => {
     ]);
   });
 
-  it('passes first error when two errors happen in commit', async () => {
+  it('passes an aggregate error when two errors happen in commit', async () => {
     const errors = [];
     let caughtError;
     class Parent extends React.Component {
@@ -2501,15 +2501,14 @@ describe('ReactErrorBoundaries', () => {
         root.render(<Parent />);
       });
     } catch (e) {
-      if (e.message !== 'parent sad' && e.message !== 'child sad') {
-        throw e;
-      }
       caughtError = e;
     }
 
     expect(errors).toEqual(['child sad', 'parent sad']);
-    // Error should be the first thrown
-    expect(caughtError.message).toBe('child sad');
+    expect(caughtError.errors).toEqual([
+      expect.objectContaining({message: 'child sad'}),
+      expect.objectContaining({message: 'parent sad'}),
+    ]);
   });
 
   it('propagates uncaught error inside unbatched initial mount', async () => {
@@ -2561,15 +2560,14 @@ describe('ReactErrorBoundaries', () => {
         root.render(<Parent value={2} />);
       });
     } catch (e) {
-      if (e.message !== 'parent sad' && e.message !== 'child sad') {
-        throw e;
-      }
       caughtError = e;
     }
 
     expect(errors).toEqual(['child sad', 'parent sad']);
-    // Error should be the first thrown
-    expect(caughtError.message).toBe('child sad');
+    expect(caughtError.errors).toEqual([
+      expect.objectContaining({message: 'child sad'}),
+      expect.objectContaining({message: 'parent sad'}),
+    ]);
   });
 
   it('should warn if an error boundary with only componentDidCatch does not update state', async () => {

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js

@@ -13,6 +13,7 @@
 let PropTypes;
 let RCTEventEmitter;
 let React;
+let act;
 let ReactNative;
 let ResponderEventPlugin;
 let UIManager;
@@ -67,6 +68,7 @@ beforeEach(() => {
   RCTEventEmitter =
     require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').RCTEventEmitter;
   React = require('react');
+  act = React.act;
   ReactNative = require('react-native-renderer');
   ResponderEventPlugin =
     require('react-native-renderer/src/legacy-events/ResponderEventPlugin').default;
@@ -77,7 +79,7 @@ beforeEach(() => {
       .ReactNativeViewConfigRegistry.register;
 });
 
-it('fails to register the same event name with different types', () => {
+it('fails to register the same event name with different types', async () => {
   const InvalidEvents = createReactNativeComponentClass('InvalidEvents', () => {
     if (!__DEV__) {
       // Simulate a registration error in prod.
@@ -109,15 +111,15 @@ it('fails to register the same event name with different types', () => {
 
   // The first time this renders,
   // we attempt to register the view config and fail.
-  expect(() => ReactNative.render(<InvalidEvents />, 1)).toThrow(
-    'Event cannot be both direct and bubbling: topChange',
-  );
+  await expect(
+    async () => await act(() => ReactNative.render(<InvalidEvents />, 1)),
+  ).rejects.toThrow('Event cannot be both direct and bubbling: topChange');
 
   // Continue to re-register the config and
   // fail so that we don't mask the above failure.
-  expect(() => ReactNative.render(<InvalidEvents />, 1)).toThrow(
-    'Event cannot be both direct and bubbling: topChange',
-  );
+  await expect(
+    async () => await act(() => ReactNative.render(<InvalidEvents />, 1)),
+  ).rejects.toThrow('Event cannot be both direct and bubbling: topChange');
 });
 
 it('fails if unknown/unsupported event types are dispatched', () => {

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

@@ -17,6 +17,7 @@ let createReactNativeComponentClass;
 let UIManager;
 let TextInputState;
 let ReactNativePrivateInterface;
+let act;
 
 const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
   "Warning: dispatchCommand was called with a ref that isn't a " +
@@ -31,6 +32,7 @@ describe('ReactNative', () => {
     jest.resetModules();
 
     React = require('react');
+    act = React.act;
     StrictMode = React.StrictMode;
     ReactNative = require('react-native-renderer');
     ReactNativePrivateInterface = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
@@ -476,7 +478,7 @@ describe('ReactNative', () => {
     );
   });
 
-  it('should throw for text not inside of a <Text> ancestor', () => {
+  it('should throw for text not inside of a <Text> ancestor', async () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -490,18 +492,24 @@ describe('ReactNative', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
+    await expect(async () => {
+      await act(() => ReactNative.render(<View>this should warn</View>, 11));
+    }).rejects.toThrow(
       'Text strings must be rendered within a <Text> component.',
     );
 
-    expect(() =>
-      ReactNative.render(
-        <Text>
-          <ScrollView>hi hello hi</ScrollView>
-        </Text>,
-        11,
-      ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    await expect(async () => {
+      await act(() =>
+        ReactNative.render(
+          <Text>
+            <ScrollView>hi hello hi</ScrollView>
+          </Text>,
+          11,
+        ),
+      );
+    }).rejects.toThrow(
+      'Text strings must be rendered within a <Text> component.',
+    );
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

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

@@ -140,6 +140,6 @@ describe('ReactFlushSync (AggregateError not available)', () => {
     // AggregateError is not available, React throws the first error, then
     // throws the remaining errors in separate tasks.
     expect(error).toBe(aahh);
-    expect(flushFakeMicrotasks).toThrow(nooo);
+    await flushFakeMicrotasks();
   });
 });

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

@@ -1899,7 +1899,7 @@ describe('ReactHooks', () => {
     }).rejects.toThrow('Hello');
 
     if (__DEV__) {
-      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error).toHaveBeenCalledTimes(1);
       expect(console.error.mock.calls[0][0]).toContain(
         'Warning: Cannot update a component (`%s`) while rendering ' +
           'a different component (`%s`).',

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

@@ -2077,14 +2077,15 @@ describe('ReactHooksWithNoopRenderer', () => {
         });
         return <Text text={'Count: ' + props.count} />;
       }
-      await act(async () => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.log('Sync effect'),
-        );
-        await waitFor(['Count: 0', 'Sync effect']);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-      });
+      await expect(async () => {
+        await act(async () => {
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 0', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 0" />);
+        });
+      }).rejects.toThrow('Oops');
 
       assertLog([
         'Mount A [0]',
@@ -2107,7 +2108,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         useEffect(() => {
           if (props.count === 1) {
             Scheduler.log('Oops!');
-            throw new Error('Oops!');
+            throw new Error('Oops error!');
           }
           Scheduler.log(`Mount B [${props.count}]`);
           return () => {
@@ -2126,22 +2127,27 @@ describe('ReactHooksWithNoopRenderer', () => {
         assertLog(['Mount A [0]', 'Mount B [0]']);
       });
 
-      await act(async () => {
-        // This update will trigger an error
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.log('Sync effect'),
-        );
-        await waitFor(['Count: 1', 'Sync effect']);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-        assertLog(['Unmount A [0]', 'Unmount B [0]', 'Mount A [1]', 'Oops!']);
-        expect(ReactNoop).toMatchRenderedOutput(null);
-      });
-      assertLog([
-        // Clean up effect A runs passively on unmount.
-        // There's no effect B to clean-up, because it never mounted.
-        'Unmount A [1]',
-      ]);
+      await expect(async () => {
+        await act(async () => {
+          // This update will trigger an error
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 1', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+          ReactNoop.flushPassiveEffects();
+          assertLog([
+            'Unmount A [0]',
+            'Unmount B [0]',
+            'Mount A [1]',
+            'Oops!',
+            // Clean up effect A runs passively on unmount.
+            // There's no effect B to clean-up, because it never mounted.
+            'Unmount A [1]',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(null);
+        });
+      }).rejects.toThrow('Oops error!');
     });
 
     it('handles errors in destroy on update', async () => {
@@ -2151,7 +2157,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           return () => {
             Scheduler.log('Oops!');
             if (props.count === 0) {
-              throw new Error('Oops!');
+              throw new Error('Oops error!');
             }
           };
         });
@@ -2174,26 +2180,34 @@ describe('ReactHooksWithNoopRenderer', () => {
         assertLog(['Mount A [0]', 'Mount B [0]']);
       });
 
-      await act(async () => {
-        // This update will trigger an error during passive effect unmount
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.log('Sync effect'),
-        );
-        await waitFor(['Count: 1', 'Sync effect']);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+      await expect(async () => {
+        await act(async () => {
+          // This update will trigger an error during passive effect unmount
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.log('Sync effect'),
+          );
+          await waitFor(['Count: 1', 'Sync effect']);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop="Count: 1" />);
+          ReactNoop.flushPassiveEffects();
 
-        // This branch enables a feature flag that flushes all passive destroys in a
-        // separate pass before flushing any passive creates.
-        // A result of this two-pass flush is that an error thrown from unmount does
-        // not block the subsequent create functions from being run.
-        assertLog(['Oops!', 'Unmount B [0]', 'Mount A [1]', 'Mount B [1]']);
-      });
+          // This branch enables a feature flag that flushes all passive destroys in a
+          // separate pass before flushing any passive creates.
+          // A result of this two-pass flush is that an error thrown from unmount does
+          // not block the subsequent create functions from being run.
+          assertLog([
+            'Oops!',
+            'Unmount B [0]',
+            'Mount A [1]',
+            'Mount B [1]',
+            // <Counter> gets unmounted because an error is thrown above.
+            // The remaining destroy functions are run later on unmount, since they're passive.
+            // In this case, one of them throws again (because of how the test is written).
+            'Oops!',
+            'Unmount B [1]',
+          ]);
+        });
+      }).rejects.toThrow('Oops error!');
 
-      // <Counter> gets unmounted because an error is thrown above.
-      // The remaining destroy functions are run later on unmount, since they're passive.
-      // In this case, one of them throws again (because of how the test is written).
-      assertLog(['Oops!', 'Unmount B [1]']);
       expect(ReactNoop).toMatchRenderedOutput(null);
     });
 
@@ -3805,7 +3819,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           await waitForThrow(
             'Rendered more hooks than during the previous render.',
           );
-          assertLog([]);
+          assertLog(['Unmount A']);
         }).toErrorDev([
           'Warning: React has detected a change in the order of Hooks called by App. ' +
             'This will lead to bugs and errors if not fixed. For more information, ' +