From 78d6873b04b7d39bb39bfb528d25d56a15c41e6a Mon Sep 17 00:00:00 2001
From: sebmarkbage <sebmarkbage@users.noreply.github.com>
Date: Fri, 29 Mar 2024 01:42:24 -0700
Subject: [PATCH] Don't Rethrow Errors at the Root (#28627)

Summary:
Stacked on top of #28498 for test fixes.

### Don't Rethrow

When we started React it was 1:1 setState calls a series of renders and
if they error, it errors where the setState was called. Simple. However,
then batching came and the error actually got thrown somewhere else.
With concurrent mode, it's not even possible to get setState itself to
throw anymore.

In fact, all APIs that can rethrow out of React are executed either at
the root of the scheduler or inside a DOM event handler.
If you throw inside a React.startTransition callback that's sync, then
that will bubble out of the startTransition but if you throw inside an
async callback or a useTransition we now need to handle it at the hook
site. So in 19 we need to make all React.startTransition swallow the
error (and report them to reportError).

The only one remaining that can throw is flushSync but it doesn't really
make sense for it to throw at the callsite neither because batching.
Just because something rendered in this flush doesn't mean it was
rendered due to what was just scheduled and doesn't mean that it should
abort any of the remaining code afterwards. setState is fire and forget.
It's send an instruction elsewhere, it's not part of the current
imperative code.

Error boundaries never rethrow. Since you should really always have
error boundaries, most of the time, it wouldn't rethrow anyway.

Rethrowing also actually currently drops errors on the floor since we
can only rethrow the first error, so to avoid that we'd need to call
reportError anyway. This happens in RN events.

The other issue with rethrowing is that it logs an extra console.error.
Since we're not sure that user code will actually log it anywhere we
still log it too just like we do with errors inside error boundaries
which leads all of these to log twice.
The goal of this PR is to never rethrow out of React instead, errors
outside of error boundaries get logged to reportError. Event system
errors too.

### Breaking Changes

The main thing this affects is testing where you want to inspect the
errors thrown. To make it easier to port, if you're inside `act` we
track the error into act in an aggregate error and then rethrow it at
the root of `act`. Unlike before though, if you flush synchronously
inside of act it'll still continue until the end of act before
rethrowing.

I expect most user code breakages would be to migrate from `flushSync`
to `act` if you assert on throwing.

However, in the React repo we also have `internalAct` and the
`waitForThrow` helpers. Since these have to use public production
implementations we track these using the global onerror or process
uncaughtException. Unlike regular act, includes both event handler
errors and onRecoverableError by default too. Not just render/commit
errors. So I had to account for that in our tests.

We restore logging an extra log for uncaught errors after the main log
with the component stack in it. We use `console.warn`. This is not yet
ignorable if you preventDefault to the main error event. To avoid
confusion if you don't end up logging the error to console I just added
`An error occurred`.

### Polyfill

All browsers we support really supports `reportError` but not all test
and server environments do, so I implemented a polyfill for browser and
node in `shared/reportGlobalError`. I don't love that this is included
in all builds and gets duplicated into isomorphic even though it's not
actually needed in production. Maybe in the future we can require a
polyfill for this.

### Follow Ups

In a follow up, I'll make caught vs uncaught error handling be
configurable too.

---------

DiffTrain build for commit https://github.com/facebook/react/commit/6786563f3cbbc9b16d5a8187207b5bd904386e53.

Changelog:
[Internal]

Reviewed By: kassens

Differential Revision: D55408481

Pulled By: yungsters

fbshipit-source-id: 598aa306369e21cb3e93ad6041a87bfbaa9eef9e

Co-authored-by: Ricky Hanlon <rickhanlonii@gmail.com>
---
 .../Animated/__tests__/AnimatedNative-test.js |  70 ++--
 .../Lists/__tests__/VirtualizedList-test.js   | 370 +++++++++---------
 2 files changed, 220 insertions(+), 220 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/__tests__/AnimatedNative-test.js b/packages/react-native/Libraries/Animated/__tests__/AnimatedNative-test.js
index 67d1cf29113..e4e5a506899 100644
--- a/packages/react-native/Libraries/Animated/__tests__/AnimatedNative-test.js
+++ b/packages/react-native/Libraries/Animated/__tests__/AnimatedNative-test.js
@@ -25,7 +25,7 @@ jest
 
 import {format} from 'node:util';
 import * as React from 'react';
-import TestRenderer from 'react-test-renderer';
+import {act, create} from 'react-test-renderer';
 
 const Animated = require('../Animated').default;
 const NativeAnimatedHelper = require('../NativeAnimatedHelper').default;
