Merge pull request Expensify#63823 from software-mansion-labs/war-in/update-testing-library

[No QA] [Pre RN 0.79] Bump `@testing-library/react-native`

Author: mountiny

jest/setupAfterEnv.ts

@@ -1,3 +1,3 @@
-import '@testing-library/react-native/extend-expect';
+import '@testing-library/react-native';
 
 jest.useRealTimers();

package-lock.json

@@ -254,7 +254,7 @@
     "@storybook/react-webpack5": "^8.6.9",
     "@storybook/theming": "^8.6.9",
     "@svgr/webpack": "^6.0.0",
-    "@testing-library/react-native": "12.8.1",
+    "@testing-library/react-native": "13.2.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/base-64": "^1.0.2",
     "@types/canvas-size": "^1.2.2",

package.json

@@ -94,9 +94,11 @@ describe('SidebarLinks', () => {
 
     test('[SidebarLinks] should click on list item', async () => {
         const scenario = async () => {
-            await wrapInAct(async () => {
+            await waitFor(async () => {
                 const button = await screen.findByTestId('1');
-                fireEvent.press(button);
+                await wrapInAct(() => {
+                    fireEvent.press(button);
+                });
             });
         };
 

tests/perf-test/SidebarLinks.perf-test.tsx

@@ -83,12 +83,8 @@ function signInAndGetApp(reportName = '', participantAccountIDs?: number[]): Pro
             const hintText = translateLocal('loginForm.loginForm');
             const loginForm = screen.queryAllByLabelText(hintText);
             expect(loginForm).toHaveLength(1);
-
-            await act(async () => {
-                await TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A');
-            });
-            return waitForBatchedUpdatesWithAct();
         })
+        .then(async () => TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A'))
         .then(() => {
             subscribeToUserEvents();
             return waitForBatchedUpdates();
@@ -212,7 +208,7 @@ describe('Tests for group chat name', () => {
             })
             .then(waitForBatchedUpdates)
             .then(async () => {
-                await act(() => transitionEndCB?.());
+                act(() => transitionEndCB?.());
                 const name = 'A, B, C, D';
                 const displayNameTexts = screen.queryAllByLabelText(name);
                 return waitFor(() => expect(displayNameTexts).toHaveLength(1));
@@ -248,7 +244,7 @@ describe('Tests for group chat name', () => {
             .then(() => navigateToSidebarOption(0))
             .then(waitForBatchedUpdates)
             .then(async () => {
-                await act(() => transitionEndCB?.());
+                act(() => transitionEndCB?.());
                 const name = 'A, B, C, D, E...';
                 const displayNameTexts = screen.queryAllByLabelText(name);
                 return waitFor(() => expect(displayNameTexts).toHaveLength(1));
@@ -275,7 +271,7 @@ describe('Tests for group chat name', () => {
             })
             .then(waitForBatchedUpdates)
             .then(async () => {
-                await act(() => transitionEndCB?.());
+                act(() => transitionEndCB?.());
                 const name = 'Test chat';
                 const displayNameTexts = screen.queryAllByLabelText(name);
                 return waitFor(() => expect(displayNameTexts).toHaveLength(1));
@@ -302,7 +298,7 @@ describe('Tests for group chat name', () => {
             })
             .then(waitForBatchedUpdates)
             .then(async () => {
-                await act(() => transitionEndCB?.());
+                act(() => transitionEndCB?.());
                 const name = "Let's talk";
                 const displayNameTexts = screen.queryAllByLabelText(name);
                 return waitFor(() => expect(displayNameTexts).toHaveLength(1));

tests/ui/GroupChatNameTests.tsx

@@ -149,7 +149,7 @@ describe('SidebarLinksData', () => {
             expect(getOptionRows()).toHaveLength(0);
 
             // When the SidebarLinks are rendered again with the current active report ID.
-            LHNTestUtils.getDefaultRenderedSidebarLinks(report.reportID);
+            await LHNTestUtils.getDefaultRenderedSidebarLinks(report.reportID);
 
             await waitForBatchedUpdatesWithAct();
             // Then the active report should be displayed as part of LHN,

tests/ui/LHNItemsPresence.tsx

@@ -47,7 +47,7 @@ describe('NewChatPage', () => {
         await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, fakePersonalDetails);
         render(<NewChatPage />, {wrapper});
         await waitForBatchedUpdatesWithAct();
-        await act(() => {
+        act(() => {
             (NativeNavigation as NativeNavigationMock).triggerTransitionEnd();
         });
         const spy = jest.spyOn(SectionList.prototype, 'scrollToLocation');
@@ -72,7 +72,7 @@ describe('NewChatPage', () => {
             // And NewChatPage is opened
             render(<NewChatPage />, {wrapper});
             await waitForBatchedUpdatesWithAct();
-            await act(() => {
+            act(() => {
                 (NativeNavigation as NativeNavigationMock).triggerTransitionEnd();
             });
 

tests/ui/NewChatPageTest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import * as NativeNavigation from '@react-navigation/native';
-import {act, fireEvent, render, screen, within} from '@testing-library/react-native';
+import {act, fireEvent, render, screen, waitFor, within} from '@testing-library/react-native';
 import {addSeconds, format, subMinutes} from 'date-fns';
 import React from 'react';
 import Onyx from 'react-native-onyx';
@@ -91,7 +91,7 @@ function getReportActions(reportID?: string) {
 async function navigateToSidebarOption(reportID: string): Promise<void> {
     const optionRow = screen.getByTestId(reportID);
     fireEvent(optionRow, 'press');
-    await act(() => {
+    await waitFor(() => {
         (NativeNavigation as NativeNavigationMock).triggerTransitionEnd();
     });
     // ReportScreen relies on the onLayout event to receive updates from onyx.
@@ -335,7 +335,7 @@ describe('Pagination', () => {
 
         const link = screen.getByText('Link 1');
         fireEvent(link, 'press');
-        await act(() => {
+        await waitFor(() => {
             (NativeNavigation as NativeNavigationMock).triggerTransitionEnd();
         });
         // Due to https://github.com/facebook/react-native/commit/3485e9ed871886b3e7408f90d623da5c018da493

tests/ui/PaginationTest.tsx

@@ -135,12 +135,8 @@ function signInAndGetAppWithUnreadChat(): Promise<void> {
             const hintText = translateLocal('loginForm.loginForm');
             const loginForm = screen.queryAllByLabelText(hintText);
             expect(loginForm).toHaveLength(1);
-
-            await act(async () => {
-                await TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A');
-            });
-            return waitForBatchedUpdatesWithAct();
         })
+        .then(async () => TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A'))
         .then(() => {
             subscribeToUserEvents();
             return waitForBatchedUpdates();
@@ -220,7 +216,7 @@ describe('Unread Indicators', () => {
                 return navigateToSidebarOption(0);
             })
             .then(async () => {
-                await act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
+                act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
 
                 // That the report actions are visible along with the created action
                 const welcomeMessageHintText = translateLocal('accessibilityHints.chatWelcomeMessage');
@@ -244,8 +240,8 @@ describe('Unread Indicators', () => {
         signInAndGetAppWithUnreadChat()
             // Navigate to the unread chat from the sidebar
             .then(() => navigateToSidebarOption(0))
-            .then(async () => {
-                await act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
+            .then(() => {
+                act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
                 // Verify the unread indicator is present
                 const newMessageLineIndicatorHintText = translateLocal('accessibilityHints.newMessageLineIndicator');
                 const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
@@ -366,8 +362,8 @@ describe('Unread Indicators', () => {
                 return navigateToSidebarOption(0);
             })
             .then(waitForBatchedUpdates)
-            .then(async () => {
-                await act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
+            .then(() => {
+                act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
                 // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread
                 const hintText = translateLocal('accessibilityHints.chatUserDisplayNames');
                 const displayNameTexts = screen.queryAllByLabelText(hintText, {includeHiddenElements: true});
@@ -444,7 +440,7 @@ describe('Unread Indicators', () => {
                 return navigateToSidebarOption(0);
             })
             .then(async () => {
-                await act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
+                act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd());
                 const newMessageLineIndicatorHintText = translateLocal('accessibilityHints.newMessageLineIndicator');
                 const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
                 expect(unreadIndicator).toHaveLength(1);