fix(test): error logs in test runs

Author: vishalnarkhede

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -265,7 +265,10 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-container').length).toBe(1);
+    });
 
     fireEvent(getByA11yLabel('Gallery Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
@@ -278,7 +281,11 @@ describe('Gallery', () => {
     });
 
     const component = await getComponent([image1]);
-    const { getByA11yLabel, getByAccessibilityHint } = render(component);
+    const { getByA11yLabel, getByAccessibilityHint, queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-container').length).toBe(1);
+    });
 
     fireEvent(getByA11yLabel('Gallery Image'), 'onLoadStart');
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -274,8 +274,8 @@ describe('Giphy', () => {
     });
   });
 
-  it('should render a error indicator in giphy image', () => {
-    const { getByA11yLabel, getByAccessibilityHint } = render(
+  it('should render a error indicator in giphy image', async () => {
+    const { getByA11yLabel, getByAccessibilityHint, queryByTestId } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel}>
@@ -284,12 +284,15 @@ describe('Giphy', () => {
         </Chat>
       </OverlayProvider>,
     );
+    await waitFor(() => {
+      expect(queryByTestId('giphy-attachment')).toBeTruthy();
+    });
 
     fireEvent(getByA11yLabel('Giphy Attachment Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
-  it('should render a loading indicator in giphy image and when successful render the image', () => {
+  it('should render a loading indicator in giphy image and when successful render the image', async () => {
     const { getByA11yLabel, getByAccessibilityHint } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
@@ -299,8 +302,9 @@ describe('Giphy', () => {
         </Chat>
       </OverlayProvider>,
     );
-
-    expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+    await waitFor(() => {
+      expect(getByAccessibilityHint('image-loading')).toBeTruthy();
+    });
 
     fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadStart');
 

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -21,6 +21,7 @@ describe('useAppSettings', () => {
           userID: 'some-user-id',
         } as unknown as StreamChat,
         isOnline,
+        false,
       );
 
       return <Text>{JSON.stringify(appSettings)}</Text>;

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

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { act } from 'react-test-renderer';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import {
   ImageGalleryContext,
@@ -45,7 +45,7 @@ const getComponent = (props: Partial<ImageGalleryContextValue>) => (
 );
 
 describe('ImageGallery', () => {
-  it('render image gallery component', () => {
+  it('render image gallery component', async () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
         messages: [
@@ -59,11 +59,14 @@ describe('ImageGallery', () => {
         ] as unknown as MessageType<DefaultStreamChatGenerics>[],
       }),
     );
-    expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
-    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
+      expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is available', () => {
+  it('handle handleLoad function when video item present and payload duration is available', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -86,10 +89,13 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:10');
+
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:10');
+    });
   });
 
-  it('handle handleLoad function when video item present and payload duration is undefined', () => {
+  it('handle handleLoad function when video item present and payload duration is undefined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -109,10 +115,12 @@ describe('ImageGallery', () => {
     });
 
     const videoDurationComponent = getByA11yLabel('Video Duration');
-    expect(videoDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(videoDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is well defined', () => {
+  it('handle handleProgress function when video item present and payload is well defined', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -143,10 +151,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:03');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:03');
+    });
   });
 
-  it('handle handleProgress function when video item present and payload is not defined', () => {
+  it('handle handleProgress function when video item present and payload is not defined', async () => {
     const { getByA11yLabel } = render(
       getComponent({
         messages: [
@@ -171,10 +181,12 @@ describe('ImageGallery', () => {
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
 
-    expect(progressDurationComponent.children[0]).toBe('00:00');
+    await waitFor(() => {
+      expect(progressDurationComponent.children[0]).toBe('00:00');
+    });
   });
 
-  it('handle handleEnd function when video item present', () => {
+  it('handle handleEnd function when video item present', async () => {
     const attachment = generateVideoAttachment({ type: 'video' });
     const message = generateMessage({
       attachments: [attachment],
@@ -198,7 +210,9 @@ describe('ImageGallery', () => {
     });
 
     const progressDurationComponent = getByA11yLabel('Progress Duration');
-    expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
-    expect(progressDurationComponent.children[0]).toBe('00:10');
+    await waitFor(() => {
+      expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
+      expect(progressDurationComponent.children[0]).toBe('00:10');
+    });
   });
 });

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

@@ -97,10 +97,13 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
-    expect(queryAllByText('Video Control element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+      expect(queryAllByText('Video Control element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery footer component with custom component footer Grid Icon and Share Icon component', async () => {
@@ -147,8 +150,11 @@ describe('ImageGalleryFooter', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Share Icon element')).toHaveLength(1);
-    expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Share Icon element')).toHaveLength(1);
+      expect(queryAllByText('Grid Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the share button onPress Handler', async () => {

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

@@ -90,9 +90,12 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Left element')).toHaveLength(1);
-    expect(queryAllByText('Right element')).toHaveLength(1);
-    expect(queryAllByText('Center element')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(queryAllByText('Left element')).toHaveLength(1);
+      expect(queryAllByText('Right element')).toHaveLength(1);
+      expect(queryAllByText('Center element')).toHaveLength(1);
+    });
   });
 
   it('render image gallery header component with custom Close Icon component', async () => {
@@ -132,7 +135,9 @@ describe('ImageGalleryHeader', () => {
         </ImageGalleryContext.Provider>
       </OverlayProvider>,
     );
-    expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    await waitFor(() => {
+      expect(queryAllByText('Close Icon element')).toHaveLength(1);
+    });
   });
 
   it('should trigger the hideOverlay function on button onPress', async () => {

package/src/contexts/messageInputContext/__tests__/MessageInputContext.test.tsx

@@ -4,6 +4,7 @@ import type { TextInput } from 'react-native';
 
 import { act, renderHook } from '@testing-library/react-hooks';
 
+import { waitFor } from '@testing-library/react-native';
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
 
 import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
@@ -167,7 +168,7 @@ describe('MessageInputContext', () => {
     expect(result.current.text).toBe('/');
   });
 
-  it('openMentionPicker works', () => {
+  it('openMentionPicker works', async () => {
     const { result } = renderHook(() => useMessageInputContext(), {
       initialProps: {
         editing: true,
@@ -180,7 +181,9 @@ describe('MessageInputContext', () => {
       result.current.openMentionsPicker();
     });
 
-    expect(result.current.text).toBe('@');
+    await waitFor(() => {
+      expect(result.current.text).toBe('@');
+    });
   });
 
   it('openAttachmentPicker works', async () => {
@@ -203,6 +206,8 @@ describe('MessageInputContext', () => {
       result.current.openAttachmentPicker();
     });
 
-    expect(await result.current.pickFile()).toBe(undefined);
+    await waitFor(async () => {
+      expect(await result.current.pickFile()).toBe(undefined);
+    });
   });
 });

package/src/contexts/messageInputContext/__tests__/uploadFile.test.tsx

@@ -3,6 +3,8 @@ import { act } from 'react-test-renderer';
 
 import { renderHook } from '@testing-library/react-hooks';
 
+import { waitFor } from '@testing-library/react-native';
+
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import {
@@ -31,7 +33,7 @@ const Wrapper = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultS
 );
 
 describe("MessageInputContext's uploadFile", () => {
-  it('uploadFile works', () => {
+  it('uploadFile works', async () => {
     const doDocUploadRequestMock = jest.fn().mockResolvedValue({
       file: {
         url: '',
@@ -46,16 +48,20 @@ describe("MessageInputContext's uploadFile", () => {
       wrapper: Wrapper,
     });
 
-    expect(result.current.fileUploads).toHaveLength(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads).toHaveLength(0);
+    });
 
     act(() => {
       result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
     });
 
-    expect(doDocUploadRequestMock).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(doDocUploadRequestMock).toHaveBeenCalled();
+    });
   });
 
-  it('uploadFile catch block gets executed', () => {
+  it('uploadFile catch block gets executed', async () => {
     const doDocUploadRequestMock = jest.fn().mockResolvedValue(new Error('This is an error'));
     const { result } = renderHook(() => useMessageInputContext(), {
       initialProps: {
@@ -65,12 +71,16 @@ describe("MessageInputContext's uploadFile", () => {
       wrapper: Wrapper,
     });
 
-    expect(result.current.fileUploads).toHaveLength(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads).toHaveLength(0);
+    });
 
     act(() => {
       result.current.uploadFile({ newFile: generateFileUploadPreview({ state: '' }) });
     });
 
-    expect(result.current.fileUploads.length).toBe(0);
+    await waitFor(() => {
+      expect(result.current.fileUploads.length).toBe(0);
+    });
   });
 });