@@ -67,7 +67,7 @@ describe('Native Animated', () => {
         useNativeDriver: true,
       }).start();
 
-      TestRenderer.create(<Animated.View ref={ref} style={{opacity}} />);
+      create(<Animated.View ref={ref} style={{opacity}} />);
 
       expect(ref.current).not.toBeNull();
       jest.spyOn(ref.current, 'setNativeProps');
@@ -86,7 +86,7 @@ describe('Native Animated', () => {
       opacity.setOffset(10);
       opacity.__makeNative();
 
-      TestRenderer.create(<Animated.View style={{opacity}} />);
+      create(<Animated.View style={{opacity}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -103,7 +103,7 @@ describe('Native Animated', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();
 
-      TestRenderer.create(<Animated.View style={{opacity}} />);
+      create(<Animated.View style={{opacity}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -123,7 +123,7 @@ describe('Native Animated', () => {
 
       opacity.__makeNative();
 
-      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const root = create(<Animated.View style={{opacity}} />);
       const tag = opacity.__getNativeTag();
 
       root.unmount();
@@ -145,7 +145,7 @@ describe('Native Animated', () => {
       opacity.setOffset(0.5);
       opacity.__makeNative();
 
-      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const root = create(<Animated.View style={{opacity}} />);
       const tag = opacity.__getNativeTag();
 
       root.unmount();
@@ -161,7 +161,7 @@ describe('Native Animated', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();
 
-      TestRenderer.create(<Animated.View style={{opacity}} />);
+      create(<Animated.View style={{opacity}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -250,7 +250,7 @@ describe('Native Animated', () => {
         useNativeDriver: true,
       });
 
-      const root = TestRenderer.create(<Animated.View onTouchMove={event} />);
+      const root = create(<Animated.View onTouchMove={event} />);
       expect(NativeAnimatedModule.addAnimatedEventToView).toBeCalledWith(
         expect.any(Number),
         'onTouchMove',
@@ -278,7 +278,7 @@ describe('Native Animated', () => {
         useNativeDriver: true,
       });
 
-      TestRenderer.create(<Animated.View onTouchMove={event} />);
+      create(<Animated.View onTouchMove={event} />);
       ['x', 'y'].forEach((key, idx) =>
         expect(
           NativeAnimatedModule.addAnimatedEventToView,
@@ -289,7 +289,7 @@ describe('Native Animated', () => {
       );
     });
 
-    it('should throw on invalid event path', () => {
+    it('should throw on invalid event path', async () => {
       const value = new Animated.Value(0);
       value.__makeNative();
       const event = Animated.event([{notNativeEvent: {foo: value}}], {
@@ -305,9 +305,11 @@ describe('Native Animated', () => {
         consoleError(...args);
       });
 
-      expect(() => {
-        TestRenderer.create(<Animated.View onTouchMove={event} />);
-      }).toThrowError(/nativeEvent/);
+      await expect(async () => {
+        await act(() => {
+          create(<Animated.View onTouchMove={event} />);
+        });
+      }).rejects.toThrowError(/nativeEvent/);
       expect(NativeAnimatedModule.addAnimatedEventToView).not.toBeCalled();
 
       console.error.mockRestore();
@@ -331,7 +333,7 @@ describe('Native Animated', () => {
   describe('Animated Graph', () => {
     it('creates and detaches nodes', () => {
       const opacity = new Animated.Value(0);
-      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const root = create(<Animated.View style={{opacity}} />);
 
       Animated.timing(opacity, {
         toValue: 10,
@@ -371,7 +373,7 @@ describe('Native Animated', () => {
 
     it('sends a valid description for value, style and props nodes', () => {
       const opacity = new Animated.Value(0);
-      TestRenderer.create(<Animated.View style={{opacity}} />);
+      create(<Animated.View style={{opacity}} />);
 
       Animated.timing(opacity, {
         toValue: 10,
@@ -399,9 +401,7 @@ describe('Native Animated', () => {
       first.__makeNative();
       second.__makeNative();
 
-      TestRenderer.create(
-        <Animated.View style={{opacity: Animated.add(first, second)}} />,
-      );
+      create(<Animated.View style={{opacity: Animated.add(first, second)}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -443,7 +443,7 @@ describe('Native Animated', () => {
       first.__makeNative();
       second.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View style={{opacity: Animated.subtract(first, second)}} />,
       );
 
@@ -487,7 +487,7 @@ describe('Native Animated', () => {
       first.__makeNative();
       second.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View style={{opacity: Animated.multiply(first, second)}} />,
       );
 
@@ -531,7 +531,7 @@ describe('Native Animated', () => {
       first.__makeNative();
       second.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View style={{opacity: Animated.divide(first, second)}} />,
       );
 
@@ -573,9 +573,7 @@ describe('Native Animated', () => {
       const value = new Animated.Value(4);
       value.__makeNative();
 
-      TestRenderer.create(
-        <Animated.View style={{opacity: Animated.modulo(value, 4)}} />,
-      );
+      create(<Animated.View style={{opacity: Animated.modulo(value, 4)}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -607,7 +605,7 @@ describe('Native Animated', () => {
       const value = new Animated.Value(10);
       value.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View
           style={{
             opacity: value.interpolate({
@@ -651,9 +649,7 @@ describe('Native Animated', () => {
       const translateX = new Animated.Value(0);
       translateX.__makeNative();
 
-      TestRenderer.create(
-        <Animated.View style={{transform: [{translateX}, {scale: 2}]}} />,
-      );
+      create(<Animated.View style={{transform: [{translateX}, {scale: 2}]}} />);
 
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
@@ -678,7 +674,7 @@ describe('Native Animated', () => {
     it('sends create operations before connect operations for multiple animated style props', () => {
       const opacity = new Animated.Value(0);
       const borderRadius = new Animated.Value(0);
-      TestRenderer.create(<Animated.View style={{borderRadius, opacity}} />);
+      create(<Animated.View style={{borderRadius, opacity}} />);
 
       Animated.timing(opacity, {
         toValue: 10,
@@ -772,7 +768,7 @@ describe('Native Animated', () => {
     it('sends create operations before connect operations for multiple animated transform props', () => {
       const translateX = new Animated.Value(0);
       const translateY = new Animated.Value(0);
-      TestRenderer.create(
+      create(
         <Animated.View
           style={{
             transform: [{translateX: translateX}, {translateY: translateY}],
@@ -894,7 +890,7 @@ describe('Native Animated', () => {
     it('sends create operations before connect operations for multiple animated props', () => {
       const propA = new Animated.Value(0);
       const propB = new Animated.Value(0);
-      TestRenderer.create(<Animated.View propA={propA} propB={propB} />);
+      create(<Animated.View propA={propA} propB={propB} />);
 
       Animated.timing(propA, {
         toValue: 10,
@@ -967,7 +963,7 @@ describe('Native Animated', () => {
       const value = new Animated.Value(2);
       value.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View style={{opacity: Animated.diffClamp(value, 0, 20)}} />,
       );
 
@@ -1000,7 +996,7 @@ describe('Native Animated', () => {
     it("doesn't call into native API if useNativeDriver is set to false", () => {
       const opacity = new Animated.Value(0);
 
-      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const root = create(<Animated.View style={{opacity}} />);
 
       Animated.timing(opacity, {
         toValue: 10,
@@ -1017,7 +1013,7 @@ describe('Native Animated', () => {
       const opacity = new Animated.Value(0);
       const ref = React.createRef(null);
 
-      TestRenderer.create(<Animated.View ref={ref} style={{opacity}} />);
+      create(<Animated.View ref={ref} style={{opacity}} />);
 
       // Necessary to simulate the native animation.
       expect(ref.current).not.toBeNull();
@@ -1046,7 +1042,7 @@ describe('Native Animated', () => {
     it('fails for unsupported styles', () => {
       const left = new Animated.Value(0);
 
-      TestRenderer.create(<Animated.View style={{left}} />);
+      create(<Animated.View style={{left}} />);
 
       const animation = Animated.timing(left, {
         toValue: 10,
@@ -1061,7 +1057,7 @@ describe('Native Animated', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();
 
-      TestRenderer.create(
+      create(
         <Animated.View
           removeClippedSubviews={true}
           style={{left: 10, opacity, top: 20}}
@@ -1269,7 +1265,7 @@ describe('Native Animated', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();
 
-      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const root = create(<Animated.View style={{opacity}} />);
       expect(NativeAnimatedModule.restoreDefaultValues).not.toHaveBeenCalled();
 
       root.update(<Animated.View style={{opacity}} />);
diff --git a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
index 8feafd86b64..2a5214438bc 100644
--- a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
+++ b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
@@ -12,14 +12,14 @@
 
 import VirtualizedList from '../VirtualizedList';
 import {format} from 'node:util';
-import React from 'react';
-import ReactTestRenderer from 'react-test-renderer';
+import * as React from 'react';
+import {act, create} from 'react-test-renderer';
 
 jest.useFakeTimers();
 
 describe('VirtualizedList', () => {
   it('renders simple list', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
@@ -34,7 +34,7 @@ describe('VirtualizedList', () => {
     function ListItemComponent({item}) {
       return <item value={item.key} />;
     }
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         ListItemComponent={ListItemComponent}
@@ -50,7 +50,7 @@ describe('VirtualizedList', () => {
     function ListItemComponent({item}) {
       return <item value={item.key} testID={`${item.key}-ListItemComponent`} />;
     }
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'i1'}]}
         ListItemComponent={ListItemComponent}
@@ -69,7 +69,7 @@ describe('VirtualizedList', () => {
     console.warn.mockRestore();
   });
 
-  it('throws if no renderItem or ListItemComponent', () => {
+  it('throws if no renderItem or ListItemComponent', async () => {
     // Silence the React error boundary warning; we expect an uncaught error.
     const consoleError = console.error;
     jest.spyOn(console, 'error').mockImplementation((...args) => {
@@ -80,15 +80,17 @@ describe('VirtualizedList', () => {
       consoleError(...args);
     });
 
-    const componentFactory = () =>
-      ReactTestRenderer.create(
-        <VirtualizedList
-          data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
-          getItem={(data, index) => data[index]}
-          getItemCount={data => data.length}
-        />,
-      );
-    expect(componentFactory).toThrow(
+    await expect(async () => {
+      await act(() => {
+        create(
+          <VirtualizedList
+            data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
+            getItem={(data, index) => data[index]}
+            getItemCount={data => data.length}
+          />,
+        );
+      });
+    }).rejects.toThrow(
       'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
     );
 
@@ -96,7 +98,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders empty list', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
@@ -108,7 +110,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders empty list after batch', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
@@ -117,7 +119,7 @@ describe('VirtualizedList', () => {
       />,
     );
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       simulateLayout(component, {
         viewport: {width: 10, height: 50},
         content: {width: 10, height: 200},
@@ -130,7 +132,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders null list', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={undefined}
         renderItem={({item}) => <item value={item.key} />}
@@ -143,7 +145,7 @@ describe('VirtualizedList', () => {
 
   it('scrollToEnd works with null list', () => {
     const listRef = React.createRef(null);
-    ReactTestRenderer.create(
+    create(
       <VirtualizedList
         data={undefined}
         renderItem={({item}) => <item value={item.key} />}
@@ -156,7 +158,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders empty list with empty component', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[]}
         ListEmptyComponent={() => <empty />}
@@ -171,7 +173,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders list with empty component', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'hello'}]}
         ListEmptyComponent={() => <empty />}
@@ -184,7 +186,7 @@ describe('VirtualizedList', () => {
   });
 
   it('renders all the bells and whistles', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         ItemSeparatorComponent={() => <separator />}
         ListEmptyComponent={() => <empty />}
@@ -205,7 +207,7 @@ describe('VirtualizedList', () => {
   });
 
   it('test getItem functionality where data is not an Array', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={new Map([['id_0', {key: 'item_0'}]])}
         getItem={(data, index) => data.get('id_' + index)}
@@ -218,7 +220,7 @@ describe('VirtualizedList', () => {
 
   it('handles separators correctly', () => {
     const infos = [];
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         ItemSeparatorComponent={props => <separator {...props} />}
         data={[{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]}
@@ -239,7 +241,7 @@ describe('VirtualizedList', () => {
   });
 
   it('handles nested lists', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'outer0'}, {key: 'outer1'}]}
         renderItem={outerInfo => (
@@ -270,8 +272,8 @@ describe('VirtualizedList', () => {
 
     let component;
 
-    ReactTestRenderer.act(() => {
-      component = ReactTestRenderer.create(
+    act(() => {
+      component = create(
         <VirtualizedList
           {...baseItemProps([])}
           ListEmptyComponent={ListEmptyComponent}
@@ -279,7 +281,7 @@ describe('VirtualizedList', () => {
       );
     });
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       component.update(
         <VirtualizedList
           {...baseItemProps(generateItems(5))}
@@ -313,7 +315,7 @@ describe('VirtualizedList', () => {
       onViewableItemsChanged,
     };
 
-    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const component = create(<VirtualizedList {...props} />);
 
     const instance = component.getInstance();
 
@@ -351,7 +353,7 @@ describe('VirtualizedList', () => {
   it('getScrollRef for case where it returns a ScrollView', () => {
     const listRef = React.createRef(null);
 
-    ReactTestRenderer.create(
+    create(
       <VirtualizedList
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
@@ -371,7 +373,7 @@ describe('VirtualizedList', () => {
   it('getScrollRef for case where it returns a View', () => {
     const listRef = React.createRef(null);
 
-    ReactTestRenderer.create(
+    create(
       <VirtualizedList
         data={[{key: 'outer0'}, {key: 'outer1'}]}
         renderItem={outerInfo => (
@@ -425,7 +427,7 @@ describe('VirtualizedList', () => {
       initialScrollIndex: data.length - 1,
     };
 
-    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const component = create(<VirtualizedList {...props} />);
 
     const instance = component.getInstance();
 
@@ -488,7 +490,7 @@ describe('VirtualizedList', () => {
       onStartReached,
     };
 
-    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const component = create(<VirtualizedList {...props} />);
 
     const instance = component.getInstance();
 
@@ -522,7 +524,7 @@ describe('VirtualizedList', () => {
       onEndReached,
     };
 
-    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const component = create(<VirtualizedList {...props} />);
 
     const instance = component.getInstance();
 
@@ -585,7 +587,7 @@ describe('VirtualizedList', () => {
       onEndReached,
     };
 
-    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const component = create(<VirtualizedList {...props} />);
 
     const instance = component.getInstance();
 
@@ -617,7 +619,7 @@ describe('VirtualizedList', () => {
   });
 
   it('throws if using scrollToIndex with index less than 0', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
@@ -633,7 +635,7 @@ describe('VirtualizedList', () => {
   });
 
   it('throws if using scrollToIndex when item length is less than 1', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
@@ -649,7 +651,7 @@ describe('VirtualizedList', () => {
   });
 
   it('throws if using scrollToIndex when requested index is bigger than or equal to item length', () => {
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
@@ -668,7 +670,7 @@ describe('VirtualizedList', () => {
     const items = generateItemsStickyEveryN(10, 3);
     const ITEM_HEIGHT = 10;
 
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         initialNumToRender={10}
         {...baseItemProps(items)}
@@ -686,7 +688,7 @@ describe('VirtualizedList', () => {
     const items = generateItemsStickyEveryN(10, 3);
     const ITEM_HEIGHT = 10;
 
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         ListHeaderComponent={() => React.createElement('Header')}
         initialNumToRender={10}
@@ -706,7 +708,7 @@ describe('VirtualizedList', () => {
 
     const ITEM_HEIGHT = 10;
 
-    const component = ReactTestRenderer.create(
+    const component = create(
       <VirtualizedList
         initialNumToRender={5}
         {...baseItemProps(items)}
@@ -725,8 +727,8 @@ describe('VirtualizedList', () => {
     const ITEM_HEIGHT = 10;
 
     let component;
-    ReactTestRenderer.act(() => {
-      component = ReactTestRenderer.create(
+    act(() => {
+      component = create(
         <VirtualizedList
           initialNumToRender={1}
           windowSize={1}
@@ -736,7 +738,7 @@ describe('VirtualizedList', () => {
       );
     });
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       simulateLayout(component, {
         viewport: {width: 10, height: 50},
         content: {width: 10, height: 100},
@@ -755,8 +757,8 @@ describe('VirtualizedList', () => {
     const ITEM_HEIGHT = 10;
 
     let component;
-    ReactTestRenderer.act(() => {
-      component = ReactTestRenderer.create(
+    act(() => {
+      component = create(
         <VirtualizedList
           initialNumToRender={1}
           windowSize={1}
@@ -766,7 +768,7 @@ describe('VirtualizedList', () => {
       );
     });
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       simulateLayout(component, {
         viewport: {width: 10, height: 50},
         content: {width: 10, height: 200},
@@ -774,7 +776,7 @@ describe('VirtualizedList', () => {
       performAllBatches();
     });
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       simulateScroll(component, {x: 0, y: 150});
       performAllBatches();
     });
@@ -794,8 +796,8 @@ it('unmounts sticky headers moved below viewport', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -805,7 +807,7 @@ it('unmounts sticky headers moved below viewport', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -813,12 +815,12 @@ it('unmounts sticky headers moved below viewport', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 0});
     performAllBatches();
   });
@@ -835,7 +837,7 @@ it('gracefully handles negative initialScrollIndex', () => {
 
   const mockWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={-1}
       initialNumToRender={4}
@@ -846,7 +848,7 @@ it('gracefully handles negative initialScrollIndex', () => {
 
   expect(mockWarn).toHaveBeenCalledTimes(1);
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -867,7 +869,7 @@ it('gracefully handles too large initialScrollIndex', () => {
 
   const mockWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       ref={listRef}
       initialScrollIndex={15}
@@ -880,7 +882,7 @@ it('gracefully handles too large initialScrollIndex', () => {
   expect(mockWarn).toHaveBeenCalledTimes(1);
   listRef.current.scrollToEnd = jest.fn();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -900,7 +902,7 @@ it('renders offset cells in initial render when initialScrollIndex set', () => {
   const items = generateItems(10);
   const ITEM_HEIGHT = 10;
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={4}
       initialNumToRender={4}
@@ -919,7 +921,7 @@ it('scrolls after content sizing with integer initialScrollIndex', () => {
 
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={1}
       initialNumToRender={4}
@@ -931,7 +933,7 @@ it('scrolls after content sizing with integer initialScrollIndex', () => {
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -948,7 +950,7 @@ it('scrolls after content sizing with near-zero initialScrollIndex', () => {
 
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={0.0001}
       initialNumToRender={4}
@@ -960,7 +962,7 @@ it('scrolls after content sizing with near-zero initialScrollIndex', () => {
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -977,7 +979,7 @@ it('scrolls after content sizing with near-end initialScrollIndex', () => {
 
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={9.9999}
       initialNumToRender={4}
@@ -989,7 +991,7 @@ it('scrolls after content sizing with near-end initialScrollIndex', () => {
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1011,7 +1013,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (getItemLayo
 
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={1.5}
       initialNumToRender={4}
@@ -1023,7 +1025,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (getItemLayo
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1038,7 +1040,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (cached layo
   const items = generateItems(10);
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={1.5}
       initialNumToRender={4}
@@ -1049,7 +1051,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (cached layo
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     let y = 0;
     for (let i = 0; i < 10; ++i) {
       const height = i + 1;
@@ -1076,7 +1078,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (layout esti
   const items = generateItems(10);
   const listRef = React.createRef(null);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={1.5}
       initialNumToRender={4}
@@ -1087,7 +1089,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (layout esti
 
   const {scrollTo} = listRef.current.getScrollRef();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     let y = 0;
     for (let i = 5; i < 10; ++i) {
       const height = i + 1;
@@ -1114,7 +1116,7 @@ it('initially renders nothing when initialNumToRender is 0', () => {
   const items = generateItems(10);
   const ITEM_HEIGHT = 10;
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialNumToRender={0}
       {...baseItemProps(items)}
@@ -1131,7 +1133,7 @@ it('does not over-render when there is less than initialNumToRender cells', () =
   const items = generateItems(10);
   const ITEM_HEIGHT = 10;
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialScrollIndex={4}
       initialNumToRender={20}
@@ -1150,8 +1152,8 @@ it('retains intitial render if initialScrollIndex == 0', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={0}
@@ -1162,7 +1164,7 @@ it('retains intitial render if initialScrollIndex == 0', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1170,7 +1172,7 @@ it('retains intitial render if initialScrollIndex == 0', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
@@ -1186,8 +1188,8 @@ it('discards intitial render if initialScrollIndex != 0', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialScrollIndex={5}
         initialNumToRender={5}
@@ -1198,7 +1200,7 @@ it('discards intitial render if initialScrollIndex != 0', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1206,7 +1208,7 @@ it('discards intitial render if initialScrollIndex != 0', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
@@ -1226,8 +1228,8 @@ it('expands render area by maxToRenderPerBatch on tick', () => {
   };
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         {...baseItemProps(items)}
         {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
@@ -1236,7 +1238,7 @@ it('expands render area by maxToRenderPerBatch on tick', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1258,8 +1260,8 @@ it('does not adjust render area until content area layed out', () => {
 
   let component;
 
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         windowSize={10}
@@ -1269,7 +1271,7 @@ it('does not adjust render area until content area layed out', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateViewportLayout(component, {width: 10, height: 50});
     performAllBatches();
   });
@@ -1286,8 +1288,8 @@ it('does not move render area when initialScrollIndex is > 0 and offset not yet
 
   let component;
 
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={1}
@@ -1298,7 +1300,7 @@ it('does not move render area when initialScrollIndex is > 0 and offset not yet
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1318,8 +1320,8 @@ it('clamps render area when items removed for initialScrollIndex > 0 and scrolle
 
   let component;
 
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={14}
@@ -1330,7 +1332,7 @@ it('clamps render area when items removed for initialScrollIndex > 0 and scrolle
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={5}
@@ -1342,7 +1344,7 @@ it('clamps render area when items removed for initialScrollIndex > 0 and scrolle
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1359,8 +1361,8 @@ it('adjusts render area with non-zero initialScrollIndex', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={1}
@@ -1372,14 +1374,16 @@ it('adjusts render area with non-zero initialScrollIndex', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
     });
     simulateScroll(component, {x: 0, y: 10}); // simulate scroll offset for initialScrollIndex
 
-    performAllBatches();
+    // TODO: Rewrite test to tolerate subtle timing changes.
+    performNextBatch();
+    performNextBatch();
   });
 
   // We should expand the render area after receiving a message indcating we
@@ -1392,8 +1396,8 @@ it('renders new items when data is updated with non-zero initialScrollIndex', ()
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={1}
@@ -1405,7 +1409,7 @@ it('renders new items when data is updated with non-zero initialScrollIndex', ()
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 20},
       content: {width: 10, height: 20},
@@ -1415,7 +1419,7 @@ it('renders new items when data is updated with non-zero initialScrollIndex', ()
 
   const newItems = generateItems(4);
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={5}
@@ -1428,7 +1432,7 @@ it('renders new items when data is updated with non-zero initialScrollIndex', ()
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     performAllBatches();
   });
 
@@ -1440,7 +1444,7 @@ it('renders initialNumToRender cells when virtualization disabled', () => {
   const items = generateItems(10);
   const ITEM_HEIGHT = 10;
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       initialNumToRender={5}
       initialScrollIndex={1}
@@ -1460,8 +1464,8 @@ it('renders no spacers up to initialScrollIndex on first render when virtualizat
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={2}
         initialScrollIndex={4}
@@ -1484,8 +1488,8 @@ it('expands first in viewport to render up to maxToRenderPerBatch on initial ren
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={2}
         initialScrollIndex={4}
@@ -1507,8 +1511,8 @@ it('renders items before initialScrollIndex on first batch tick when virtualizat
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         initialScrollIndex={5}
@@ -1520,7 +1524,7 @@ it('renders items before initialScrollIndex on first batch tick when virtualizat
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1541,8 +1545,8 @@ it('eventually renders all items when virtualization disabled', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={5}
         initialScrollIndex={1}
@@ -1555,7 +1559,7 @@ it('eventually renders all items when virtualization disabled', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1573,8 +1577,8 @@ it('retains initial render region when an item is appended', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={3}
         {...baseItemProps(items)}
@@ -1583,7 +1587,7 @@ it('retains initial render region when an item is appended', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={3}
@@ -1605,8 +1609,8 @@ it('retains batch render region when an item is appended', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -1616,7 +1620,7 @@ it('retains batch render region when an item is appended', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1626,7 +1630,7 @@ it('retains batch render region when an item is appended', () => {
 
   jest.runAllTimers();
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={1}
@@ -1650,8 +1654,8 @@ it('constrains batch render region when an item is removed', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -1661,7 +1665,7 @@ it('constrains batch render region when an item is removed', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 100},
@@ -1669,7 +1673,7 @@ it('constrains batch render region when an item is removed', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={1}
@@ -1690,7 +1694,7 @@ it('constrains batch render region when an item is removed', () => {
 it('renders a zero-height tail spacer on initial render if getItemLayout not defined', () => {
   const items = generateItems(10);
 
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList initialNumToRender={3} {...baseItemProps(items)} />,
   );
 
@@ -1704,8 +1708,8 @@ it('renders zero-height tail spacer on batch render if cells not yet measured an
   const items = generateItems(10);
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={3}
         maxToRenderPerBatch={1}
@@ -1715,7 +1719,7 @@ it('renders zero-height tail spacer on batch render if cells not yet measured an
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -1733,8 +1737,8 @@ it('renders tail spacer up to last measured index if getItemLayout not defined',
   const items = generateItems(10);
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={3}
         maxToRenderPerBatch={1}
@@ -1744,7 +1748,7 @@ it('renders tail spacer up to last measured index if getItemLayout not defined',
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     const LAST_MEASURED_CELL = 6;
     for (let i = 0; i <= LAST_MEASURED_CELL; ++i) {
       simulateCellLayout(component, items, i, {
@@ -1773,8 +1777,8 @@ it('renders tail spacer up to last measured with irregular layout when getItemLa
   const items = generateItems(10);
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={3}
         maxToRenderPerBatch={1}
@@ -1784,7 +1788,7 @@ it('renders tail spacer up to last measured with irregular layout when getItemLa
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     const LAST_MEASURED_CELL = 6;
 
     let currentY = 0;
@@ -1816,8 +1820,8 @@ it('renders full tail spacer if all cells measured', () => {
   const items = generateItems(10);
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={3}
         maxToRenderPerBatch={1}
@@ -1827,7 +1831,7 @@ it('renders full tail spacer if all cells measured', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     const LAST_MEASURED_CELL = 9;
     for (let i = 0; i <= LAST_MEASURED_CELL; ++i) {
       simulateCellLayout(component, items, i, {
@@ -1855,8 +1859,8 @@ it('renders windowSize derived region at top', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -1867,7 +1871,7 @@ it('renders windowSize derived region at top', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 20},
       content: {width: 10, height: 100},
@@ -1888,8 +1892,8 @@ it('renders windowSize derived region in middle', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -1900,7 +1904,7 @@ it('renders windowSize derived region in middle', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 20},
       content: {width: 10, height: 100},
@@ -1908,7 +1912,7 @@ it('renders windowSize derived region in middle', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 50});
     performAllBatches();
   });
@@ -1927,8 +1931,8 @@ it('renders windowSize derived region at bottom', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -1939,14 +1943,14 @@ it('renders windowSize derived region at bottom', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 20},
       content: {width: 10, height: 100},
     });
     performAllBatches();
   });
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 80});
     performAllBatches();
   });
@@ -1963,7 +1967,7 @@ it('renders windowSize derived region at bottom', () => {
 it('calls _onCellLayout properly', () => {
   const items = [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}];
   const mock = jest.fn();
-  const component = ReactTestRenderer.create(
+  const component = create(
     <VirtualizedList
       data={items}
       renderItem={({item}) => <item value={item.key} />}
@@ -1995,8 +1999,8 @@ it('keeps viewport below last focused rendered', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2006,7 +2010,7 @@ it('keeps viewport below last focused rendered', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -2015,11 +2019,11 @@ it('keeps viewport below last focused rendered', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(3);
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
@@ -2033,8 +2037,8 @@ it('virtualizes away last focused item if focus changes to a new cell', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2044,7 +2048,7 @@ it('virtualizes away last focused item if focus changes to a new cell', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -2053,16 +2057,16 @@ it('virtualizes away last focused item if focus changes to a new cell', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(3);
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(17);
   });
 
@@ -2076,8 +2080,8 @@ it('keeps viewport above last focused rendered', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2087,7 +2091,7 @@ it('keeps viewport above last focused rendered', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -2096,20 +2100,20 @@ it('keeps viewport above last focused rendered', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(3);
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(17);
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 0});
     performAllBatches();
   });
@@ -2123,8 +2127,8 @@ it('virtualizes away last focused index if item removed', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2134,7 +2138,7 @@ it('virtualizes away last focused index if item removed', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
@@ -2143,17 +2147,17 @@ it('virtualizes away last focused index if item removed', () => {
     performAllBatches();
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.getInstance()._onCellFocusCapture(3);
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateScroll(component, {x: 0, y: 150});
     performAllBatches();
   });
 
   const itemsWithoutFocused = [...items.slice(0, 3), ...items.slice(4)];
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={1}
@@ -2173,8 +2177,8 @@ it('handles maintainVisibleContentPosition', () => {
   const ITEM_HEIGHT = 10;
 
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2185,7 +2189,7 @@ it('handles maintainVisibleContentPosition', () => {
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: items.length * ITEM_HEIGHT},
@@ -2199,7 +2203,7 @@ it('handles maintainVisibleContentPosition', () => {
 
   // Add new items at the start of the list to trigger the maintainVisibleContentPosition adjustment.
   const newItems = [...generateItems(10, items.length), ...items];
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={1}
@@ -2215,7 +2219,7 @@ it('handles maintainVisibleContentPosition', () => {
   expect(component).toMatchSnapshot();
 
   // Simulate scroll adjustment from native maintainVisibleContentPosition.
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateContentLayout(component, {
       width: 10,
       height: newItems.length * ITEM_HEIGHT,
@@ -2234,8 +2238,8 @@ it('handles maintainVisibleContentPosition when anchor moves before minIndexForV
 
   // Render a list with `minIndexForVisible: 1`
   let component;
-  ReactTestRenderer.act(() => {
-    component = ReactTestRenderer.create(
+  act(() => {
+    component = create(
       <VirtualizedList
         initialNumToRender={1}
         windowSize={1}
@@ -2246,7 +2250,7 @@ it('handles maintainVisibleContentPosition when anchor moves before minIndexForV
     );
   });
 
-  ReactTestRenderer.act(() => {
+  act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
       content: {width: 10, height: items.length * ITEM_HEIGHT},
@@ -2260,7 +2264,7 @@ it('handles maintainVisibleContentPosition when anchor moves before minIndexForV
   // Remove the first item to shift the previous anchor to be before
   // `minIndexForVisible`.
   const [, ...restItems] = items;
-  ReactTestRenderer.act(() => {
+  act(() => {
     component.update(
       <VirtualizedList
         initialNumToRender={1}