stream-chat-react-native-core 9.0.1 → 9.0.2-beta.2

package/src/__tests__/offline-support/{optimistic-update.js → optimistic-update.tsx}

@@ -3,9 +3,18 @@ import { View } from 'react-native';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
+import type {
+  Channel as ChannelLLC,
+  ChannelAPIResponse,
+  ChannelMemberResponse,
+  LocalMessage,
+  ReactionResponse,
+  StreamChat,
+  UserResponse,
+} from 'stream-chat';
 import { v4 as uuidv4 } from 'uuid';
 
-import { Channel } from '../../components/Channel/Channel';
+import { Channel as ChannelRaw } from '../../components/Channel/Channel';
 import { Chat } from '../../components/Chat/Chat';
 import { MessageInputContext, MessagesContext } from '../../contexts';
 import { deleteMessageApi } from '../../mock-builders/api/deleteMessage';
@@ -28,27 +37,64 @@ import { SqliteClient } from '../../store/SqliteClient';
 import { BetterSqlite } from '../../test-utils/BetterSqlite';
 import { MessageStatusTypes } from '../../utils/utils';
 
+// `initialValue` is not part of Channel's props today, but these legacy tests pass it to
+// mimic a pre-populated input. Keep the runtime behavior unchanged and widen the prop type
+// at the component boundary so TS stops complaining.
+const Channel = ChannelRaw as unknown as React.ComponentType<
+  React.ComponentProps<typeof ChannelRaw> & { initialValue?: string }
+>;
+
+// Tests reach into internal / private StreamChat + LLC Channel APIs (sync manager, legacy
+// `wsConnection`, `_deleteMessage`, `_sendReaction`, `_sendMessage`). Helpers narrow at the
+// call sites without sprinkling `any` everywhere.
+type TestPendingTask = { id: number; type: string; payload: unknown };
+type TestSyncManager = {
+  invokeSyncStatusListeners: (recovered: boolean) => Promise<void>;
+};
+// Intentionally not intersected with the real `StreamChat['offlineDb']` — the
+// real `syncManager` member is a class with `invokeSyncStatusListeners` marked
+// private, which conflicts with the test-only accessor. Kept as a standalone
+// test shim shape.
+type TestOfflineDb = {
+  addPendingTask: (task: {
+    channelId: string | undefined;
+    channelType: string;
+    messageId: string;
+    payload: unknown;
+    type: string;
+  }) => Promise<void>;
+  deletePendingTask: (params: { id: number }) => Promise<void>;
+  getPendingTasks: () => Promise<TestPendingTask[]>;
+  syncManager: TestSyncManager;
+};
+const getOfflineDb = (client: StreamChat): TestOfflineDb =>
+  client.offlineDb as unknown as TestOfflineDb;
+
 test('Workaround to allow exporting tests', () => expect(true).toBe(true));
 
 export const OptimisticUpdates = () => {
   describe('Optimistic Updates', () => {
-    let chatClient;
+    let chatClient: StreamChat;
 
-    const getRandomInt = (lower, upper) => Math.floor(lower + Math.random() * (upper - lower + 1));
+    const getRandomInt = (lower: number, upper: number) =>
+      Math.floor(lower + Math.random() * (upper - lower + 1));
     const createChannel = () => {
       const allUsers = Array(20).fill(1).map(generateUser);
-      const allMessages = [];
-      const allMembers = [];
-      const allReactions = [];
-      const allReads = [];
+      const allMessages: LocalMessage[] = [];
+      const allMembers: ChannelMemberResponse[] = [];
+      const allReactions: ReactionResponse[] = [];
+      const allReads: Array<{
+        last_read: Date;
+        unread_messages: number;
+        user: ReturnType<typeof generateUser> | undefined;
+      }> = [];
       const id = uuidv4();
       const cid = `messaging:${id}`;
       const begin = getRandomInt(0, allUsers.length - 2); // begin shouldn't be the end of users.length
       const end = getRandomInt(begin + 1, allUsers.length - 1);
       const usersForMembers = allUsers.slice(begin, end);
-      const members = usersForMembers.map((user) =>
+      const members = usersForMembers.map((user: UserResponse) =>
         generateMember({
-          cid,
           user,
         }),
       );
@@ -62,7 +108,7 @@ export const OptimisticUpdates = () => {
           const end = getRandomInt(begin + 1, usersForMembers.length - 1);
 
           const usersForReactions = usersForMembers.slice(begin, end);
-          const reactions = usersForReactions.map((user) =>
+          const reactions = usersForReactions.map((user: UserResponse) =>
             generateReaction({
               message_id: id,
               user,
@@ -74,11 +120,11 @@ export const OptimisticUpdates = () => {
             id,
             latest_reactions: reactions,
             user,
-            userId: user.id,
+            user_id: user.id,
           });
         });
 
-      const reads = members.map((member) => ({
+      const reads = members.map((member: ChannelMemberResponse) => ({
         last_read: new Date(new Date().setDate(new Date().getDate() - getRandomInt(0, 20))),
         unread_messages: getRandomInt(0, messages.length),
         user: member.user,
@@ -88,12 +134,17 @@ export const OptimisticUpdates = () => {
       allMembers.push(...members);
       allReads.push(...reads);
 
+      // `cid` is not part of `GeneratedChannelResponseCustomValues`, but tests rely on reading it
+      // back as a top-level field on the generated channel response — keep the runtime shape and
+      // widen the input type.
       return generateChannelResponse({
         cid,
         id,
         members,
         messages,
-      });
+      } as unknown as Parameters<typeof generateChannelResponse>[0]) as ReturnType<
+        typeof generateChannelResponse
+      > & { cid: string; id: string };
     };
 
     beforeEach(async () => {
@@ -112,10 +163,13 @@ export const OptimisticUpdates = () => {
       await SqliteClient.initializeDatabase();
       await BetterSqlite.openDB();
       await upsertChannels({
-        channels: [channelResponse],
+        channels: [channelResponse] as unknown as ChannelAPIResponse[],
         isLatestMessagesSet: true,
       });
-      chatClient.wsConnection = { isHealthy: true, onlineStatusChanged: jest.fn() };
+      chatClient.wsConnection = {
+        isHealthy: true,
+        onlineStatusChanged: jest.fn(),
+      } as unknown as StreamChat['wsConnection'];
     });
 
     afterEach(() => {
@@ -125,11 +179,19 @@ export const OptimisticUpdates = () => {
       jest.clearAllMocks();
     });
 
-    let channel;
+    let channel: ChannelLLC;
     // This component is used for performing effects in a component that consumes ChannelContext,
     // i.e. making use of the callbacks & values provided by the Channel component.
     // the effect is called every time channelContext changes
-    const CallbackEffectWithContext = ({ callback, children, context }) => {
+    const CallbackEffectWithContext = <T,>({
+      callback,
+      children,
+      context,
+    }: {
+      callback: (ctx: T) => Promise<void> | void;
+      children: React.ReactNode;
+      context: React.Context<T>;
+    }) => {
       const ctx = useContext(context);
       const [ready, setReady] = useState(false);
       useEffect(() => {
@@ -145,7 +207,7 @@ export const OptimisticUpdates = () => {
         return null;
       }
 
-      return children;
+      return <>{children}</>;
     };
 
     describe('delete message', () => {
@@ -175,7 +237,7 @@ export const OptimisticUpdates = () => {
         await waitFor(async () => {
           const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
-          const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
+          const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}');
           expect(pendingTaskType).toBe('delete-message');
           expect(pendingTaskPayload[0]).toBe(message.id);
         });
@@ -235,7 +297,7 @@ export const OptimisticUpdates = () => {
         await waitFor(async () => {
           const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
-          const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
+          const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}');
           expect(pendingTaskType).toBe('send-reaction');
           expect(pendingTaskPayload[0]).toBe(targetMessage.id);
         });
@@ -276,7 +338,7 @@ export const OptimisticUpdates = () => {
           localMessage: newMessage,
           message: newMessage,
           options: {},
-        });
+        } as unknown as Awaited<ReturnType<typeof channel.messageComposer.compose>>);
 
         render(
           <Chat client={chatClient} enableOfflineSupport>
@@ -301,7 +363,7 @@ export const OptimisticUpdates = () => {
         await waitFor(async () => {
           const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
-          const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
+          const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}');
           expect(pendingTaskType).toBe('send-message');
           expect(pendingTaskPayload[0].id).toEqual(newMessage.id);
           expect(pendingTaskPayload[0].text).toEqual(newMessage.text);
@@ -319,7 +381,7 @@ export const OptimisticUpdates = () => {
               <CallbackEffectWithContext
                 callback={async ({ sendMessage }) => {
                   useMockedApis(chatClient, [sendMessageApi(newMessage)]);
-                  await sendMessage({ customMessageData: newMessage });
+                  await sendMessage();
                 }}
                 context={MessageInputContext}
               >
@@ -365,7 +427,7 @@ export const OptimisticUpdates = () => {
         await waitFor(async () => {
           const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const pendingTaskType = pendingTasksRows?.[0]?.type;
-          const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}');
+          const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}');
           expect(pendingTaskType).toBe('delete-reaction');
           expect(pendingTaskPayload[0]).toBe(targetMessage.id);
         });
@@ -408,22 +470,24 @@ export const OptimisticUpdates = () => {
           <Chat client={chatClient} enableOfflineSupport>
             <Channel
               channel={channel}
-              doUpdateMessageRequest={async (_channelId, localMessage, options) => {
-                await chatClient.offlineDb.addPendingTask({
-                  channelId: channel.id,
-                  channelType: channel.type,
-                  messageId: message.id,
-                  payload: [localMessage, undefined, options],
-                  type: 'update-message',
-                });
-                return {
-                  message: {
-                    ...localMessage,
-                    message_text_updated_at: new Date(),
-                    updated_at: new Date(),
-                  },
-                };
-              }}
+              doUpdateMessageRequest={
+                (async (_channelId: string, localMessage: LocalMessage, options: unknown) => {
+                  await getOfflineDb(chatClient).addPendingTask({
+                    channelId: channel.id,
+                    channelType: channel.type,
+                    messageId: message.id,
+                    payload: [localMessage, undefined, options],
+                    type: 'update-message',
+                  });
+                  return {
+                    message: {
+                      ...localMessage,
+                      message_text_updated_at: new Date(),
+                      updated_at: new Date(),
+                    },
+                  };
+                }) as unknown as React.ComponentProps<typeof Channel>['doUpdateMessageRequest']
+              }
             >
               <CallbackEffectWithContext
                 callback={async ({ editMessage }) => {
@@ -452,12 +516,12 @@ export const OptimisticUpdates = () => {
           const dbMessages = await BetterSqlite.selectFromTable('messages');
           const dbMessage = dbMessages.find((row) => row.id === message.id);
 
-          expect(updatedMessage.text).toBe(editedText);
-          expect(updatedMessage.message_text_updated_at).toBeTruthy();
+          expect(updatedMessage!.text).toBe(editedText);
+          expect(updatedMessage!.message_text_updated_at).toBeTruthy();
           expect(pendingTasksRows).toHaveLength(1);
           expect(pendingTasksRows[0].type).toBe('update-message');
-          expect(dbMessage.text).toBe(editedText);
-          expect(dbMessage.messageTextUpdatedAt).toBeTruthy();
+          expect(dbMessage!.text).toBe(editedText);
+          expect(dbMessage!.messageTextUpdatedAt).toBeTruthy();
         });
       });
 
@@ -504,9 +568,9 @@ export const OptimisticUpdates = () => {
           const dbMessages = await BetterSqlite.selectFromTable('messages');
           const dbMessage = dbMessages.find((row) => row.id === message.id);
 
-          expect(updatedMessage.text).toBe(editedText);
+          expect(updatedMessage!.text).toBe(editedText);
           expect(pendingTasksRows).toHaveLength(0);
-          expect(dbMessage.text).toBe(editedText);
+          expect(dbMessage!.text).toBe(editedText);
         });
       });
 
@@ -518,16 +582,18 @@ export const OptimisticUpdates = () => {
           <Chat client={chatClient} enableOfflineSupport>
             <Channel
               channel={channel}
-              doUpdateMessageRequest={() => {
-                const optimisticMessage = channel.state.findMessage(message.id);
-                optimisticStateSpy(optimisticMessage);
-
-                return {
-                  message: {
-                    ...optimisticMessage,
-                  },
-                };
-              }}
+              doUpdateMessageRequest={
+                (() => {
+                  const optimisticMessage = channel.state.findMessage(message.id);
+                  optimisticStateSpy(optimisticMessage);
+
+                  return {
+                    message: {
+                      ...optimisticMessage,
+                    },
+                  };
+                }) as unknown as React.ComponentProps<typeof Channel>['doUpdateMessageRequest']
+              }
             >
               <CallbackEffectWithContext
                 callback={async ({ editMessage }) => {
@@ -611,12 +677,12 @@ export const OptimisticUpdates = () => {
           const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks');
           const dbMessages = await BetterSqlite.selectFromTable('messages');
           const dbMessage = dbMessages.find((row) => row.id === message.id);
-          const storedAttachments = JSON.parse(dbMessage.attachments);
+          const storedAttachments = JSON.parse(dbMessage!.attachments as string);
 
-          expect(updatedMessage.text).toBe(editedText);
-          expect(updatedMessage.attachments[0].asset_url).toBe(localUri);
+          expect(updatedMessage!.text).toBe(editedText);
+          expect(updatedMessage!.attachments![0].asset_url).toBe(localUri);
           expect(pendingTasksRows).toHaveLength(0);
-          expect(dbMessage.text).toBe(editedText);
+          expect(dbMessage!.text).toBe(editedText);
           expect(storedAttachments[0].asset_url).toBe(localUri);
         });
       });
@@ -681,7 +747,7 @@ export const OptimisticUpdates = () => {
           localMessage: newMessage,
           message: newMessage,
           options: {},
-        });
+        } as unknown as Awaited<ReturnType<typeof channel.messageComposer.compose>>);
 
         // initialValue is needed as a prop to trick the message input ctx into thinking
         // we are sending a message.
@@ -726,20 +792,20 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'offline resend',
           user: chatClient.user,
-          userId: chatClient.userID,
+          user_id: chatClient.userID,
         });
         const serverMessage = generateMessage({
           id: localMessage.id,
           text: localMessage.text,
           user: chatClient.user,
-          userId: chatClient.userID,
+          user_id: chatClient.userID,
         });
 
-        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
-          localMessage,
-          message: localMessage,
-          options: {},
-        });
+        jest
+          .spyOn(channel.messageComposer, 'compose')
+          .mockResolvedValue({ localMessage, message: localMessage } as unknown as Awaited<
+            ReturnType<typeof channel.messageComposer.compose>
+          >);
 
         render(
           <Chat client={chatClient} enableOfflineSupport>
@@ -758,23 +824,25 @@ export const OptimisticUpdates = () => {
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
-        let pendingTask;
+        let pendingTask: TestPendingTask | undefined;
         await waitFor(async () => {
-          const pendingTasks = await chatClient.offlineDb.getPendingTasks();
+          const pendingTasks = await getOfflineDb(chatClient).getPendingTasks();
           expect(pendingTasks).toHaveLength(1);
           pendingTask = pendingTasks[0];
         });
 
         expect(channel.state.messages.some((message) => message.id === localMessage.id)).toBe(true);
 
-        jest.spyOn(channel, 'watch').mockResolvedValue({});
+        jest
+          .spyOn(channel, 'watch')
+          .mockResolvedValue({} as Awaited<ReturnType<typeof channel.watch>>);
 
         channel.state.removeMessage(localMessage);
         channel.state.addMessageSorted(serverMessage, true);
-        await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id });
+        await getOfflineDb(chatClient).deletePendingTask({ id: pendingTask!.id });
 
         await act(async () => {
-          await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true);
+          await getOfflineDb(chatClient).syncManager.invokeSyncStatusListeners(true);
         });
 
         await waitFor(() => {
@@ -793,14 +861,14 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'offline resend unresolved',
           user: chatClient.user,
-          userId: chatClient.userID,
+          user_id: chatClient.userID,
         });
 
-        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
-          localMessage,
-          message: localMessage,
-          options: {},
-        });
+        jest
+          .spyOn(channel.messageComposer, 'compose')
+          .mockResolvedValue({ localMessage, message: localMessage } as unknown as Awaited<
+            ReturnType<typeof channel.messageComposer.compose>
+          >);
 
         render(
           <Chat client={chatClient} enableOfflineSupport>
@@ -819,20 +887,22 @@ export const OptimisticUpdates = () => {
         );
         await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy());
 
-        let pendingTask;
+        let pendingTask: TestPendingTask | undefined;
         await waitFor(async () => {
-          const pendingTasks = await chatClient.offlineDb.getPendingTasks();
+          const pendingTasks = await getOfflineDb(chatClient).getPendingTasks();
           expect(pendingTasks).toHaveLength(1);
           pendingTask = pendingTasks[0];
         });
 
-        jest.spyOn(channel, 'watch').mockResolvedValue({});
+        jest
+          .spyOn(channel, 'watch')
+          .mockResolvedValue({} as Awaited<ReturnType<typeof channel.watch>>);
 
         channel.state.removeMessage(localMessage);
-        await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id });
+        await getOfflineDb(chatClient).deletePendingTask({ id: pendingTask!.id });
 
         await act(async () => {
-          await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true);
+          await getOfflineDb(chatClient).syncManager.invokeSyncStatusListeners(true);
         });
 
         await waitFor(() => {

package/src/components/Attachment/__tests__/{Attachment.test.js → Attachment.test.tsx}

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 import { render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
@@ -24,18 +26,20 @@ jest.mock('../../../native.ts', () => ({
   isSoundPackageAvailable: jest.fn(() => false),
 }));
 
-const getAttachmentComponent = (props) => {
+const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
       <MessagesProvider
-        value={{
-          ImageLoadingFailedIndicator,
-          ImageLoadingIndicator,
-          FilePreview: FilePreviewDefault,
-        }}
+        value={
+          {
+            ImageLoadingFailedIndicator,
+            ImageLoadingIndicator,
+            FilePreview: FilePreviewDefault,
+          } as unknown as MessagesContextValue
+        }
       >
-        <MessageProvider value={{ message }}>
+        <MessageProvider value={{ message } as unknown as MessageContextValue}>
           <Attachment {...props} />
         </MessageProvider>
       </MessagesProvider>

package/src/components/Attachment/__tests__/{Gallery.test.js → Gallery.test.tsx}

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import type { Attachment, ChannelResponse } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
@@ -31,7 +32,10 @@ describe('Gallery', () => {
 
   const user1 = generateUser();
 
-  const getComponent = async (attachments = [], channelProps = {}) => {
+  const getComponent = async (
+    attachments: Attachment[] = [],
+    channelProps: Partial<ComponentProps<typeof Channel>> = {},
+  ) => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
 
     const mockedChannel = generateChannelResponse({
@@ -39,7 +43,10 @@ describe('Gallery', () => {
       messages: [generateMessage({ attachments, user: user1 })],
     });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel(
+      'messaging',
+      (mockedChannel.channel as unknown as ChannelResponse).id,
+    );
     await channel.watch();
 
     return (

package/src/components/Attachment/__tests__/{Giphy.test.js → Giphy.test.tsx}

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
+import type { Image, ImageStyle, StyleProp } from 'react-native';
 
 import {
   act,
@@ -9,8 +10,11 @@ import {
   userEvent,
   waitFor,
 } from '@testing-library/react-native';
+import type { Channel as ChannelType, ChannelResponse, StreamChat } from 'stream-chat';
 
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
@@ -38,21 +42,34 @@ const streami18n = new Streami18n({
 describe('Giphy', () => {
   const lightTheme = mergeThemes({ scheme: 'light' });
 
-  const getAttachmentComponent = (props, messageContextValue = {}) => {
+  const getAttachmentComponent = (
+    props: ComponentProps<typeof Giphy>,
+    messageContextValue: Partial<MessageContextValue> = {},
+  ) => {
     const message = generateMessage();
     return (
       <ThemeProvider>
-        <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
-          <MessageProvider value={{ message, ...messageContextValue }}>
+        <MessagesProvider
+          value={
+            {
+              ImageLoadingFailedIndicator,
+              ImageLoadingIndicator,
+            } as unknown as MessagesContextValue
+          }
+        >
+          <MessageProvider
+            value={{ message, ...messageContextValue } as unknown as MessageContextValue}
+          >
             <Giphy {...props} />
           </MessageProvider>
         </MessagesProvider>
       </ThemeProvider>
     );
   };
-  let chatClient;
-  let channel;
-  let attachment;
+  let chatClient: StreamChat;
+  let channel: ChannelType;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let attachment: any;
 
   const actions = [
     { name: 'image_action', text: 'Send', value: 'send' },
@@ -91,7 +108,10 @@ describe('Giphy', () => {
 
     chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel(
+      'messaging',
+      (mockedChannel.channel as unknown as ChannelResponse).id,
+    );
     await channel.watch();
   };
 
@@ -176,14 +196,17 @@ describe('Giphy', () => {
     attachment.giphy = giphy;
     render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));
     await waitFor(() => {
-      const checkImageProps = (imageProps, specificSizedGiphyData) => {
-        let imageStyle = imageProps.style;
+      const checkImageProps = (
+        imageProps: ComponentProps<typeof Image>,
+        specificSizedGiphyData: { height: string; url: string; width: string },
+      ) => {
+        let imageStyle = imageProps.style as StyleProp<ImageStyle>;
         if (Array.isArray(imageStyle)) {
           imageStyle = Object.assign({}, ...imageStyle);
         }
-        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
-        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
-        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+        expect((imageStyle as ImageStyle).height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect((imageStyle as ImageStyle).width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect((imageProps.source as { uri: string }).uri).toBe(specificSizedGiphyData.url);
       };
       checkImageProps(
         screen.getByLabelText('Giphy Attachment Image').props,
@@ -192,14 +215,17 @@ describe('Giphy', () => {
     });
     render(getAttachmentComponent({ attachment, giphyVersion: 'original' }));
     await waitFor(() => {
-      const checkImageProps = (imageProps, specificSizedGiphyData) => {
-        let imageStyle = imageProps.style;
+      const checkImageProps = (
+        imageProps: ComponentProps<typeof Image>,
+        specificSizedGiphyData: { height: string; url: string; width: string },
+      ) => {
+        let imageStyle = imageProps.style as StyleProp<ImageStyle>;
         if (Array.isArray(imageStyle)) {
           imageStyle = Object.assign({}, ...imageStyle);
         }
-        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
-        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
-        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+        expect((imageStyle as ImageStyle).height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect((imageStyle as ImageStyle).width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect((imageProps.source as { uri: string }).uri).toBe(specificSizedGiphyData.url);
       };
       checkImageProps(
         screen.getByLabelText('Giphy Attachment Image').props,
@@ -321,7 +347,10 @@ describe('Giphy', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel(
+      'messaging',
+      (mockedChannel.channel as unknown as ChannelResponse).id,
+    );
     await channel.watch();
 
     render(