Merge pull request #50869 from callstack-internal/fix/reassure-test-s…

…uit-errors [NOQA] fix reassure test suit errors
Expensify · Oct 17, 2024 · 4796961 · 4796961
2 parents 0d102b8 + 454b6d1
commit 4796961
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 64 deletions.
diff --git a/tests/perf-test/BaseOptionsList.perf-test.tsx b/tests/perf-test/BaseOptionsList.perf-test.tsx
@@ -1,10 +1,11 @@
 import {fireEvent} from '@testing-library/react-native';
 import type {RenderResult} from '@testing-library/react-native';
 import React, {useState} from 'react';
-import {measurePerformance} from 'reassure';
+import {measureRenders} from 'reassure';
 import BaseOptionsList from '@components/OptionsList/BaseOptionsList';
 import type {OptionData} from '@libs/ReportUtils';
 import variables from '@styles/variables';
+import wrapInAct from '../utils/wrapInActHelper';
 
 type BaseOptionsListWrapperProps = {
     /** Whether this is a multi-select list */
@@ -66,32 +67,41 @@ describe('[BaseOptionsList]', () => {
         );
     }
 
-    test('Should render 1 section and a thousand items', () => {
-        measurePerformance(<BaseOptionsListWrapper />);
+    test('Should render 1 section and a thousand items', async () => {
+        await measureRenders(<BaseOptionsListWrapper />);
     });
 
-    test('Should press a list item', () => {
+    test('Should press a list item', async () => {
         // eslint-disable-next-line @typescript-eslint/require-await
         const scenario = async (screen: RenderResult) => {
-            fireEvent.press(screen.getByText('Item 5'));
+            // use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
+            // otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
+            // eslint-disable-next-line testing-library/no-unnecessary-act
+            await wrapInAct(async () => {
+                fireEvent.press(await screen.findByText('Item 5'));
+            });
         };
 
-        measurePerformance(<BaseOptionsListWrapper />, {scenario});
+        await measureRenders(<BaseOptionsListWrapper />, {scenario});
     });
 
-    test('Should render multiple selection and select 4 items', () => {
+    test('Should render multiple selection and select 4 items', async () => {
         // eslint-disable-next-line @typescript-eslint/require-await
         const scenario = async (screen: RenderResult) => {
-            fireEvent.press(screen.getByText('Item 1'));
-            fireEvent.press(screen.getByText('Item 2'));
-            fireEvent.press(screen.getByText('Item 3'));
-            fireEvent.press(screen.getByText('Item 4'));
+            // use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
+            // otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
+            await wrapInAct(async () => {
+                fireEvent.press(await screen.findByText('Item 1'));
+                fireEvent.press(screen.getByText('Item 2'));
+                fireEvent.press(screen.getByText('Item 3'));
+                fireEvent.press(screen.getByText('Item 4'));
+            });
         };
 
-        measurePerformance(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
+        await measureRenders(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
     });
 
-    test('Should scroll and select a few items', () => {
+    test('Should scroll and select a few items', async () => {
         const eventData = {
             nativeEvent: {
                 contentOffset: {
@@ -112,14 +122,18 @@ describe('[BaseOptionsList]', () => {
 
         // eslint-disable-next-line @typescript-eslint/require-await
         const scenario = async (screen: RenderResult) => {
-            fireEvent.press(screen.getByText('Item 1'));
-            // see https://github.com/callstack/react-native-testing-library/issues/1540
-            fireEvent(screen.getByTestId('options-list'), 'onContentSizeChange', eventData.nativeEvent.contentSize.width, eventData.nativeEvent.contentSize.height);
-            fireEvent.scroll(screen.getByTestId('options-list'), eventData);
-            fireEvent.press(screen.getByText('Item 7'));
-            fireEvent.press(screen.getByText('Item 15'));
+            // use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
+            // otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
+            await wrapInAct(async () => {
+                fireEvent.press(await screen.findByText('Item 1'));
+                // see https://github.com/callstack/react-native-testing-library/issues/1540
+                fireEvent(await screen.findByTestId('options-list'), 'onContentSizeChange', eventData.nativeEvent.contentSize.width, eventData.nativeEvent.contentSize.height);
+                fireEvent.scroll(await screen.findByTestId('options-list'), eventData);
+                fireEvent.press(await screen.findByText('Item 7'));
+                fireEvent.press(await screen.findByText('Item 15'));
+            });
         };
 
-        measurePerformance(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
+        await measureRenders(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
     });
 });
diff --git a/tests/perf-test/ReportActionCompose.perf-test.tsx b/tests/perf-test/ReportActionCompose.perf-test.tsx
@@ -3,7 +3,7 @@ import type {ComponentType, EffectCallback} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import type Animated from 'react-native-reanimated';
-import {measurePerformance} from 'reassure';
+import {measureRenders} from 'reassure';
 import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
 import type {EmojiPickerRef} from '@libs/actions/EmojiPickerAction';
 import type Navigation from '@libs/Navigation/Navigation';
@@ -25,6 +25,11 @@ jest.mock('react-native-reanimated', () => ({
     useAnimatedRef: jest.fn(),
 }));
 
+jest.mock('../../src/libs/Navigation/Navigation', () => ({
+    navigate: jest.fn(),
+    getReportRHPActiveRoute: jest.fn(),
+}));
+
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
     return {
@@ -105,7 +110,7 @@ test('[ReportActionCompose] should render Composer with text input interactions'
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should scroll to hide suggestions', async () => {
@@ -118,7 +123,7 @@ test('[ReportActionCompose] should scroll to hide suggestions', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press to block suggestions', async () => {
@@ -131,7 +136,7 @@ test('[ReportActionCompose] should press to block suggestions', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press add attachemnt button', async () => {
@@ -144,7 +149,7 @@ test('[ReportActionCompose] should press add attachemnt button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press add emoji button', async () => {
@@ -157,7 +162,7 @@ test('[ReportActionCompose] should press add emoji button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press send message button', async () => {
@@ -170,7 +175,7 @@ test('[ReportActionCompose] should press send message button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] press add attachment button', async () => {
@@ -182,7 +187,7 @@ test('[ReportActionCompose] press add attachment button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press split bill button', async () => {
@@ -193,7 +198,7 @@ test('[ReportActionCompose] should press split bill button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
 
 test('[ReportActionCompose] should press assign task button', async () => {
@@ -204,5 +209,5 @@ test('[ReportActionCompose] should press assign task button', async () => {
     };
 
     await waitForBatchedUpdates();
-    await measurePerformance(<ReportActionComposeWrapper />, {scenario});
+    await measureRenders(<ReportActionComposeWrapper />, {scenario});
 });
diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx
@@ -1,12 +1,12 @@
 import type {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
-import {screen} from '@testing-library/react-native';
+import {screen, waitFor} from '@testing-library/react-native';
 import type {ComponentType} from 'react';
 import React from 'react';
 import type ReactNative from 'react-native';
 import {Dimensions, InteractionManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import type Animated from 'react-native-reanimated';
-import {measurePerformance} from 'reassure';
+import {measureRenders} from 'reassure';
 import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
 import type Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -206,7 +206,10 @@ const mockRoute = {params: {reportID: '1', reportActionID: ''}, key: 'Report', n
 test('[ReportScreen] should render ReportScreen', async () => {
     const {addListener} = createAddListenerMock();
     const scenario = async () => {
-        await screen.findByTestId(`report-screen-${report.reportID}`);
+        //  wrapp the screen with waitFor to wait for the screen to be rendered
+        await waitFor(async () => {
+            await screen.findByTestId(`report-screen-${report.reportID}`);
+        });
     };
 
     const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
@@ -228,7 +231,8 @@ test('[ReportScreen] should render ReportScreen', async () => {
         ...reportCollectionDataSet,
         ...reportActionsCollectionDataSet,
     });
-    await measurePerformance(
+
+    await measureRenders(
         <ReportScreenWrapper
             navigation={navigation}
             route={mockRoute}
@@ -240,7 +244,9 @@ test('[ReportScreen] should render ReportScreen', async () => {
 test('[ReportScreen] should render composer', async () => {
     const {addListener} = createAddListenerMock();
     const scenario = async () => {
-        await screen.findByTestId('composer');
+        await waitFor(async () => {
+            await screen.findByTestId('composer');
+        });
     };
 
     const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
@@ -263,7 +269,7 @@ test('[ReportScreen] should render composer', async () => {
         ...reportCollectionDataSet,
         ...reportActionsCollectionDataSet,
     });
-    await measurePerformance(
+    await measureRenders(
         <ReportScreenWrapper
             navigation={navigation}
             route={mockRoute}
@@ -275,7 +281,9 @@ test('[ReportScreen] should render composer', async () => {
 test('[ReportScreen] should render report list', async () => {
     const {addListener} = createAddListenerMock();
     const scenario = async () => {
-        await screen.findByTestId('report-actions-list');
+        await waitFor(async () => {
+            await screen.findByTestId('report-actions-list');
+        });
     };
 
     const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
@@ -303,7 +311,8 @@ test('[ReportScreen] should render report list', async () => {
         ...reportCollectionDataSet,
         ...reportActionsCollectionDataSet,
     });
-    await measurePerformance(
+
+    await measureRenders(
         <ReportScreenWrapper
             navigation={navigation}
             route={mockRoute}

diff --git a/tests/perf-test/SelectionList.perf-test.tsx b/tests/perf-test/SelectionList.perf-test.tsx
@@ -126,31 +126,31 @@ function SelectionListWrapper({canSelectMultiple}: SelectionListWrapperProps) {
     );
 }
 
-test('[SelectionList] should render 1 section and a thousand items', () => {
-    measureRenders(<SelectionListWrapper />);
+test('[SelectionList] should render 1 section and a thousand items', async () => {
+    await measureRenders(<SelectionListWrapper />);
 });
 
-test('[SelectionList] should press a list item', () => {
+test('[SelectionList] should press a list item', async () => {
     // eslint-disable-next-line @typescript-eslint/require-await
     const scenario = async (screen: RenderResult) => {
         fireEvent.press(screen.getByText('Item 5'));
     };
 
-    measureRenders(<SelectionListWrapper />, {scenario});
+    await measureRenders(<SelectionListWrapper />, {scenario});
 });
 
-test('[SelectionList] should render multiple selection and select 3 items', () => {
+test('[SelectionList] should render multiple selection and select 3 items', async () => {
     // eslint-disable-next-line @typescript-eslint/require-await
     const scenario = async (screen: RenderResult) => {
         fireEvent.press(screen.getByText('Item 1'));
         fireEvent.press(screen.getByText('Item 2'));
         fireEvent.press(screen.getByText('Item 3'));
     };
 
-    measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
+    await measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
 });
 
-test('[SelectionList] should scroll and select a few items', () => {
+test('[SelectionList] should scroll and select a few items', async () => {
     const eventData = {
         nativeEvent: {
             contentOffset: {
@@ -179,5 +179,5 @@ test('[SelectionList] should scroll and select a few items', () => {
         fireEvent.press(screen.getByText('Item 15'));
     };
 
-    measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
+    await measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
 });