feat: update testing library to v9 and fix broken tests after update to 0.67

Author: santhoshvai

package/native-package/yarn.lock

@@ -96,8 +96,9 @@
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
-    "@testing-library/jest-native": "4.0.1",
-    "@testing-library/react-native": "7.2.0",
+    "@testing-library/jest-native": "4.0.4",
+    "@testing-library/react-native": "9.0.0",
+    "@testing-library/react-hooks": "7.0.2",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",

package/package.json

@@ -177,7 +177,11 @@ export const ImageGalleryHeader = <
             centerElement({ hideOverlay, photo })
           ) : (
             <View style={[styles.centerContainer, centerContainer]}>
-              <Text style={[styles.userName, { color: black }, usernameText]}>
+              <Text
+                accessibilityLabel={photo?.user?.name || t('Unknown User')}
+                accessible={true}
+                style={[styles.userName, { color: black }, usernameText]}
+              >
                 {photo?.user?.name || t('Unknown User')}
               </Text>
               {date && <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>}

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,28 +1,38 @@
 import React from 'react';
-
 import type Animated from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
+
+import { renderHook } from '@testing-library/react-hooks';
 
 import { render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+
 import { ImageGalleryHeader } from '../ImageGalleryHeader';
 
 it('doesnt fail if fromNow is not available on first render', () => {
   try {
-    const { getAllByText } = render(
+    let sharedValueOpacity: Animated.SharedValue<number>;
+    let sharedValueVisible: Animated.SharedValue<number>;
+    renderHook(() => {
+      sharedValueOpacity = useSharedValue(1);
+      sharedValueVisible = useSharedValue(1);
+    });
+    const { getAllByA11yLabel } = render(
       <ThemeProvider>
         <ImageGalleryHeader
-          opacity={1 as unknown as Animated.SharedValue<number>}
+          // @ts-ignore
+          opacity={sharedValueOpacity}
           photo={{
             id: 'id',
             uri: 'file:///bogus/uri/to/photo.jpg',
           }}
-          visible={1 as unknown as Animated.SharedValue<number>}
+          // @ts-ignore
+          visible={sharedValueVisible}
         />
       </ThemeProvider>,
     );
-
-    expect(getAllByText('Unknown User')).toBeTruthy();
+    expect(getAllByA11yLabel('Unknown User')).toBeTruthy();
   } catch (error: unknown) {
     if (error instanceof Error) {
       throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);

package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -47,6 +47,7 @@ exports[`MessageReplies should render message replies 1`] = `
   </View>
   <View
     accessible={true}
+    collapsable={false}
     focusable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageReplies.test.js.snap

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { render, waitFor, within } from '@testing-library/react-native';
 
 // @ts-ignore
 import { ASTNode, SingleASTNode } from 'simple-markdown';
 
 import { ListOutput, ListOutputProps } from './renderText';
+import type { ReactTestInstance } from 'react-test-renderer';
 
 describe('list', () => {
   const createNode = ({
@@ -31,40 +32,45 @@ describe('list', () => {
     </>
   );
 
-  it('renders numbered items', async () => {
+  it('renders numbered items', () => {
     const node = createNode({ amount: 3, ordered: true, start: 1 });
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + node.start}. `; // 1. , 2. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('renders numbered items from a start index', async () => {
+  it('renders numbered items from a start index', () => {
     const node = createNode({ amount: 3, ordered: true, start: 3 });
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + node.start}. `; // 3. , 4. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('does not throw an error if an item is empty', async () => {
+  it('does not throw an error if an item is empty', () => {
     const node = {
       ...createNode({ amount: 3, ordered: true }),
       items: ['Not empty', null, 'Not empty'],
     };
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + 1}. `; // 1. , 2. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('renders an unordered list', async () => {
+  it('renders an unordered list', () => {
     const node = createNode({ amount: 3 });
-    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance) => {
+      await waitFor(() => expect(within(instance).getByText('\u2022 ')).toBeTruthy());
+    });
   });
 });

package/src/components/Message/MessageSimple/utils/renderText.test.tsx

@@ -20,6 +20,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 >
   <View
     accessible={true}
+    collapsable={false}
     hitSlop={
       Object {
         "bottom": 15,
@@ -100,6 +101,7 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
 >
   <View
     accessible={true}
+    collapsable={false}
     hitSlop={
       Object {
         "bottom": 15,