Introduce update and unmount helpers to `react-native/jest/render…

…er`, use in ScrollView-test (facebook#44998)

Summary:
Pull Request resolved: facebook#44998

Add async helpers to the existing `jest/renderer` module to wrap `react-test-renderer`'s `update` and `unmount` in `act`.

Migrate one test `ScrollView-test` as a usage example and to make it compatible with incoming React 19 concurrency requirements.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D58650989

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

@@ -11,12 +11,12 @@
 
 '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(() => {
@@ -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/jest/renderer.js

@@ -24,3 +24,18 @@ export async function create(
   });
   return nullthrows(component);
 }
+
+export async function unmount(testRenderer: ReactTestRenderer) {
+  await TestRenderer.act(async () => {
+    testRenderer.unmount();
+  });
+}
+
+export async function update(
+  testRenderer: ReactTestRenderer,
+  element: React.Element<any>,
+) {
+  await TestRenderer.act(async () => {
+    testRenderer.update(element);
+  });
+}