stream-chat-react-native-core 5.6.0-beta.1 → 5.6.0-beta.3

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.6.0-beta.1"
+  "version": "5.6.0-beta.3"
 }

package/lib/typescript/components/Chat/hooks/useAppSettings.d.ts

@@ -1,3 +1,3 @@
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
-export declare const useAppSettings: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(client: StreamChat<StreamChatGenerics>, isOnline: boolean) => AppSettingsAPIResponse | null;
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+export declare const useAppSettings: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(client: StreamChat<StreamChatGenerics>, isOnline: boolean | null, enableOfflineSupport: boolean) => AppSettingsAPIResponse | null;

package/lib/typescript/components/Chat/hooks/useIsOnline.d.ts

@@ -8,5 +8,5 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
  */
 export declare const useIsOnline: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(client: StreamChat<StreamChatGenerics>, closeConnectionOnBackground?: boolean) => {
     connectionRecovering: boolean;
-    isOnline: boolean;
+    isOnline: boolean | null;
 };

package/lib/typescript/contexts/chatContext/ChatContext.d.ts

@@ -27,7 +27,7 @@ export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamCha
     connectionRecovering: boolean;
     enableOfflineSupport: boolean;
     ImageComponent: React.ComponentType<ImageProps>;
-    isOnline: boolean;
+    isOnline: boolean | null;
     mutedUsers: Mute<StreamChatGenerics>[];
     /**
      * @param newChannel Channel to set as active.

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -178,6 +178,7 @@ export declare type Theme = {
             rightContainer: ViewStyle;
         };
         grid: {
+            container: ViewStyle;
             contentContainer: ViewStyle;
             gridAvatar: ImageStyle;
             gridAvatarWrapper: ViewStyle;

package/lib/typescript/store/QuickSqliteClient.d.ts

@@ -2,6 +2,8 @@ import type { PreparedQueries } from './types';
 /**
  * QuickSqliteClient takes care of any direct interaction with sqlite.
  * This way usage react-native-quick-sqlite package is scoped to a single class/file.
+ *
+ * TODO: Drop the support for v4 of react-native-quick-sqlite in the next major release.
  */
 export declare class QuickSqliteClient {
     static dbVersion: number;
@@ -9,10 +11,11 @@ export declare class QuickSqliteClient {
     static dbLocation: string;
     static getDbVersion: () => number;
     static setDbVersion: (version: number) => number;
+    static isQuickSqliteV4: boolean;
     static openDB: () => void;
     static closeDB: () => void;
     static executeSqlBatch: (queries: PreparedQueries[]) => void;
-    static executeSql: (query: string, params?: string[] | undefined) => any[];
+    static executeSql: (query: string, params?: string[] | undefined) => any;
     static dropTables: () => void;
     static deleteDatabase: () => boolean;
     static initializeDatabase: () => void;

package/lib/typescript/store/QuickSqliteClient_v4.d.ts

@@ -0,0 +1,12 @@
+import type { PreparedQueries } from './types';
+export declare class QuickSqliteClient_v4 {
+    static dbName: string;
+    static dbLocation: string;
+    static openDB: () => void;
+    static closeDB: () => void;
+    static executeSqlBatch: (queries: PreparedQueries[]) => void;
+    static executeSql: (query: string, params?: string[] | undefined) => any;
+    static deleteDatabase: () => boolean;
+    static updateUserPragmaVersion: (version: number) => void;
+    static getUserPragmaVersion: () => number;
+}

package/lib/typescript/store/apis/getAppSettings.d.ts

@@ -0,0 +1,4 @@
+import type { AppSettingsAPIResponse } from 'stream-chat';
+export declare const getAppSettings: ({ currentUserId, }: {
+    currentUserId: string;
+}) => AppSettingsAPIResponse;

package/lib/typescript/store/apis/getPendingTasks.d.ts

@@ -1,3 +1,3 @@
 export declare const getPendingTasks: (conditions?: {
     messageId?: string;
-}) => import("../types").PendingTask[];
+}) => any;

package/lib/typescript/store/apis/index.d.ts

@@ -4,6 +4,7 @@ export * from './deleteMessage';
 export * from './deleteMessagesForChannel';
 export * from './deleteReactions';
 export * from './getAllChannelIds';
+export * from './getAppSettings';
 export * from './getChannelMessages';
 export * from './getChannels';
 export * from './getChannelsForFilterSort';
@@ -12,6 +13,7 @@ export * from './getMembers';
 export * from './getReads';
 export * from './updateMessage';
 export * from './updateReaction';
+export * from './upsertAppSettings';
 export * from './upsertChannelData';
 export * from './upsertChannels';
 export * from './upsertCidsForQuery';

package/lib/typescript/store/apis/upsertAppSettings.d.ts

@@ -0,0 +1,6 @@
+import type { AppSettingsAPIResponse } from 'stream-chat';
+export declare const upsertAppSettings: ({ appSettings, currentUserId, flush, }: {
+    appSettings: AppSettingsAPIResponse;
+    currentUserId: string;
+    flush?: boolean | undefined;
+}) => void;

