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

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

@@ -38,7 +38,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByText, queryAllByTestId } = render(
@@ -56,7 +56,7 @@ describe('MessageList', () => {
 
     await waitFor(() => {
       expect(queryAllByTestId('scroll-to-bottom-button')).toHaveLength(0);
-      expect(getByText(newMessage.text)).toBeTruthy();
+      expect(getByText(newMessage.text as string)).toBeTruthy();
     });
   }, 10000);
 
@@ -73,7 +73,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByTestId } = render(
@@ -105,7 +105,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByTestId, queryByTestId } = render(
@@ -133,7 +133,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByTestId, queryAllByTestId } = render(
@@ -165,7 +165,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByTestId } = render(
@@ -192,7 +192,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const { getByTestId, getByText, queryAllByTestId } = render(
@@ -216,7 +216,7 @@ describe('MessageList', () => {
   it('should scroll to a message even if out of the loaded window', async () => {
     const user1 = generateUser();
 
-    const mockedLongMessagesList = [];
+    const mockedLongMessagesList: ReturnType<typeof generateMessage>[] = [];
     // we need a long enough list to make sure elements aren't preloaded by the underlying FlatList
     for (let i = 0; i <= 150; i += 1) {
       mockedLongMessagesList.push(generateMessage({ timestamp: new Date(), user: user1 }));
@@ -233,7 +233,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     render(
@@ -247,8 +247,8 @@ describe('MessageList', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText(targetedMessageText)).toBeOnTheScreen();
-      expect(() => screen.getByText(latestMessageText)).toThrow();
+      expect(screen.getByText(targetedMessageText as string)).toBeOnTheScreen();
+      expect(() => screen.getByText(latestMessageText as string)).toThrow();
     });
   });
 
@@ -271,7 +271,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: user1.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     channel.state = {
@@ -279,7 +279,7 @@ describe('MessageList', () => {
       latestMessages: [],
       messages,
       read: read_data,
-    };
+    } as unknown as typeof channel.state;
 
     const { queryByLabelText } = render(
       <OverlayProvider>
@@ -308,25 +308,20 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: user1.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
-    const channelUnreadState = {
-      last_read: new Date(),
-      unread_messages: 0,
-    };
-
     channel.state = {
       ...channelInitialState,
       latestMessages: [],
       messages,
-    };
+    } as unknown as typeof channel.state;
 
     const { queryByLabelText } = render(
       <OverlayProvider>
         <Chat client={chatClient}>
           <Channel channel={channel}>
-            <MessageList channelUnreadState={channelUnreadState} />
+            <MessageList />
           </Channel>
         </Chat>
       </OverlayProvider>,
@@ -345,7 +340,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: user.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const user2 = generateUser();
@@ -382,7 +377,7 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: user.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const targetedMessage = messages[15].id;
@@ -391,7 +386,7 @@ describe('MessageList', () => {
       ...channelInitialState,
       latestMessages: [],
       messages,
-    };
+    } as unknown as typeof channel.state;
 
     const flatListRefMock = jest
       .spyOn(FlatList.prototype, 'scrollToIndex')
@@ -428,17 +423,17 @@ describe('MessageList', () => {
 
     const chatClient = await getTestClientWithUser({ id: user.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
-    const targetedMessage = 21;
+    const targetedMessage = '21';
     const setTargetedMessage = jest.fn();
 
     channel.state = {
       ...channelInitialState,
       latestMessages: [],
       messages,
-    };
+    } as unknown as typeof channel.state;
 
     const loadChannelAroundMessage = jest.fn(() => Promise.resolve());
 
@@ -471,7 +466,9 @@ describe('MessageList pagination', () => {
     jest.clearAllMocks();
   });
 
-  const mockedHook = (values) => {
+  const mockedHook = (
+    values: Partial<ReturnType<typeof MessageListPaginationHook.useMessageListPagination>>,
+  ) => {
     const messages = Array.from({ length: 100 }, (_, i) =>
       generateMessage({ text: `message-${i}` }),
     );
@@ -499,7 +496,7 @@ describe('MessageList pagination', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const loadMoreRecent = jest.fn(() => Promise.resolve());
@@ -541,7 +538,7 @@ describe('MessageList pagination', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     const loadMore = jest.fn(() => Promise.resolve());
@@ -586,18 +583,18 @@ describe('MessageList pagination', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
 
     channel.state = {
       ...channelInitialState,
       latestMessages: [],
       members: Object.fromEntries(
-        Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]),
+        Array.from({ length: 10 }, (_, i) => [i, generateMember({ user_id: String(i) })]),
       ),
-      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })),
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })),
       messageSets: [{ isCurrent: true, isLatest: true }],
-    };
+    } as unknown as typeof channel.state;
 
     const loadLatestMessages = jest.fn(() => Promise.resolve());
     mockedHook({ loadLatestMessages });

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

@@ -13,7 +13,7 @@ import { MessageSystem } from '../MessageSystem';
 
 afterEach(cleanup);
 
-let i18nInstance;
+let i18nInstance: Streami18n;
 
 describe('MessageSystem', () => {
   beforeAll(() => {
@@ -25,8 +25,12 @@ describe('MessageSystem', () => {
     const translators = await i18nInstance.getTranslators();
     const message = generateMessage();
     const { queryByTestId } = render(
-      <ThemeProvider style={defaultTheme}>
-        <TranslationProvider value={translators}>
+      <ThemeProvider
+        style={defaultTheme as unknown as Parameters<typeof ThemeProvider>[0]['style']}
+      >
+        <TranslationProvider
+          value={translators as unknown as Parameters<typeof TranslationProvider>[0]['value']}
+        >
           <MessageSystem message={message} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -42,8 +46,12 @@ describe('MessageSystem', () => {
     const user = generateStaticUser(0);
     const message = generateStaticMessage('Hello World', { user });
     render(
-      <ThemeProvider style={defaultTheme}>
-        <TranslationProvider value={translators}>
+      <ThemeProvider
+        style={defaultTheme as unknown as Parameters<typeof ThemeProvider>[0]['style']}
+      >
+        <TranslationProvider
+          value={translators as unknown as Parameters<typeof TranslationProvider>[0]['value']}
+        >
           <MessageSystem message={message} />
         </TranslationProvider>
       </ThemeProvider>,

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
@@ -20,7 +21,7 @@ describe('ScrollToBottomButton', () => {
     const translators = await i18nInstance.getTranslators();
     const { queryByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators}>
+        <TranslationProvider value={translators as TranslationContextValue}>
           <ScrollToBottomButton onPress={() => null} showNotification={false} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -36,7 +37,7 @@ describe('ScrollToBottomButton', () => {
     const translators = await i18nInstance.getTranslators();
     const { queryByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators}>
+        <TranslationProvider value={translators as TranslationContextValue}>
           <ScrollToBottomButton onPress={() => null} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -53,7 +54,7 @@ describe('ScrollToBottomButton', () => {
     const onPress = jest.fn();
     const { getByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators}>
+        <TranslationProvider value={translators as TranslationContextValue}>
           <ScrollToBottomButton onPress={onPress} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -63,18 +64,13 @@ describe('ScrollToBottomButton', () => {
   });
 
   it('should display the unread count', async () => {
-    const t = jest.fn((key) => key);
+    const t = jest.fn((key: string) => key);
     const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
     const { getByTestId, getByText } = render(
       <ThemeProvider>
-        <TranslationProvider value={{ ...translators, t }}>
-          <ScrollToBottomButton
-            onPress={() => null}
-            showNotification={true}
-            t={t}
-            unreadCount={3}
-          />
+        <TranslationProvider value={{ ...translators, t } as unknown as TranslationContextValue}>
+          <ScrollToBottomButton onPress={() => null} showNotification={true} unreadCount={3} />
         </TranslationProvider>
       </ThemeProvider>,
     );
@@ -89,7 +85,7 @@ describe('ScrollToBottomButton', () => {
     const translators = await i18nInstance.getTranslators();
     const { toJSON } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators}>
+        <TranslationProvider value={translators as TranslationContextValue}>
           <ScrollToBottomButton onPress={() => null} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
+import type { Event, StreamChat } from 'stream-chat';
+
 import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
@@ -12,7 +14,7 @@ import { TypingIndicator } from '../TypingIndicator';
 afterEach(cleanup);
 
 describe('TypingIndicator', () => {
-  let chatClient;
+  let chatClient: StreamChat;
 
   it('should render typing indicator for two users', async () => {
     const user0 = generateUser();
@@ -25,7 +27,7 @@ describe('TypingIndicator', () => {
 
     const { getAllByTestId, getByTestId } = render(
       <Chat client={chatClient}>
-        <TypingProvider value={{ typing }}>
+        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
           <TypingIndicator />
         </TypingProvider>
       </Chat>,
@@ -46,7 +48,7 @@ describe('TypingIndicator', () => {
 
     const { getAllByTestId, getByTestId } = render(
       <Chat client={chatClient}>
-        <TypingProvider value={{ typing }}>
+        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
           <TypingIndicator />
         </TypingProvider>
       </Chat>,
@@ -68,7 +70,7 @@ describe('TypingIndicator', () => {
 
     const { toJSON } = render(
       <Chat client={chatClient}>
-        <TypingProvider value={{ typing }}>
+        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
           <TypingIndicator />
         </TypingProvider>
       </Chat>,

package/src/components/MessageList/__tests__/useMessageList.test.tsx

@@ -27,7 +27,7 @@ beforeEach(async () => {
 
 const messages = new Array(10)
   .fill(undefined)
-  .map((_: undefined, id: number) => generateMessage({ id }));
+  .map((_: undefined, id: number) => generateMessage({ id: String(id) }));
 
 const Providers: FC<{ children: React.ReactNode }> = ({ children }) => {
   const messageListContext = useCreatePaginatedMessageListContext({
@@ -57,7 +57,7 @@ describe('useMessageList', () => {
         useMessageList({
           noGroupByUser: true,
           threadList: false,
-        }),
+        } as unknown as Parameters<typeof useMessageList>[0]),
       { wrapper: Providers },
     );
     const reversedMessages = messages.reverse();

package/src/components/MessageList/hooks/useMessageList.ts

@@ -29,7 +29,7 @@ export const useMessageList = (params: UseMessageListParams) => {
   const messageList = threadList ? threadMessages : messages;
 
   const processedMessageList = useMemo<LocalMessage[]>(() => {
-    const newMessageList = [];
+    const newMessageList: LocalMessage[] = [];
     for (const message of messageList) {
       if (isFlashList) {
         newMessageList.push(message);

package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx

@@ -9,11 +9,14 @@ import { render } from '@testing-library/react-native';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { MessageActionList } from '../MessageActionList';
+import type { MessageActionListProps } from '../MessageActionList';
 import { MessageActionListItemProps } from '../MessageActionListItem';
 
 const MockMessageActionListItem = (props: MessageActionListItemProps) => <Text>{props.title}</Text>;
 
-const defaultProps = {
+const defaultProps: MessageActionListProps & {
+  MessageActionListItem: typeof MockMessageActionListItem;
+} = {
   MessageActionListItem: MockMessageActionListItem,
   messageActions: [
     { action: jest.fn(), actionType: 'copyMessage', type: 'standard', title: 'Copy Message' },

package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx

@@ -18,6 +18,7 @@ describe('MessageActionListItem', () => {
     actionType: 'copyMessage',
     icon: <Text>Icon</Text>,
     title: 'Copy Message',
+    type: 'standard' as const,
   };
 
   it('should render correctly with given props', () => {

package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { fireEvent, render, cleanup, waitFor } from '@testing-library/react-native';
+import type { StreamChat } from 'stream-chat';
 
 import {
   MessageContextValue,
@@ -39,8 +40,11 @@ const defaultProps = {
 };
 
 describe('MessageReactionPicker', () => {
-  let client;
-  let renderComponent;
+  let client: StreamChat;
+  let renderComponent: (
+    props?: Partial<React.ComponentProps<typeof MessageReactionPicker>>,
+    ownCapabilities?: Partial<OwnCapabilitiesContextValue>,
+  ) => ReturnType<typeof render>;
 
   beforeEach(async () => {
     client = await getTestClientWithUser({ id: 'reaction-test-user' });

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { LocalMessage, ReactionResponse } from 'stream-chat';
+import { ReactionResponse } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
@@ -35,7 +35,7 @@ const defaultProps = {
   message: {
     ...generateMessage(),
     reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
-  } as unknown as LocalMessage,
+  },
   supportedReactions: mockSupportedReactions,
 };
 
@@ -51,7 +51,7 @@ const renderComponent = (props = {}) =>
             ),
           }}
         >
-          <MessagesProvider value={{} as unknown as MessagesContextValue}>
+          <MessagesProvider value={{} as MessagesContextValue}>
             <MessageUserReactions {...defaultProps} {...props} />
           </MessagesProvider>
         </WithComponents>

package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 
 import { render } from '@testing-library/react-native';
 
+import type { StreamChat } from 'stream-chat';
+
+import type { DeepPartial } from '../../../contexts/themeContext/ThemeContext';
+import type { Theme } from '../../../contexts/themeContext/utils/theme';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
@@ -9,7 +13,7 @@ import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar';
 
 describe('MessageUserReactionsAvatar', () => {
   const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data
-  let chatClient;
+  let chatClient: StreamChat;
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser({ id: 'me' });
@@ -17,7 +21,7 @@ describe('MessageUserReactionsAvatar', () => {
 
   it('should render Avatar with correct image, name, and default size', () => {
     const { queryByTestId } = render(
-      <Chat client={chatClient} style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
         <MessageUserReactionsAvatar reaction={reaction} />
       </Chat>,
     );
@@ -28,7 +32,7 @@ describe('MessageUserReactionsAvatar', () => {
 
   it('should render Avatar with correct image, name, and custom size', () => {
     const { queryByTestId } = render(
-      <Chat client={chatClient} style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
         <MessageUserReactionsAvatar reaction={reaction} size={'lg'} />
       </Chat>,
     );

package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx

@@ -38,7 +38,8 @@ const renderComponent = async (props = {}, clientUserID = 'user2') =>
     >
       <ThemeProvider theme={defaultTheme}>
         <MessageUserReactionsItem
-          MessageUserReactionsAvatar={MockOverlayReactionsAvatar}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          {...({ MessageUserReactionsAvatar: MockOverlayReactionsAvatar } as any)}
           reaction={mockReaction}
           supportedReactions={mockSupportedReactions}
           {...props}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 import { v5 as uuidv5 } from 'uuid';
 
 import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -23,11 +24,21 @@ import { Thread } from '../Thread';
 
 const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035';
 
-const renderComponent = ({ chatClient, channel, props, thread }) => {
+const renderComponent = ({
+  chatClient,
+  channel,
+  props,
+  thread,
+}: {
+  channel: ChannelType;
+  chatClient: StreamChat;
+  props?: Partial<React.ComponentProps<typeof Thread>>;
+  thread: LocalMessage;
+}) => {
   return render(
     <OverlayProvider>
       <Chat client={chatClient}>
-        <Channel channel={channel} client={chatClient} thread={thread} threadList>
+        <Channel channel={channel} thread={thread} threadList>
           <Thread {...props} />
         </Channel>
       </Chat>
@@ -36,8 +47,8 @@ const renderComponent = ({ chatClient, channel, props, thread }) => {
 };
 
 describe('Thread', () => {
-  let chatClient;
-  let channel;
+  let chatClient: StreamChat;
+  let channel: ChannelType;
 
   beforeEach(async () => {
     const { client: client, channels } = await initiateClientWithChannels();
@@ -64,7 +75,9 @@ describe('Thread', () => {
       generateMessage({ cid, parent_id }),
     ];
 
-    channel.state.addMessagesSorted(threadResponses);
+    channel.state.addMessagesSorted(
+      threadResponses as unknown as Parameters<typeof channel.state.addMessagesSorted>[0],
+    );
 
     renderComponent({ channel, chatClient, props, thread });
 
@@ -122,19 +135,30 @@ describe('Thread', () => {
 
     const chatClient = await getTestClientWithUser({ id: 'testID2' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.query();
 
-    channel.state.addMessagesSorted(threadResponses);
+    channel.state.addMessagesSorted(
+      threadResponses as unknown as Parameters<typeof channel.state.addMessagesSorted>[0],
+    );
 
-    let setLastRead;
+    let setLastRead: ((date?: Date) => void) | undefined;
 
     const { getByText, toJSON } = render(
       <ChannelsStateProvider>
         <Chat client={chatClient} i18nInstance={i18nInstance}>
-          <AttachmentPickerProvider value={{ closePicker: jest.fn(), openPicker: jest.fn() }}>
-            <ImageGalleryProvider>
-              <Channel channel={channel} client={chatClient} thread={thread} threadList>
+          <AttachmentPickerProvider
+            value={
+              {
+                closePicker: jest.fn(),
+                openPicker: jest.fn(),
+              } as unknown as React.ComponentProps<typeof AttachmentPickerProvider>['value']
+            }
+          >
+            <ImageGalleryProvider
+              value={{} as React.ComponentProps<typeof ImageGalleryProvider>['value']}
+            >
+              <Channel channel={channel} thread={thread} threadList>
                 <ChannelContext.Consumer>
                   {(c) => {
                     setLastRead = c.setLastRead;
@@ -154,9 +178,13 @@ describe('Thread', () => {
       expect(getByText('Message6')).toBeTruthy();
     });
 
-    act(() => setLastRead(new Date('2020-08-17T18:08:03.196Z')));
+    act(() => setLastRead!(new Date('2020-08-17T18:08:03.196Z')));
 
-    const snapshot = toJSON();
+    const snapshot = toJSON() as unknown as {
+      children: Array<{
+        children: Array<{ children: Array<{ props: { ListFooterComponent: unknown } }> }>;
+      }>;
+    };
     snapshot.children[0].children[0].children[0].props.ListFooterComponent = null;
 
     await waitFor(() => {