Migrate SectionList-test to async jest/renderer create abstraction

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

@@ -21,8 +21,8 @@ describe('<ActivityIndicator />', () => {
     expect(ActivityIndicator.displayName).toBe('ActivityIndicator');
   });
 
-  it('should render as expected', () => {
-    ReactNativeTestTools.expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await ReactNativeTestTools.expectRendersMatchingSnapshot(
       'ActivityIndicator',
       () => <ActivityIndicator size="large" color="#0000ff" />,
       () => {

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

@@ -21,8 +21,8 @@ const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android');
 const React = require('react');
 
 describe('<DrawerLayoutAndroid />', () => {
-  it('should render as expected', () => {
-    ReactNativeTestTools.expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await ReactNativeTestTools.expectRendersMatchingSnapshot(
       'DrawerLayoutAndroid',
       () => (
         <DrawerLayoutAndroid

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

@@ -15,8 +15,8 @@ import Pressable from '../Pressable';
 import * as React from 'react';
 
 describe('<Pressable />', () => {
-  it('should render as expected', () => {
-    expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await expectRendersMatchingSnapshot(
       'Pressable',
       () => (
         <Pressable>
@@ -31,8 +31,8 @@ describe('<Pressable />', () => {
 });
 
 describe('<Pressable disabled={true} />', () => {
-  it('should be disabled when disabled is true', () => {
-    expectRendersMatchingSnapshot(
+  it('should be disabled when disabled is true', async () => {
+    await expectRendersMatchingSnapshot(
       'Pressable',
       () => (
         <Pressable disabled={true}>
@@ -47,8 +47,8 @@ describe('<Pressable disabled={true} />', () => {
 });
 
 describe('<Pressable disabled={true} accessibilityState={{}} />', () => {
-  it('should be disabled when disabled is true and accessibilityState is empty', () => {
-    expectRendersMatchingSnapshot(
+  it('should be disabled when disabled is true and accessibilityState is empty', async () => {
+    await expectRendersMatchingSnapshot(
       'Pressable',
       () => (
         <Pressable disabled={true} accessibilityState={{}}>
@@ -63,8 +63,8 @@ describe('<Pressable disabled={true} accessibilityState={{}} />', () => {
 });
 
 describe('<Pressable disabled={true} accessibilityState={{checked: true}} />', () => {
-  it('should keep accessibilityState when disabled is true', () => {
-    expectRendersMatchingSnapshot(
+  it('should keep accessibilityState when disabled is true', async () => {
+    await expectRendersMatchingSnapshot(
       'Pressable',
       () => (
         <Pressable disabled={true} accessibilityState={{checked: true}}>
@@ -79,8 +79,8 @@ describe('<Pressable disabled={true} accessibilityState={{checked: true}} />', (
 });
 
 describe('<Pressable disabled={true} accessibilityState={{disabled: false}} />', () => {
-  it('should overwrite accessibilityState with value of disabled prop', () => {
-    expectRendersMatchingSnapshot(
+  it('should overwrite accessibilityState with value of disabled prop', async () => {
+    await expectRendersMatchingSnapshot(
       'Pressable',
       () => (
         <Pressable disabled={true} accessibilityState={{disabled: false}}>

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

@@ -20,8 +20,8 @@ const ProgressBarAndroid = require('../ProgressBarAndroid.android');
 const React = require('react');
 
 describe('<ProgressBarAndroid />', () => {
-  it('should render as expected', () => {
-    ReactNativeTestTools.expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await ReactNativeTestTools.expectRendersMatchingSnapshot(
       'ProgressBarAndroid',
       () => <ProgressBarAndroid styleAttr="Horizontal" indeterminate={true} />,
       () => {

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

@@ -19,8 +19,8 @@ const View = require('../../View/View');
 const React = require('react');
 
 describe('<SafeAreaView />', () => {
-  it('should render as expected', () => {
-    ReactNativeTestTools.expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await ReactNativeTestTools.expectRendersMatchingSnapshot(
       'SafeAreaView',
       () => (
         <SafeAreaView>

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

@@ -11,20 +11,20 @@
 
 'use strict';
 
+const {create, unmount, update} = require('../../../../jest/renderer');
 const Text = require('../../../Text/Text');
 const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
 const View = require('../../View/View');
 const ScrollView = require('../ScrollView');
 const React = require('react');
-const ReactTestRenderer = require('react-test-renderer');
 
 describe('ScrollView', () => {
   beforeEach(() => {
     jest.resetModules();
   });
 
-  it('renders its children', () => {
-    ReactNativeTestTools.expectRendersMatchingSnapshot(
+  it('renders its children', async () => {
+    await ReactNativeTestTools.expectRendersMatchingSnapshot(
       'ScrollView',
       () => (
         <ScrollView>
@@ -39,39 +39,39 @@ describe('ScrollView', () => {
     );
   });
 
-  it('mocks native methods and instance methods', () => {
+  it('mocks native methods and instance methods', async () => {
     jest.mock('../ScrollView');
 
     const ref = React.createRef();
-    ReactTestRenderer.create(<ScrollView ref={ref} />);
+    await create(<ScrollView ref={ref} />);
 
     expect(ref.current?.measure).toBeInstanceOf(jest.fn().constructor);
     expect(ref.current?.scrollTo).toBeInstanceOf(jest.fn().constructor);
   });
 
   describe('ref', () => {
-    it('receives an instance or null', () => {
+    it('receives an instance or null', async () => {
       jest.dontMock('../ScrollView');
 
       const scrollViewRef = jest.fn();
-      const testRendererInstance = ReactTestRenderer.create(
+      const testRendererInstance = await create(
         <ScrollView ref={scrollViewRef} />,
       );
 
       expect(scrollViewRef).toHaveBeenLastCalledWith(
         expect.objectContaining({_nativeTag: expect.any(Number)}),
       );
 
-      testRendererInstance.unmount();
+      await unmount(testRendererInstance);
 
       expect(scrollViewRef).toHaveBeenLastCalledWith(null);
     });
 
-    it('transitions between refs', () => {
+    it('transitions between refs', async () => {
       jest.dontMock('../ScrollView');
 
       const scrollViewRefA = jest.fn();
-      const testRendererInstance = ReactTestRenderer.create(
+      const testRendererInstance = await create(
         <ScrollView ref={scrollViewRefA} />,
       );
 
@@ -80,7 +80,7 @@ describe('ScrollView', () => {
       );
 
       const scrollViewRefB = jest.fn();
-      testRendererInstance.update(<ScrollView ref={scrollViewRefB} />);
+      await update(testRendererInstance, <ScrollView ref={scrollViewRefB} />);
 
       expect(scrollViewRefA).toHaveBeenLastCalledWith(null);
       expect(scrollViewRefB).toHaveBeenLastCalledWith(
@@ -90,28 +90,28 @@ describe('ScrollView', () => {
   });
 
   describe('innerViewRef', () => {
-    it('receives an instance or null', () => {
+    it('receives an instance or null', async () => {
       jest.dontMock('../ScrollView');
 
       const innerViewRef = jest.fn();
-      const testRendererInstance = ReactTestRenderer.create(
+      const testRendererInstance = await create(
         <ScrollView innerViewRef={innerViewRef} />,
       );
 
       expect(innerViewRef).toHaveBeenLastCalledWith(
         expect.objectContaining({_nativeTag: expect.any(Number)}),
       );
 
-      testRendererInstance.unmount();
+      await unmount(testRendererInstance);
 
       expect(innerViewRef).toHaveBeenLastCalledWith(null);
     });
 
-    it('transitions between refs', () => {
+    it('transitions between refs', async () => {
       jest.dontMock('../ScrollView');
 
       const innerViewRefA = jest.fn();
-      const testRendererInstance = ReactTestRenderer.create(
+      const testRendererInstance = await create(
         <ScrollView innerViewRef={innerViewRefA} />,
       );
 
@@ -120,7 +120,11 @@ describe('ScrollView', () => {
       );
 
       const innerViewRefB = jest.fn();
-      testRendererInstance.update(<ScrollView innerViewRef={innerViewRefB} />);
+
+      await update(
+        testRendererInstance,
+        <ScrollView innerViewRef={innerViewRefB} />,
+      );
 
       expect(innerViewRefA).toHaveBeenLastCalledWith(null);
       expect(innerViewRefB).toHaveBeenLastCalledWith(
@@ -130,11 +134,11 @@ describe('ScrollView', () => {
   });
 
   describe('getInnerViewRef', () => {
-    it('returns an instance', () => {
+    it('returns an instance', async () => {
       jest.dontMock('../ScrollView');
 
       const scrollViewRef = React.createRef(null);
-      ReactTestRenderer.create(<ScrollView ref={scrollViewRef} />);
+      await create(<ScrollView ref={scrollViewRef} />);
       const innerViewRef = scrollViewRef.current.getInnerViewRef();
 
       // This is checking if the ref acts like a host component. If we had an

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

@@ -10,50 +10,48 @@
 
 'use strict';
 
+const {create} = require('../../../../jest/renderer');
 const StatusBar = require('../StatusBar');
 const React = require('react');
-const ReactTestRenderer = require('react-test-renderer');
 
 describe('StatusBar', () => {
-  it('renders the statusbar', () => {
-    const component = ReactTestRenderer.create(<StatusBar />);
+  it('renders the statusbar', async () => {
+    const component = await create(<StatusBar />);
     expect(component).not.toBeNull();
   });
-  it('renders the statusbar animated enabled', () => {
-    const component = ReactTestRenderer.create(<StatusBar animated={true} />);
+  it('renders the statusbar animated enabled', async () => {
+    const component = await create(<StatusBar animated={true} />);
     expect(component.toTree().props.animated).toBe(true);
   });
-  it('renders the statusbar with fade transition on hide', () => {
-    const component = ReactTestRenderer.create(<StatusBar hidden={true} />);
+  it('renders the statusbar with fade transition on hide', async () => {
+    const component = await create(<StatusBar hidden={true} />);
     expect(component.toTree().props.hidden).toBe(true);
   });
-  it('renders the statusbar with a background color', () => {
-    const component = ReactTestRenderer.create(
-      <StatusBar backgroundColor={'#fff'} />,
-    );
+  it('renders the statusbar with a background color', async () => {
+    const component = await create(<StatusBar backgroundColor={'#fff'} />);
     expect(component.toTree().props.backgroundColor).toBe('#fff');
     expect(component.toTree().type._defaultProps.backgroundColor.animated).toBe(
       false,
     );
   });
-  it('renders the statusbar with default barStyle', () => {
-    const component = ReactTestRenderer.create(<StatusBar />);
+  it('renders the statusbar with default barStyle', async () => {
+    const component = await create(<StatusBar />);
     StatusBar.setBarStyle('default');
     expect(component.toTree().type._defaultProps.barStyle.value).toBe(
       'default',
     );
     expect(component.toTree().type._defaultProps.barStyle.animated).toBe(false);
   });
-  it('renders the statusbar but should not be visible', () => {
-    const component = ReactTestRenderer.create(<StatusBar hidden={true} />);
+  it('renders the statusbar but should not be visible', async () => {
+    const component = await create(<StatusBar hidden={true} />);
     expect(component.toTree().props.hidden).toBe(true);
     expect(component.toTree().type._defaultProps.hidden.animated).toBe(false);
     expect(component.toTree().type._defaultProps.hidden.transition).toBe(
       'fade',
     );
   });
-  it('renders the statusbar with networkActivityIndicatorVisible true', () => {
-    const component = ReactTestRenderer.create(
+  it('renders the statusbar with networkActivityIndicatorVisible true', async () => {
+    const component = await create(
       <StatusBar networkActivityIndicatorVisible={true} />,
     );
     expect(component.toTree().props.networkActivityIndicatorVisible).toBe(true);

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

@@ -17,19 +17,19 @@ 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>,
     );
     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/TextInput/__tests__/TextInput-test.js

@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
 const ReactNative = require('../../../ReactNative/RendererProxy');
 const {
   enter,
@@ -40,7 +49,7 @@ describe('TextInput tests', () => {
     input = renderTree.root.findByType(TextInput);
   });
   it('has expected instance functions', () => {
-    expect(inputRef.current.isFocused).toBeInstanceOf(Function);  // Would have prevented S168585
+    expect(inputRef.current.isFocused).toBeInstanceOf(Function); // Would have prevented S168585
     expect(inputRef.current.clear).toBeInstanceOf(Function);
     expect(inputRef.current.focus).toBeInstanceOf(jest.fn().constructor);
     expect(inputRef.current.blur).toBeInstanceOf(jest.fn().constructor);
@@ -192,8 +201,8 @@ describe('TextInput tests', () => {
     `);
   });
 
-  it('should render as expected', () => {
-    expectRendersMatchingSnapshot(
+  it('should render as expected', async () => {
+    await expectRendersMatchingSnapshot(
       'TextInput',
       () => <TextInput />,
       () => {