package/lib/typescript/store/schema.d.ts

@@ -114,6 +114,7 @@ export declare type Schema = {
         updatedAt?: string;
     };
     userSyncStatus: {
+        appSettings: string;
         lastSyncedAt: string;
         userId: string;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.6.0-beta.1",
+  "version": "5.6.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -79,7 +79,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "7.0.0"
+    "stream-chat": "8.1.2"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"

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/Channel/Channel.tsx

@@ -74,7 +74,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault } from '../../native';
+import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -455,7 +455,8 @@ const ChannelWithContext = <
     handleRetry,
     handleThreadReply,
     hasCommands = true,
-    hasFilePicker = true,
+    // If pickDocument isn't available, default to hiding the file picker
+    hasFilePicker = pickDocument !== null,
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,
@@ -1192,6 +1193,13 @@ const ChannelWithContext = <
     text,
     ...extraFields
   }: Partial<StreamMessage<StreamChatGenerics>>) => {
+    // Exclude following properties from message.user within message preview,
+    // since they could be long arrays and have no meaning as sender of message.
+    // Storing such large value within user's table may cause sqlite queries to crash.
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { channel_mutes, devices, mutes, ...messageUser } = client.user;
+
     const preview = {
       __html: text,
       attachments,
@@ -1209,7 +1217,7 @@ const ChannelWithContext = <
       type: 'regular',
       user: {
         id: client.userID,
-        ...client.user,
+        ...messageUser,
       },
       ...extraFields,
     } as unknown as MessageResponse<StreamChatGenerics>;

package/src/components/Chat/Chat.tsx

@@ -196,7 +196,7 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
-  const appSettings = useAppSettings(client, isOnline);
+  const appSettings = useAppSettings(client, isOnline, enableOfflineSupport);
 
   const chatContext = useCreateChatContext({
     appSettings,

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/Chat/hooks/useAppSettings.ts

@@ -1,23 +1,38 @@
 import { useEffect, useRef, useState } from 'react';
 
 import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
 
+import * as dbApi from '../../../store/apis';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useAppSettings = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   client: StreamChat<StreamChatGenerics>,
-  isOnline: boolean,
+  isOnline: boolean | null,
+  enableOfflineSupport: boolean,
 ): AppSettingsAPIResponse | null => {
   const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
   const isMounted = useRef(true);
 
   useEffect(() => {
-    async function getAppSettings() {
+    async function enforeAppSettings() {
+      if (!client.userID) return;
+
+      if (!isOnline && enableOfflineSupport) {
+        const appSettings = dbApi.getAppSettings({ currentUserId: client.userID });
+        setAppSettings(appSettings);
+        return;
+      }
+
       try {
         const appSettings = await client.getAppSettings();
         if (isMounted.current) {
           setAppSettings(appSettings);
+          enableOfflineSupport &&
+            dbApi.upsertAppSettings({
+              appSettings,
+              currentUserId: client.userID as string,
+            });
         }
       } catch (error: unknown) {
         if (error instanceof Error) {
@@ -26,9 +41,7 @@ export const useAppSettings = <
       }
     }
 
-    if (isOnline && client.userID) {
-      getAppSettings();
-    }
+    enforeAppSettings();
 
     return () => {
       isMounted.current = false;

package/src/components/Chat/hooks/useIsOnline.ts

@@ -22,7 +22,7 @@ export const useIsOnline = <
   client: StreamChat<StreamChatGenerics>,
   closeConnectionOnBackground = true,
 ) => {
-  const [isOnline, setIsOnline] = useState(true);
+  const [isOnline, setIsOnline] = useState<boolean | null>(null);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
   const isMounted = useIsMountedRef();
   const clientExists = !!client;

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/components/ImageGallery/components/ImageGrid.tsx

@@ -137,7 +137,7 @@ export const ImageGrid = <
     theme: {
       colors: { white },
       imageGallery: {
-        grid: { contentContainer },
+        grid: { container, contentContainer },
       },
     },
   } = useTheme();
@@ -165,6 +165,7 @@ export const ImageGrid = <
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}
+      style={container}
     />
   );
 };

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -13,8 +13,8 @@ const styles = StyleSheet.create({
   },
   handle: {
     alignItems: 'center',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
     flexDirection: 'row',
     height: 40,
     justifyContent: 'center',

package/src/contexts/chatContext/ChatContext.tsx

@@ -36,7 +36,7 @@ export type ChatContextValue<
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
   ImageComponent: React.ComponentType<ImageProps>;
-  isOnline: boolean;
+  isOnline: boolean | null;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**
    * @param newChannel Channel to set as active.

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -575,6 +575,13 @@ export const MessageInputProvider = <
   };
 
   const pickFile = async () => {
+    if (pickDocument === null) {
+      console.log(
+        'The file picker is not installed. Check our Getting Started documentation to install it.',
+      );
+      return;
+    }
+
     if (numberOfUploads >= value.maxNumberOfFiles) {
       Alert.alert('Maximum number of files reached');
       return;

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);
+    });
   });
 });