Make jest/renderer create helper async in prep for concurrent (#44995)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44995

Use our existing abstraction around `react-test-renderer`'s `create` and make it asynchronous, to allow for wrapping `create` in `act` in a subsequent diff, and using the async API per guidance in https://react.dev/reference/react/act?#await-act-async-actfn .

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D58647827

fbshipit-source-id: f81cf382892ef5ba14b452bd32980c98bd7ef03b

packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js

@@ -17,8 +17,8 @@ const InputAccessoryView = require('../InputAccessoryView').default;
 const React = require('react');
 
 describe('InputAccessoryView', () => {
-  it('should render as <RCTInputAccessoryView> when mocked', () => {
-    const instance = render.create(
+  it('should render as <RCTInputAccessoryView> when mocked', async () => {
+    const instance = await render.create(
       <InputAccessoryView nativeID="1">
         <View />
       </InputAccessoryView>,
@@ -26,10 +26,10 @@ describe('InputAccessoryView', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should render as <RCTInputAccessoryView> when not mocked', () => {
+  it('should render as <RCTInputAccessoryView> when not mocked', async () => {
     jest.dontMock('../InputAccessoryView');
 
-    const instance = render.create(
+    const instance = await render.create(
       <InputAccessoryView nativeID="1">
         <View />
       </InputAccessoryView>,

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js

@@ -18,8 +18,8 @@ import * as React from 'react';
 const render = require('../../../../jest/renderer');
 
 describe('TouchableHighlight', () => {
-  it('renders correctly', () => {
-    const instance = render.create(
+  it('renders correctly', async () => {
+    const instance = await render.create(
       <TouchableHighlight style={{}}>
         <Text>Touchable</Text>
       </TouchableHighlight>,
@@ -34,9 +34,9 @@ describe('TouchableHighlight', () => {
 });
 
 describe('TouchableHighlight with disabled state', () => {
-  it('should be disabled when disabled is true', () => {
+  it('should be disabled when disabled is true', async () => {
     expect(
-      render.create(
+      await render.create(
         <TouchableHighlight disabled={true}>
           <View />
         </TouchableHighlight>,
@@ -44,9 +44,9 @@ describe('TouchableHighlight with disabled state', () => {
     ).toMatchSnapshot();
   });
 
-  it('should be disabled when disabled is true and accessibilityState is empty', () => {
+  it('should be disabled when disabled is true and accessibilityState is empty', async () => {
     expect(
-      render.create(
+      await render.create(
         <TouchableHighlight disabled={true} accessibilityState={{}}>
           <View />
         </TouchableHighlight>,
@@ -54,9 +54,9 @@ describe('TouchableHighlight with disabled state', () => {
     ).toMatchSnapshot();
   });
 
-  it('should keep accessibilityState when disabled is true', () => {
+  it('should keep accessibilityState when disabled is true', async () => {
     expect(
-      render.create(
+      await render.create(
         <TouchableHighlight
           disabled={true}
           accessibilityState={{checked: true}}>
@@ -66,9 +66,9 @@ describe('TouchableHighlight with disabled state', () => {
     ).toMatchSnapshot();
   });
 
-  it('should overwrite accessibilityState with value of disabled prop', () => {
+  it('should overwrite accessibilityState with value of disabled prop', async () => {
     expect(
-      render.create(
+      await render.create(
         <TouchableHighlight
           disabled={true}
           accessibilityState={{disabled: false}}>
@@ -78,9 +78,9 @@ describe('TouchableHighlight with disabled state', () => {
     ).toMatchSnapshot();
   });
 
-  it('should disable button when accessibilityState is disabled', () => {
+  it('should disable button when accessibilityState is disabled', async () => {
     expect(
-      render.create(
+      await render.create(
         <TouchableHighlight accessibilityState={{disabled: true}}>
           <View />
         </TouchableHighlight>,

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js

@@ -14,13 +14,12 @@ import Text from '../../../Text/Text';
 import View from '../../View/View';
 import TouchableNativeFeedback from '../TouchableNativeFeedback';
 import * as React from 'react';
-import ReactTestRenderer from 'react-test-renderer';
 
 const render = require('../../../../jest/renderer');
 
 describe('TouchableWithoutFeedback', () => {
-  it('renders correctly', () => {
-    const instance = render.create(
+  it('renders correctly', async () => {
+    const instance = await render.create(
       <TouchableNativeFeedback style={{}}>
         <Text>Touchable</Text>
       </TouchableNativeFeedback>,
@@ -37,8 +36,8 @@ describe('TouchableWithoutFeedback', () => {
 });
 
 describe('<TouchableNativeFeedback />', () => {
-  it('should render as expected', () => {
-    const instance = ReactTestRenderer.create(
+  it('should render as expected', async () => {
+    const instance = await render.create(
       <TouchableNativeFeedback>
         <View />
       </TouchableNativeFeedback>,
@@ -49,9 +48,9 @@ describe('<TouchableNativeFeedback />', () => {
 });
 
 describe('<TouchableNativeFeedback disabled={true}>', () => {
-  it('should be disabled when disabled is true', () => {
+  it('should be disabled when disabled is true', async () => {
     expect(
-      ReactTestRenderer.create(
+      await render.create(
         <TouchableNativeFeedback disabled={true}>
           <View />
         </TouchableNativeFeedback>,
@@ -61,9 +60,9 @@ describe('<TouchableNativeFeedback disabled={true}>', () => {
 });
 
 describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', () => {
-  it('should be disabled when disabled is true and accessibilityState is empty', () => {
+  it('should be disabled when disabled is true and accessibilityState is empty', async () => {
     expect(
-      ReactTestRenderer.create(
+      await render.create(
         <TouchableNativeFeedback disabled={true} accessibilityState={{}}>
           <View />
         </TouchableNativeFeedback>,
@@ -73,9 +72,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', ()
 });
 
 describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}}>', () => {
-  it('should keep accessibilityState when disabled is true', () => {
+  it('should keep accessibilityState when disabled is true', async () => {
     expect(
-      ReactTestRenderer.create(
+      await render.create(
         <TouchableNativeFeedback
           disabled={true}
           accessibilityState={{checked: true}}>
@@ -87,9 +86,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked:
 });
 
 describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:false}}>', () => {
-  it('should overwrite accessibilityState with value of disabled prop', () => {
+  it('should overwrite accessibilityState with value of disabled prop', async () => {
     expect(
-      ReactTestRenderer.create(
+      await render.create(
         <TouchableNativeFeedback
           disabled={true}
           accessibilityState={{disabled: false}}>
@@ -101,9 +100,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled
 });
 
 describe('<TouchableNativeFeedback disabled={false} accessibilityState={{disabled:true}}>', () => {
-  it('should overwrite accessibilityState with value of disabled prop', () => {
+  it('should overwrite accessibilityState with value of disabled prop', async () => {
     expect(
-      ReactTestRenderer.create(
+      await render.create(
         <TouchableNativeFeedback
           disabled={false}
           accessibilityState={{disabled: true}}>

packages/react-native/Libraries/Components/View/__tests__/View-test.js

@@ -18,8 +18,8 @@ jest.unmock('../View');
 jest.unmock('../ViewNativeComponent');
 
 describe('View', () => {
-  it('default render', () => {
-    const instance = render.create(<View />);
+  it('default render', async () => {
+    const instance = await render.create(<View />);
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`<RCTView />`);
   });
@@ -30,14 +30,14 @@ describe('View', () => {
 });
 
 describe('View compat with web', () => {
-  it('renders core props', () => {
+  it('renders core props', async () => {
     const props = {
       id: 'id',
       tabIndex: 0,
       testID: 'testID',
     };
 
-    const instance = render.create(<View {...props} />);
+    const instance = await render.create(<View {...props} />);
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTView
@@ -48,7 +48,7 @@ describe('View compat with web', () => {
     `);
   });
 
-  it('renders "aria-*" props', () => {
+  it('renders "aria-*" props', async () => {
     const props = {
       'aria-activedescendant': 'activedescendant',
       'aria-atomic': true,
@@ -98,7 +98,7 @@ describe('View compat with web', () => {
       'aria-valuetext': '3',
     };
 
-    const instance = render.create(<View {...props} />);
+    const instance = await render.create(<View {...props} />);
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTView
@@ -165,7 +165,7 @@ describe('View compat with web', () => {
     `);
   });
 
-  it('renders styles', () => {
+  it('renders styles', async () => {
     const style = {
       display: 'flex',
       flex: 1,
@@ -174,7 +174,7 @@ describe('View compat with web', () => {
       pointerEvents: 'none',
     };
 
-    const instance = render.create(<View style={style} />);
+    const instance = await render.create(<View style={style} />);
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTView

packages/react-native/Libraries/Image/__tests__/Image-test.js

@@ -23,15 +23,19 @@ const ImageInjection = require('../ImageInjection');
 const React = require('react');
 
 describe('Image', () => {
-  it('should render as <Image> when mocked', () => {
-    const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
+  it('should render as <Image> when mocked', async () => {
+    const instance = await render.create(
+      <Image source={{uri: 'foo-bar.jpg'}} />,
+    );
     expect(instance).toMatchSnapshot();
   });
 
-  it('should render as <RCTImageView> when not mocked', () => {
+  it('should render as <RCTImageView> when not mocked', async () => {
     jest.dontMock('../Image');
 
-    const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
+    const instance = await render.create(
+      <Image source={{uri: 'foo-bar.jpg'}} />,
+    );
     expect(instance).toMatchSnapshot();
   });
 

packages/react-native/Libraries/Image/__tests__/ImageBackground-test.js

@@ -16,8 +16,8 @@ const ImageBackground = require('../ImageBackground');
 const React = require('react');
 
 describe('ImageBackground', () => {
-  it('should render as <ImageBackground> when mocked', () => {
-    const instance = render.create(
+  it('should render as <ImageBackground> when mocked', async () => {
+    const instance = await render.create(
       <ImageBackground
         style={{width: 150, height: 50}}
         source={{uri: 'foo-bar.jpg'}}
@@ -26,10 +26,10 @@ describe('ImageBackground', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should render as <RCTImageView> when not mocked', () => {
+  it('should render as <RCTImageView> when not mocked', async () => {
     jest.dontMock('../ImageBackground');
 
-    const instance = render.create(
+    const instance = await render.create(
       <ImageBackground
         style={{width: 150, height: 50}}
         source={{uri: 'foo-bar.jpg'}}
@@ -38,8 +38,8 @@ describe('ImageBackground', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should be set importantForAccessibility in <View> and <Image>', () => {
-    const instance = render.create(
+  it('should be set importantForAccessibility in <View> and <Image>', async () => {
+    const instance = await render.create(
       <ImageBackground
         importantForAccessibility={'no'}
         style={{width: 150, height: 50}}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxButton-test.js

@@ -23,8 +23,8 @@ jest.mock('../../../Components/Touchable/TouchableWithoutFeedback', () => ({
 }));
 
 describe('LogBoxButton', () => {
-  it('should render only a view without an onPress', () => {
-    const output = render.create(
+  it('should render only a view without an onPress', async () => {
+    const output = await render.create(
       <LogBoxButton
         backgroundColor={{
           default: 'black',
@@ -37,8 +37,8 @@ describe('LogBoxButton', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render TouchableWithoutFeedback and pass through props', () => {
-    const output = render.create(
+  it('should render TouchableWithoutFeedback and pass through props', async () => {
+    const output = await render.create(
       <LogBoxButton
         backgroundColor={{
           default: 'black',

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js

@@ -68,8 +68,8 @@ const logs = [
 ];
 
 describe('LogBoxContainer', () => {
-  it('should render null with no logs', () => {
-    const output = render.create(
+  it('should render null with no logs', async () => {
+    const output = await render.create(
       <LogBoxInspector
         onDismiss={() => {}}
         onMinimize={() => {}}
@@ -82,8 +82,8 @@ describe('LogBoxContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render warning with selectedIndex 0', () => {
-    const output = render.create(
+  it('should render warning with selectedIndex 0', async () => {
+    const output = await render.create(
       <LogBoxInspector
         onDismiss={() => {}}
         onMinimize={() => {}}
@@ -96,8 +96,8 @@ describe('LogBoxContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render fatal with selectedIndex 2', () => {
-    const output = render.create(
+  it('should render fatal with selectedIndex 2', async () => {
+    const output = await render.create(
       <LogBoxInspector
         onDismiss={() => {}}
         onMinimize={() => {}}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorCodeFrame-test.js

@@ -35,14 +35,16 @@ jest.mock('../LogBoxInspectorSection', () => ({
 }));
 
 describe('LogBoxInspectorCodeFrame', () => {
-  it('should render null for no code frame', () => {
-    const output = render.create(<LogBoxInspectorCodeFrame codeFrame={null} />);
+  it('should render null for no code frame', async () => {
+    const output = await render.create(
+      <LogBoxInspectorCodeFrame codeFrame={null} />,
+    );
 
     expect(output).toMatchSnapshot();
   });
 
-  it('should render a code frame', () => {
-    const output = render.create(
+  it('should render a code frame', async () => {
+    const output = await render.create(
       <LogBoxInspectorCodeFrame
         codeFrame={{
           fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
@@ -59,8 +61,8 @@ describe('LogBoxInspectorCodeFrame', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render a code frame without a location', () => {
-    const output = render.create(
+  it('should render a code frame without a location', async () => {
+    const output = await render.create(
       <LogBoxInspectorCodeFrame
         codeFrame={{
           fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js

@@ -23,8 +23,8 @@ jest.mock('../LogBoxInspectorFooterButton', () => ({
 }));
 
 describe('LogBoxInspectorFooter', () => {
-  it('should render two buttons for warning', () => {
-    const output = render.create(
+  it('should render two buttons for warning', async () => {
+    const output = await render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -35,8 +35,8 @@ describe('LogBoxInspectorFooter', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render two buttons for error', () => {
-    const output = render.create(
+  it('should render two buttons for error', async () => {
+    const output = await render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -47,8 +47,8 @@ describe('LogBoxInspectorFooter', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render two buttons for fatal', () => {
-    const output = render.create(
+  it('should render two buttons for fatal', async () => {
+    const output = await render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -59,8 +59,8 @@ describe('LogBoxInspectorFooter', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render no buttons and a message for syntax error', () => {
-    const output = render.create(
+  it('should render no buttons and a message for syntax error', async () => {
+    const output = await render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js

@@ -23,8 +23,8 @@ jest.mock('../LogBoxInspectorHeaderButton', () => ({
 }));
 
 describe('LogBoxInspectorHeader', () => {
-  it('should render no buttons for one total', () => {
-    const output = render.create(
+  it('should render no buttons for one total', async () => {
+    const output = await render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}
@@ -36,8 +36,8 @@ describe('LogBoxInspectorHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render both buttons for two total', () => {
-    const output = render.create(
+  it('should render both buttons for two total', async () => {
+    const output = await render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={1}
@@ -49,8 +49,8 @@ describe('LogBoxInspectorHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render two buttons for three or more total', () => {
-    const output = render.create(
+  it('should render two buttons for three or more total', async () => {
+    const output = await render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}
@@ -62,8 +62,8 @@ describe('LogBoxInspectorHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render syntax error header', () => {
-    const output = render.create(
+  it('should render syntax error header', async () => {
+    const output = await render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorMessageHeader-test.js

@@ -24,8 +24,8 @@ jest.mock('../LogBoxMessage', () => ({
 }));
 
 describe('LogBoxInspectorMessageHeader', () => {
-  it('should render error', () => {
-    const output = render.create(
+  it('should render error', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Error"
         level="error"
@@ -41,8 +41,8 @@ describe('LogBoxInspectorMessageHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render fatal', () => {
-    const output = render.create(
+  it('should render fatal', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Fatal Error"
         level="fatal"
@@ -58,8 +58,8 @@ describe('LogBoxInspectorMessageHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render syntax error', () => {
-    const output = render.create(
+  it('should render syntax error', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Syntax Error"
         level="syntax"
@@ -75,8 +75,8 @@ describe('LogBoxInspectorMessageHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should not render See More button for short content', () => {
-    const output = render.create(
+  it('should not render See More button for short content', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Warning"
         level="warn"
@@ -92,8 +92,8 @@ describe('LogBoxInspectorMessageHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should not render "See More" if expanded', () => {
-    const output = render.create(
+  it('should not render "See More" if expanded', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Warning"
         level="warn"
@@ -106,8 +106,8 @@ describe('LogBoxInspectorMessageHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render "See More" if collapsed', () => {
-    const output = render.create(
+  it('should render "See More" if collapsed', async () => {
+    const output = await render.create(
       <LogBoxInspectorMessageHeader
         title="Warning"
         level="warn"

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorReactFrames-test.js

@@ -29,8 +29,8 @@ jest.mock('../LogBoxInspectorSection', () => ({
 }));
 
 describe('LogBoxInspectorReactFrames', () => {
-  it('should render null for no componentStack frames', () => {
-    const output = render.create(
+  it('should render null for no componentStack frames', async () => {
+    const output = await render.create(
       <LogBoxInspectorReactFrames
         log={
           new LogBoxLog({
@@ -51,8 +51,8 @@ describe('LogBoxInspectorReactFrames', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render componentStack frames without full path pressable', () => {
-    const output = render.create(
+  it('should render componentStack frames without full path pressable', async () => {
+    const output = await render.create(
       <LogBoxInspectorReactFrames
         log={
           new LogBoxLog({
@@ -82,8 +82,8 @@ describe('LogBoxInspectorReactFrames', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render componentStack frames with full path pressable', () => {
-    const output = render.create(
+  it('should render componentStack frames with full path pressable', async () => {
+    const output = await render.create(
       <LogBoxInspectorReactFrames
         log={
           new LogBoxLog({
@@ -113,8 +113,8 @@ describe('LogBoxInspectorReactFrames', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render componentStack frames with parent folder of index.js', () => {
-    const output = render.create(
+  it('should render componentStack frames with parent folder of index.js', async () => {
+    const output = await render.create(
       <LogBoxInspectorReactFrames
         log={
           new LogBoxLog({
@@ -144,8 +144,8 @@ describe('LogBoxInspectorReactFrames', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render componentStack frames with more than 3 stacks', () => {
-    const output = render.create(
+  it('should render componentStack frames with more than 3 stacks', async () => {
+    const output = await render.create(
       <LogBoxInspectorReactFrames
         log={
           new LogBoxLog({

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorSection-test.js

@@ -16,8 +16,8 @@ const LogBoxInspectorSection = require('../LogBoxInspectorSection').default;
 const React = require('react');
 
 describe('LogBoxInspectorSection', () => {
-  it('should render with only heading', () => {
-    const output = render.create(
+  it('should render with only heading', async () => {
+    const output = await render.create(
       <LogBoxInspectorSection heading="Test Section">
         <Text>Child</Text>
       </LogBoxInspectorSection>,
@@ -26,8 +26,8 @@ describe('LogBoxInspectorSection', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render with action on the right', () => {
-    const output = render.create(
+  it('should render with action on the right', async () => {
+    const output = await render.create(
       <LogBoxInspectorSection
         heading="Test Section"
         action={<Text>Right</Text>}>

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorSourceMapStatus-test.js

@@ -24,24 +24,24 @@ jest.mock('../LogBoxButton', () => ({
 }));
 
 describe('LogBoxInspectorSourceMapStatus', () => {
-  it('should render for failed', () => {
-    const output = render.create(
+  it('should render for failed', async () => {
+    const output = await render.create(
       <LogBoxInspectorSourceMapStatus onPress={() => {}} status="FAILED" />,
     );
 
     expect(output).toMatchSnapshot();
   });
 
-  it('should render for pending', () => {
-    const output = render.create(
+  it('should render for pending', async () => {
+    const output = await render.create(
       <LogBoxInspectorSourceMapStatus onPress={() => {}} status="PENDING" />,
     );
 
     expect(output).toMatchSnapshot();
   });
 
-  it('should render null for complete', () => {
-    const output = render.create(
+  it('should render null for complete', async () => {
+    const output = await render.create(
       <LogBoxInspectorSourceMapStatus onPress={() => {}} status="COMPLETE" />,
     );
 

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrame-test.js

@@ -24,8 +24,8 @@ jest.mock('../LogBoxButton', () => ({
 }));
 
 describe('LogBoxInspectorStackFrame', () => {
-  it('should render stack frame', () => {
-    const output = render.create(
+  it('should render stack frame', async () => {
+    const output = await render.create(
       <LogBoxInspectorStackFrame
         onPress={() => {}}
         frame={{
@@ -41,8 +41,8 @@ describe('LogBoxInspectorStackFrame', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render stack frame without press feedback', () => {
-    const output = render.create(
+  it('should render stack frame without press feedback', async () => {
+    const output = await render.create(
       <LogBoxInspectorStackFrame
         frame={{
           column: 1,
@@ -58,8 +58,8 @@ describe('LogBoxInspectorStackFrame', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render collapsed stack frame with dimmed text', () => {
-    const output = render.create(
+  it('should render collapsed stack frame with dimmed text', async () => {
+    const output = await render.create(
       <LogBoxInspectorStackFrame
         onPress={() => {}}
         frame={{

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js

@@ -51,8 +51,8 @@ const createCollapsedFrames = (collapsedOptions: Array<?boolean>) => {
 };
 
 describe('LogBoxInspectorStackFrames', () => {
-  it('should render stack frames with 1 frame collapsed', () => {
-    const output = render.create(
+  it('should render stack frames with 1 frame collapsed', async () => {
+    const output = await render.create(
       <LogBoxInspectorStackFrames
         onRetry={() => {}}
         log={createLogWithFrames([false, true])}
@@ -62,8 +62,8 @@ describe('LogBoxInspectorStackFrames', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render null for empty stack frames', () => {
-    const output = render.create(
+  it('should render null for empty stack frames', async () => {
+    const output = await render.create(
       <LogBoxInspectorStackFrames
         onRetry={() => {}}
         log={createLogWithFrames([])}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxMessage-test.js

@@ -16,8 +16,8 @@ const LogBoxMessage = require('../LogBoxMessage').default;
 const React = require('react');
 
 describe('LogBoxMessage', () => {
-  it('should render message', () => {
-    const output = render.create(
+  it('should render message', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -30,8 +30,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render message truncated to 6 chars', () => {
-    const output = render.create(
+  it('should render message truncated to 6 chars', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={5}
@@ -45,9 +45,9 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the whole message when maxLength = message length', () => {
+  it('should render the whole message when maxLength = message length', async () => {
     const message = 'Some kind of message';
-    const output = render.create(
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -61,8 +61,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render message with substitution', () => {
-    const output = render.create(
+  it('should render message with substitution', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -75,8 +75,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render message with substitution, truncating the first word 3 letters in', () => {
-    const output = render.create(
+  it('should render message with substitution, truncating the first word 3 letters in', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={3}
@@ -90,8 +90,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render message with substitution, truncating the second word 6 letters in', () => {
-    const output = render.create(
+  it('should render message with substitution, truncating the second word 6 letters in', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={13}
@@ -105,8 +105,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render message with substitution, truncating the third word 2 letters in', () => {
-    const output = render.create(
+  it('should render message with substitution, truncating the third word 2 letters in', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={22}
@@ -120,9 +120,9 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the whole message with substitutions when maxLength = message length', () => {
+  it('should render the whole message with substitutions when maxLength = message length', async () => {
     const message = 'normal substitution normal';
-    const output = render.create(
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -136,8 +136,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render a plaintext message with no substitutions', () => {
-    const output = render.create(
+  it('should render a plaintext message with no substitutions', async () => {
+    const output = await render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -151,8 +151,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render a plaintext message and clean the content', () => {
-    const output = render.create(
+  it('should render a plaintext message and clean the content', async () => {
+    const output = await render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -166,8 +166,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should strip "TransformError " without breaking substitution', () => {
-    const output = render.create(
+  it('Should strip "TransformError " without breaking substitution', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -180,8 +180,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should strip "Warning: " without breaking substitution', () => {
-    const output = render.create(
+  it('Should strip "Warning: " without breaking substitution', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -194,8 +194,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should strip "Warning: Warning: " without breaking substitution', () => {
-    const output = render.create(
+  it('Should strip "Warning: Warning: " without breaking substitution', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -208,8 +208,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should make links tappable', () => {
-    const output = render.create(
+  it('Should make links tappable', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -222,8 +222,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should handle multiple links', () => {
-    const output = render.create(
+  it('Should handle multiple links', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -236,8 +236,8 @@ describe('LogBoxMessage', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('Should handle truncated links', () => {
-    const output = render.create(
+  it('Should handle truncated links', async () => {
+    const output = await render.create(
       <LogBoxMessage
         style={{}}
         maxLength={35}

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxNotification-test.js

@@ -48,8 +48,8 @@ const log = new LogBoxLog({
 });
 
 describe('LogBoxNotification', () => {
-  it('should render log', () => {
-    const output = render.create(
+  it('should render log', async () => {
+    const output = await render.create(
       <LogBoxNotification
         log={log}
         totalLogCount={1}

packages/react-native/Libraries/LogBox/__tests__/LogBoxInspectorContainer-test.js

@@ -26,16 +26,16 @@ jest.mock('../UI/LogBoxNotification', () => ({
 }));
 
 describe('LogBoxNotificationContainer', () => {
-  it('should render null with no logs', () => {
-    const output = render.create(
+  it('should render null with no logs', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer selectedLogIndex={-1} logs={[]} />,
     );
 
     expect(output).toMatchSnapshot();
   });
 
-  it('should render null with no selected log and disabled', () => {
-    const output = render.create(
+  it('should render null with no selected log and disabled', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         isDisabled
         selectedLogIndex={-1}
@@ -58,8 +58,8 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the latest warning notification', () => {
-    const output = render.create(
+  it('should render the latest warning notification', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         selectedLogIndex={-1}
         logs={[
@@ -92,8 +92,8 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the latest error notification', () => {
-    const output = render.create(
+  it('should render the latest error notification', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         selectedLogIndex={-1}
         logs={[
@@ -126,8 +126,8 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render both an error and warning notification', () => {
-    const output = render.create(
+  it('should render both an error and warning notification', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         selectedLogIndex={-1}
         logs={[
@@ -160,8 +160,8 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render selected fatal error even when disabled', () => {
-    const output = render.create(
+  it('should render selected fatal error even when disabled', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         isDisabled
         selectedLogIndex={0}
@@ -184,8 +184,8 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render selected syntax error even when disabled', () => {
-    const output = render.create(
+  it('should render selected syntax error even when disabled', async () => {
+    const output = await render.create(
       <LogBoxNotificationContainer
         isDisabled
         selectedLogIndex={0}

packages/react-native/Libraries/LogBox/__tests__/LogBoxNotificationContainer-test.js

@@ -26,8 +26,8 @@ jest.mock('../UI/LogBoxInspector', () => ({
 }));
 
 describe('LogBoxNotificationContainer', () => {
-  it('should render inspector with logs, even when disabled', () => {
-    const output = render.create(
+  it('should render inspector with logs, even when disabled', async () => {
+    const output = await render.create(
       <LogBoxInspectorContainer
         isDisabled
         selectedLogIndex={-1}

packages/react-native/Libraries/Modal/__tests__/Modal-test.js

@@ -17,8 +17,8 @@ const Modal = require('../Modal');
 const React = require('react');
 
 describe('Modal', () => {
-  it('should render as <Modal> when mocked', () => {
-    const instance = render.create(
+  it('should render as <Modal> when mocked', async () => {
+    const instance = await render.create(
       <Modal>
         <View />
       </Modal>,
@@ -26,8 +26,8 @@ describe('Modal', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should not render <Modal> when mocked with visible=false', () => {
-    const instance = render.create(
+  it('should not render <Modal> when mocked with visible=false', async () => {
+    const instance = await render.create(
       <Modal visible={false}>
         <View testID="child" />
       </Modal>,
@@ -35,10 +35,10 @@ describe('Modal', () => {
     expect(instance.toJSON()).toBeNull();
   });
 
-  it('should render as <RCTModalHostView> when not mocked', () => {
+  it('should render as <RCTModalHostView> when not mocked', async () => {
     jest.dontMock('../Modal');
 
-    const instance = render.create(
+    const instance = await render.create(
       <Modal>
         <View />
       </Modal>,
@@ -46,10 +46,10 @@ describe('Modal', () => {
     expect(instance).toMatchSnapshot();
   });
 
-  it('should not render <RCTModalHostView> when not mocked with visible=false', () => {
+  it('should not render <RCTModalHostView> when not mocked with visible=false', async () => {
     jest.dontMock('../Modal');
 
-    const instance = render.create(
+    const instance = await render.create(
       <Modal visible={false}>
         <View />
       </Modal>,

packages/react-native/Libraries/Text/__tests__/Text-test.js

@@ -24,8 +24,8 @@ function omitRef(json) {
 }
 
 describe('Text', () => {
-  it('default render', () => {
-    const instance = render.create(<Text />);
+  it('default render', async () => {
+    const instance = await render.create(<Text />);
 
     expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(`
       <RCTText
@@ -44,14 +44,14 @@ describe('Text', () => {
 });
 
 describe('Text compat with web', () => {
-  it('renders core props', () => {
+  it('renders core props', async () => {
     const props = {
       id: 'id',
       tabIndex: 0,
       testID: 'testID',
     };
 
-    const instance = render.create(<Text {...props} />);
+    const instance = await render.create(<Text {...props} />);
 
     expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(`
       <RCTText
@@ -67,7 +67,7 @@ describe('Text compat with web', () => {
     `);
   });
 
-  it('renders "aria-*" props', () => {
+  it('renders "aria-*" props', async () => {
     const props = {
       'aria-activedescendant': 'activedescendant',
       'aria-atomic': true,
@@ -117,7 +117,7 @@ describe('Text compat with web', () => {
       'aria-valuetext': '3',
     };
 
-    const instance = render.create(<Text {...props} />);
+    const instance = await render.create(<Text {...props} />);
 
     expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(`
       <RCTText
@@ -181,7 +181,7 @@ describe('Text compat with web', () => {
     `);
   });
 
-  it('renders styles', () => {
+  it('renders styles', async () => {
     const style = {
       display: 'flex',
       flex: 1,
@@ -191,7 +191,7 @@ describe('Text compat with web', () => {
       verticalAlign: 'middle',
     };
 
-    const instance = render.create(<Text style={style} />);
+    const instance = await render.create(<Text style={style} />);
 
     expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(`
       <RCTText

packages/react-native/jest/renderer.js

@@ -9,9 +9,13 @@
  * @oncall react_native
  */
 
+import type {ReactTestRenderer} from 'react-test-renderer';
+
 import * as React from 'react';
 import TestRenderer from 'react-test-renderer';
 
-export const create = (Component: React.Element<any>): any => {
+export async function create(
+  Component: React.Element<any>,
+): Promise<ReactTestRenderer> {
   return TestRenderer.create(Component);
-};
+}