fix: tests

Author: khushal87

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {
+  act,
   cleanup,
   fireEvent,
   render,
@@ -177,11 +178,15 @@ describe('Giphy', () => {
 
     await waitFor(() => screen.getByTestId(`${attachment.actions[2].value}-action-button`));
 
-    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
-      screen.getByTestId(`${attachment.actions[2].value}-action-button`),
-    );
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+        screen.getByTestId(`${attachment.actions[2].value}-action-button`),
+      );
+    });
 
-    user.press(screen.getByTestId(`${attachment.actions[2].value}-action-button`));
+    act(() => {
+      user.press(screen.getByTestId(`${attachment.actions[2].value}-action-button`));
+    });
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -202,11 +207,15 @@ describe('Giphy', () => {
 
     await waitFor(() => screen.getByTestId(`${attachment.actions[1].value}-action-button`));
 
-    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
-      screen.getByTestId(`${attachment.actions[1].value}-action-button`),
-    );
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+        screen.getByTestId(`${attachment.actions[1].value}-action-button`),
+      );
+    });
 
-    user.press(screen.getByTestId(`${attachment.actions[1].value}-action-button`));
+    act(() => {
+      user.press(screen.getByTestId(`${attachment.actions[1].value}-action-button`));
+    });
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -227,11 +236,15 @@ describe('Giphy', () => {
 
     await waitFor(() => screen.getByTestId(`${attachment.actions[0].value}-action-button`));
 
-    expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
-      screen.getByTestId(`${attachment.actions[0].value}-action-button`),
-    );
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toContainElement(
+        screen.getByTestId(`${attachment.actions[0].value}-action-button`),
+      );
+    });
 
-    user.press(screen.getByTestId(`${attachment.actions[0].value}-action-button`));
+    act(() => {
+      user.press(screen.getByTestId(`${attachment.actions[0].value}-action-button`));
+    });
 
     await waitFor(() => {
       expect(handleAction).toHaveBeenCalledTimes(1);
@@ -303,8 +316,13 @@ describe('Giphy', () => {
       expect(screen.queryByTestId('giphy-attachment')).toBeTruthy();
     });
 
-    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'error');
-    expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    act(() => {
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'error');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    });
   });
 
   it('should render a loading indicator in giphy image and when successful render the image', async () => {
@@ -321,13 +339,22 @@ describe('Giphy', () => {
       expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
     });
 
-    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadStart');
+    act(() => {
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadStart');
+    });
 
-    expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
+    });
 
-    fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadFinish');
+    act(() => {
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoad');
+    });
 
     waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
-    expect(screen.getByLabelText('Giphy Attachment Image')).toBeTruthy();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Giphy Attachment Image')).toBeTruthy();
+    });
   });
 });

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js

@@ -93,7 +93,7 @@ describe('AutoCompleteInput', () => {
     });
   });
 
-  it('should call the textComposer handleChange when the onChangeText is triggered', () => {
+  it('should call the textComposer handleChange when the onChangeText is triggered', async () => {
     const { textComposer } = channel.messageComposer;
 
     const spyHandleChange = jest.spyOn(textComposer, 'handleChange');
@@ -111,7 +111,7 @@ describe('AutoCompleteInput', () => {
       userEvent.type(input, 'hello');
     });
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(spyHandleChange).toHaveBeenCalled();
       expect(spyHandleChange).toHaveBeenCalledWith({
         selection: { end: 5, start: 5 },
@@ -121,7 +121,7 @@ describe('AutoCompleteInput', () => {
     });
   });
 
-  it('should style the text input with maxHeight that is set by the layout', () => {
+  it('should style the text input with maxHeight that is set by the layout', async () => {
     const channelProps = { channel };
     const props = { numberOfLines: 10 };
 
@@ -139,12 +139,12 @@ describe('AutoCompleteInput', () => {
       });
     });
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(input.props.style[1].maxHeight).toBe(1000);
     });
   });
 
-  it('should call the textComposer setSelection when the onSelectionChange is triggered', () => {
+  it('should call the textComposer setSelection when the onSelectionChange is triggered', async () => {
     const { textComposer } = channel.messageComposer;
 
     const spySetSelection = jest.spyOn(textComposer, 'setSelection');
@@ -166,7 +166,7 @@ describe('AutoCompleteInput', () => {
       });
     });
 
-    waitFor(() => {
+    await waitFor(() => {
       expect(spySetSelection).toHaveBeenCalled();
       expect(spySetSelection).toHaveBeenCalledWith({ end: 5, start: 5 });
     });

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import { Image, Text } from 'react-native';
 
-import { act } from 'react-test-renderer';
-
-import { render, waitFor } from '@testing-library/react-native';
+import { act, render, waitFor } from '@testing-library/react-native';
 import type { Channel, ChannelResponse, Event, StreamChat } from 'stream-chat';
 
 import { ChatContext, useChannelUpdated } from '../../../../../index';

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

@@ -2,9 +2,7 @@ import React from 'react';
 
 import type { SharedValue } from 'react-native-reanimated';
 
-import { act } from 'react-test-renderer';
-
-import { fireEvent, render, screen } from '@testing-library/react-native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';

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

@@ -3,8 +3,6 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { ReactTestInstance } from 'react-test-renderer';
-
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
@@ -188,8 +186,10 @@ describe('ImageGalleryFooter', () => {
       </OverlayProvider>,
     );
 
+    const { getByLabelText } = screen;
+
     await waitFor(() => {
-      user.press(screen.queryByLabelText('Share Button') as ReactTestInstance);
+      user.press(getByLabelText('Share Button'));
     });
 
     await waitFor(() => {
@@ -231,8 +231,10 @@ describe('ImageGalleryFooter', () => {
       </OverlayProvider>,
     );
 
+    const { getByLabelText } = screen;
+
     await waitFor(() => {
-      user.press(screen.queryByLabelText('Share Button') as ReactTestInstance);
+      user.press(getByLabelText('Share Button'));
     });
 
     await waitFor(() => {
@@ -280,8 +282,10 @@ describe('ImageGalleryFooter', () => {
       </OverlayProvider>,
     );
 
+    const { getByLabelText } = screen;
+
     await waitFor(() => {
-      user.press(screen.queryByLabelText('Share Button') as ReactTestInstance);
+      user.press(getByLabelText('Share Button'));
     });
 
     await waitFor(() => {

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

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { Text, View } from 'react-native';
-import { act } from 'react-test-renderer';
 
-import { fireEvent, render, screen } from '@testing-library/react-native';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';

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

@@ -3,9 +3,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { act } from 'react-test-renderer';
-
-import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
 

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

@@ -3,9 +3,7 @@ import React from 'react';
 import { State } from 'react-native-gesture-handler';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { act } from 'react-test-renderer';
-
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { act, ReactTestInstance } from 'react-test-renderer';
+import { ReactTestInstance } from 'react-test-renderer';
 
-import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx

@@ -22,9 +22,9 @@ import { Chat } from '../../../Chat/Chat';
 import { MessageList } from '../../../MessageList/MessageList';
 import { MessageTextContainer } from '../MessageTextContainer';
 
-afterEach(cleanup);
-
 describe('MessageTextContainer', () => {
+  afterEach(cleanup);
+
   it('should render message text container', async () => {
     const staticUser = generateStaticUser(1);
     const message = generateMessage({