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

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

@@ -10,6 +10,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { useChannelsContext } from '../../../contexts/channelsContext/ChannelsContext';
 import {
@@ -37,21 +38,22 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
 
-const mockChannelSwipableWrapper = jest.fn(({ children }) => (
+const mockChannelSwipableWrapper = jest.fn(({ children }: { children: React.ReactNode }) => (
   <View testID='swipe-wrapper'>{children}</View>
 ));
 
 jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({
-  ChannelSwipableWrapper: (...args) => mockChannelSwipableWrapper(...args),
+  ChannelSwipableWrapper: (...args: Parameters<typeof mockChannelSwipableWrapper>) =>
+    mockChannelSwipableWrapper(...args),
 }));
 
 /**
  * Custom ChannelPreview component used via WithComponents to verify channel rendering.
  * Receives { channel, muted, unread, lastMessage } from ChannelPreview.
  */
-const ChannelPreviewComponent = ({ channel }) => (
+const ChannelPreviewComponent = ({ channel }: { channel: ChannelType }) => (
   <View accessibilityLabel='list-item' testID={channel.id}>
-    <Text>{channel.data?.name}</Text>
+    <Text>{(channel.data as { name?: string } | undefined)?.name}</Text>
     <Text>{channel.state.messages[0]?.text}</Text>
   </View>
 );
@@ -73,9 +75,11 @@ const RefreshingProbe = () => {
   return <Text testID='refreshing'>{`${refreshing}`}</Text>;
 };
 
-const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
+const ChannelPreviewContent = ({ unread }: { unread?: number }) => (
+  <Text testID='preview-unread'>{`${unread}`}</Text>
+);
 
-let expectedChannelDetailsBottomSheetOverride;
+let expectedChannelDetailsBottomSheetOverride: unknown;
 const ChannelDetailsBottomSheetProbe = () => {
   const { ChannelDetailsBottomSheet } = useComponentsContext();
   return (
@@ -85,9 +89,13 @@ const ChannelDetailsBottomSheetProbe = () => {
   );
 };
 
-class DeferredPromise {
+class DeferredPromise<T = unknown> {
+  promise: Promise<T>;
+  resolve!: (value: T | PromiseLike<T>) => void;
+  reject!: (reason?: unknown) => void;
+
   constructor() {
-    this.promise = new Promise((resolve, reject) => {
+    this.promise = new Promise<T>((resolve, reject) => {
       this.resolve = resolve;
       this.reject = reject;
     });
@@ -95,11 +103,11 @@ class DeferredPromise {
 }
 
 describe('ChannelList', () => {
-  let chatClient;
-  let testChannel1;
-  let testChannel2;
-  let testChannel3;
-  const props = {
+  let chatClient: StreamChat;
+  let testChannel1: ReturnType<typeof generateChannelResponse>;
+  let testChannel2: ReturnType<typeof generateChannelResponse>;
+  let testChannel3: ReturnType<typeof generateChannelResponse>;
+  const props: Partial<React.ComponentProps<typeof ChannelList>> = {
     filters: {},
   };
 
@@ -163,7 +171,10 @@ describe('ChannelList', () => {
     screen.rerender(
       <Chat client={chatClient}>
         <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
-          <ChannelList {...props} filters={{ dummyFilter: true }} />
+          <ChannelList
+            {...props}
+            filters={{ dummyFilter: true } as React.ComponentProps<typeof ChannelList>['filters']}
+          />
         </WithComponents>
       </Chat>,
     );
@@ -178,12 +189,17 @@ describe('ChannelList', () => {
     const deferredCallForFreshFilter = new DeferredPromise();
     const staleFilter = { 'initial-filter': { a: { $gt: 'c' } } };
     const freshFilter = { 'new-filter': { a: { $gt: 'c' } } };
-    const createMockChannel = (id) => {
+    const createMockChannel = (id: string) => {
       const channel = generateChannel({
         data: { name: id },
         id,
         state: { latestMessages: [], members: {}, messages: [], setIsUpToDate: jest.fn() },
-      });
+      } as unknown as Parameters<typeof generateChannel>[0]) as unknown as {
+        countUnread: () => number;
+        messageComposer: { registerDraftEventSubscriptions: () => () => void };
+        muteStatus: () => { muted: boolean };
+        on: jest.Mock;
+      };
       channel.countUnread = () => 0;
       channel.muteStatus = () => ({ muted: false });
       channel.on = jest.fn(() => ({ unsubscribe: jest.fn() }));
@@ -195,17 +211,20 @@ describe('ChannelList', () => {
     const staleChannel = [createMockChannel('stale-channel')];
     const freshChannel = [createMockChannel('new-channel')];
     const spy = jest.spyOn(chatClient, 'queryChannels');
-    spy.mockImplementation((filters = {}) => {
+    spy.mockImplementation(((filters: Parameters<typeof chatClient.queryChannels>[0] = {}) => {
       if (Object.prototype.hasOwnProperty.call(filters, 'new-filter')) {
         return deferredCallForFreshFilter.promise;
       }
       return deferredCallForStaleFilter.promise;
-    });
+    }) as typeof chatClient.queryChannels);
 
     const { rerender, queryByTestId } = render(
       <Chat client={chatClient}>
         <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
-          <ChannelList {...props} filters={staleFilter} />
+          <ChannelList
+            {...props}
+            filters={staleFilter as React.ComponentProps<typeof ChannelList>['filters']}
+          />
         </WithComponents>
       </Chat>,
     );
@@ -225,7 +244,10 @@ describe('ChannelList', () => {
     rerender(
       <Chat client={chatClient}>
         <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
-          <ChannelList {...props} filters={freshFilter} />
+          <ChannelList
+            {...props}
+            filters={freshFilter as React.ComponentProps<typeof ChannelList>['filters']}
+          />
         </WithComponents>
       </Chat>,
     );
@@ -406,13 +428,13 @@ describe('ChannelList', () => {
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(screen.getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text as string)).toBeTruthy();
         });
 
         const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
-          expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
+          expect(within(items[0]).getByText(newMessage.text as string)).toBeTruthy();
         });
       });
 
@@ -436,13 +458,13 @@ describe('ChannelList', () => {
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(screen.getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text as string)).toBeTruthy();
         });
 
         const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
-          expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
+          expect(within(items[0]).getByText(newMessage.text as string)).toBeTruthy();
         });
       });
 
@@ -462,13 +484,13 @@ describe('ChannelList', () => {
         const newMessage = sendNewMessageOnChannel3();
 
         await waitFor(() => {
-          expect(screen.getByText(newMessage.text)).toBeTruthy();
+          expect(screen.getByText(newMessage.text as string)).toBeTruthy();
         });
 
         const items = screen.getAllByLabelText('list-item');
 
         await waitFor(() => {
-          expect(within(items[2]).getByText(newMessage.text)).toBeTruthy();
+          expect(within(items[2]).getByText(newMessage.text as string)).toBeTruthy();
         });
       });
       it('should call the `onNewMessage` function prop, if provided', async () => {
@@ -485,7 +507,12 @@ describe('ChannelList', () => {
           expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         });
 
-        act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel));
+        act(() =>
+          dispatchMessageNewEvent(
+            chatClient,
+            testChannel2.channel as unknown as Parameters<typeof dispatchMessageNewEvent>[1],
+          ),
+        );
 
         await waitFor(() => {
           expect(onNewMessage).toHaveBeenCalledTimes(1);
@@ -538,7 +565,12 @@ describe('ChannelList', () => {
           expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         });
 
-        act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel));
+        act(() =>
+          dispatchMessageNewEvent(
+            chatClient,
+            testChannel2.channel as unknown as Parameters<typeof dispatchMessageNewEvent>[1],
+          ),
+        );
 
         await waitFor(() => {
           expect(onNewMessage).toHaveBeenCalledTimes(1);
@@ -884,7 +916,9 @@ describe('ChannelList', () => {
           expect(screen.getByTestId('refreshing').children[0]).toBe('false');
         });
 
-        chatClient.queryChannels = jest.fn(() => deferredPromise.promise);
+        chatClient.queryChannels = jest.fn(
+          () => deferredPromise.promise,
+        ) as typeof chatClient.queryChannels;
 
         act(() => dispatchConnectionChangedEvent(chatClient, false));
         act(() => dispatchConnectionChangedEvent(chatClient, true));

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

@@ -1,7 +1,9 @@
 import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
+import type { StreamChat } from 'stream-chat';
 
+import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -13,7 +15,7 @@ import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
 import { ChannelListView } from '../ChannelListView';
 
-let chatClient;
+let chatClient: StreamChat;
 
 /**
  * Renders the full ChannelList (which now always uses ChannelListView internally).
@@ -42,30 +44,38 @@ const noop = () => {};
  * Renders ChannelListView directly with a mock ChannelsContext for testing
  * error and loading states.
  */
-const ComponentWithContextOverrides = ({ error, loadingChannels }) => (
+const ComponentWithContextOverrides = ({
+  error,
+  loadingChannels,
+}: {
+  error: boolean;
+  loadingChannels: boolean;
+}) => (
   <Chat client={chatClient}>
     <ChatContext.Consumer>
       {(context) => (
         <ChatProvider value={{ ...context, isOnline: true }}>
           <ChannelsProvider
-            value={{
-              additionalFlatListProps: {},
-              channelListInitialized: !loadingChannels && !error,
-              channels: error ? null : [],
-              error: error ? new Error('test error') : undefined,
-              forceUpdate: 0,
-              hasNextPage: false,
-              loadingChannels,
-              loadingNextPage: false,
-              loadMoreThreshold: 0.1,
-              loadNextPage: noop,
-              maxUnreadCount: 255,
-              numberOfSkeletons: 8,
-              refreshing: false,
-              refreshList: noop,
-              reloadList: noop,
-              setFlatListRef: noop,
-            }}
+            value={
+              {
+                additionalFlatListProps: {},
+                channelListInitialized: !loadingChannels && !error,
+                channels: error ? null : [],
+                error: error ? new Error('test error') : undefined,
+                forceUpdate: 0,
+                hasNextPage: false,
+                loadingChannels,
+                loadingNextPage: false,
+                loadMoreThreshold: 0.1,
+                loadNextPage: noop,
+                maxUnreadCount: 255,
+                numberOfSkeletons: 8,
+                refreshing: false,
+                refreshList: noop,
+                reloadList: noop,
+                setFlatListRef: noop,
+              } as unknown as ChannelsContextValue
+            }
           >
             <ChannelListView />
           </ChannelsProvider>

package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx

@@ -149,7 +149,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       muteActive: false,
-      t: (value) => value,
+      t: ((value: string) => value) as TranslationContextValue['t'],
     });
     const actionItems = getChannelActionItems({
       context: {
@@ -159,7 +159,7 @@ describe('getChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         muteActive: false,
-        t: (value) => value,
+        t: ((value: string) => value) as TranslationContextValue['t'],
       },
       defaultItems,
     });
@@ -186,7 +186,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       muteActive: true,
-      t: (value) => value,
+      t: ((value: string) => value) as TranslationContextValue['t'],
     });
 
     expect(actionItems.map((item) => item.id)).toEqual(['mute', 'block', 'leave', 'deleteChannel']);
@@ -213,7 +213,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       muteActive: false,
-      t: (value) => value,
+      t: ((value: string) => value) as TranslationContextValue['t'],
     });
 
     expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']);
@@ -228,7 +228,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       muteActive: true,
-      t: (value) => value,
+      t: ((value: string) => value) as TranslationContextValue['t'],
     });
 
     expect(actionItems[0].action).toBe(channelActions.unmuteChannel);
@@ -251,7 +251,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       muteActive: false,
-      t: (value) => value,
+      t: ((value: string) => value) as TranslationContextValue['t'],
     });
 
     const deleteItem = actionItems.find((item) => item.id === 'deleteChannel');

package/src/components/ChannelList/hooks/__tests__/useChannelActionItemsById.test.tsx

@@ -21,7 +21,7 @@ describe('useChannelActionItemsById', () => {
     const channelActionItems: useChannelActionItemsModule.ChannelActionItem[] = [
       {
         action: jest.fn(),
-        Icon: <></>,
+        Icon: () => <></>,
         id: 'pin',
         label: '',
         placement: 'both',
@@ -29,7 +29,7 @@ describe('useChannelActionItemsById', () => {
       },
       {
         action: jest.fn(),
-        Icon: <></>,
+        Icon: () => <></>,
         id: 'deleteChannel',
         label: '',
         placement: 'both',

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

@@ -4,6 +4,7 @@ import { Image, Text } from 'react-native';
 import { act, render, waitFor } from '@testing-library/react-native';
 import type { Channel, ChannelResponse, Event, StreamChat } from 'stream-chat';
 
+import type { ChatContextValue } from '../../../../../contexts/chatContext/ChatContext';
 import { ChatContext, useChannelUpdated } from '../../../../../index';
 
 describe('useChannelUpdated', () => {
@@ -33,16 +34,16 @@ describe('useChannelUpdated', () => {
     } as unknown as StreamChat;
 
     const TestComponent = () => {
-      const [channels, setChannels] = useState<Channel[] | null>([mockChannel]);
+      const [channels, setChannels] = useState<Channel[]>([mockChannel]);
 
       useChannelUpdated({ setChannels });
 
       if (
         channels &&
         channels[0].data?.own_capabilities &&
-        Object.keys(channels[0].data?.own_capabilities as { [key: string]: boolean }).includes(
-          'send_messages',
-        )
+        Object.keys(
+          channels[0].data?.own_capabilities as unknown as { [key: string]: boolean },
+        ).includes('send_messages')
       ) {
         return <Text>Send messages enabled</Text>;
       }
@@ -53,16 +54,18 @@ describe('useChannelUpdated', () => {
     const { getByText } = await waitFor(() =>
       render(
         <ChatContext.Provider
-          value={{
-            appSettings: null,
-            client: mockClient,
-            connectionRecovering: false,
-            enableOfflineSupport: false,
-            ImageComponent: Image,
-            isOnline: true,
-            mutedUsers: [],
-            setActiveChannel: () => null,
-          }}
+          value={
+            {
+              appSettings: null,
+              client: mockClient,
+              connectionRecovering: false,
+              enableOfflineSupport: false,
+              ImageComponent: Image,
+              isOnline: true,
+              mutedUsers: [],
+              setActiveChannel: () => null,
+            } as unknown as ChatContextValue
+          }
         >
           <TestComponent />
         </ChatContext.Provider>,

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { Text } from 'react-native';
 
 import { render } from '@testing-library/react-native';
@@ -7,13 +7,19 @@ import type { Channel } from 'stream-chat';
 import { ThemeProvider, defaultTheme } from '../../../contexts';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
 import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
 
-const mockStreamBottomSheetModalFlatList = jest.fn(() => null);
+type StreamBottomSheetModalFlatListProps = ComponentProps<typeof StreamBottomSheetModalFlatList>;
+
+const mockStreamBottomSheetModalFlatList = jest.fn(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_props: StreamBottomSheetModalFlatListProps) => null,
+);
 
 jest.mock('../../UIComponents/StreamBottomSheetModalFlatList', () => ({
-  StreamBottomSheetModalFlatList: (...args: unknown[]) =>
+  StreamBottomSheetModalFlatList: (...args: [StreamBottomSheetModalFlatListProps]) =>
     mockStreamBottomSheetModalFlatList(...args),
 }));
 
@@ -73,7 +79,11 @@ describe('ChannelDetailsBottomSheet', () => {
     );
 
     expect(mockStreamBottomSheetModalFlatList).toHaveBeenCalled();
-    const flatListProps = mockStreamBottomSheetModalFlatList.mock.calls[0]?.[0];
+    const flatListProps = (
+      mockStreamBottomSheetModalFlatList.mock.calls[0] as unknown as [
+        StreamBottomSheetModalFlatListProps,
+      ]
+    )?.[0];
     expect(flatListProps).toEqual(
       expect.objectContaining({
         onEndReached,

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

@@ -41,7 +41,8 @@ const mockChannelSwipableWrapper = jest.fn(({ children }: React.PropsWithChildre
 ));
 
 jest.mock('../ChannelSwipableWrapper', () => ({
-  ChannelSwipableWrapper: (...args: unknown[]) => mockChannelSwipableWrapper(...args),
+  ChannelSwipableWrapper: (...args: [React.PropsWithChildren]) =>
+    mockChannelSwipableWrapper(...args),
 }));
 
 const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => {
@@ -56,7 +57,7 @@ const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => {
 
 const initChannelFromData = async (
   chatClient: StreamChat,
-  overrides: Record<string, unknown> = {},
+  overrides: Parameters<typeof generateChannelResponse>[0] = {},
 ) => {
   const mockedChannel = generateChannelResponse(overrides);
   useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
@@ -84,21 +85,27 @@ describe('ChannelPreview', () => {
 
     return (
       <Chat client={chatClient}>
-        <WithComponents overrides={{ ChannelPreview: ChannelPreviewUIComponent }}>
+        <WithComponents
+          overrides={{
+            ChannelPreview: ChannelPreviewUIComponent as unknown as React.ComponentType<
+              React.ComponentProps<typeof ChannelPreview>
+            >,
+          }}
+        >
           <ChannelPreview {...props} channel={channel} client={chatClient} />
         </WithComponents>
       </Chat>
     );
   };
 
-  const generateChannelWrapper = (overrides: Record<string, unknown>) =>
+  const generateChannelWrapper = (overrides: Partial<Channel>) =>
     generateChannel({
       countUnread: jest.fn().mockReturnValue(0),
       initialized: true,
       lastMessage: jest.fn().mockReturnValue(generateMessage()),
       muteStatus: jest.fn().mockReturnValue({ muted: false }),
       ...overrides,
-    });
+    } as unknown as Parameters<typeof generateChannel>[0]);
 
   const useInitializeChannel = async (c: GetOrCreateChannelApiParams) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
@@ -308,7 +315,7 @@ describe('ChannelPreview', () => {
     const c = generateChannelResponse();
     await useInitializeChannel(c);
 
-    channel.muteStatus = jest.fn().mockReturnValue({ muted: true });
+    if (channel) channel.muteStatus = jest.fn().mockReturnValue({ muted: true });
 
     const { getByTestId } = render(<TestComponent />);
 
@@ -362,7 +369,7 @@ describe('ChannelPreview', () => {
     });
 
     await waitFor(() => {
-      expect(getByTestId('latest-message')).toHaveTextContent(message.text);
+      expect(getByTestId('latest-message')).toHaveTextContent(message.text as string);
     });
   });
 
@@ -400,7 +407,9 @@ describe('ChannelPreview', () => {
       },
       text: 'Hello world!',
     };
-    const channel = generateChannelResponse({ messages: [message] });
+    const channel = generateChannelResponse({
+      messages: [message] as unknown as GetOrCreateChannelApiParams['messages'],
+    });
     await useInitializeChannel(channel);
 
     const { getByText } = render(<TestComponent />);
@@ -435,10 +444,12 @@ describe('ChannelPreview', () => {
       return (
         <Chat client={chatClient}>
           <WithComponents
-            overrides={{
-              ChannelDetailsBottomSheet: channelDetailsBottomSheet,
-              ChannelPreview: SwipePreview,
-            }}
+            overrides={
+              {
+                ChannelDetailsBottomSheet: channelDetailsBottomSheet,
+                ChannelPreview: SwipePreview,
+              } as unknown as React.ComponentProps<typeof WithComponents>['overrides']
+            }
           >
             <ChannelsProvider
               value={

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import truncate from 'lodash/truncate';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
@@ -15,32 +16,16 @@ import { ChannelPreviewView } from '../ChannelPreviewView';
 
 describe('ChannelPreviewView', () => {
   const clientUser = generateUser();
-  let chatClient;
-  let channel;
+  let chatClient: StreamChat;
+  let channel: ChannelType | null;
 
-  const getComponent = (props = {}) => (
+  const getComponent = (props: Partial<React.ComponentProps<typeof ChannelPreviewView>> = {}) => (
     <Chat client={chatClient}>
-      <ChannelPreviewView
-        channel={channel}
-        client={chatClient}
-        latestMessagePreview={{
-          created_at: '',
-          messageObject: generateMessage(),
-          previews: [
-            {
-              bold: true,
-              text: 'This is the message preview text',
-            },
-          ],
-          status: 1, // read states of latest message.
-        }}
-        onSelect={jest.fn()}
-        {...props}
-      />
+      <ChannelPreviewView channel={channel as ChannelType} onSelect={jest.fn()} {...props} />
     </Chat>
   );
 
-  const initializeChannel = async (c) => {
+  const initializeChannel = async (c: ReturnType<typeof generateChannelResponse>) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
 
     channel = chatClient.channel('messaging');
@@ -60,12 +45,7 @@ describe('ChannelPreviewView', () => {
     const onSelect = jest.fn();
     await initializeChannel(generateChannelResponse());
 
-    render(
-      getComponent({
-        onSelect,
-        watchers: {},
-      }),
-    );
+    render(getComponent({ onSelect }));
 
     await waitFor(() => screen.getByTestId('channel-preview-button'));
 
@@ -101,7 +81,7 @@ describe('ChannelPreviewView', () => {
     );
 
     render(getComponent());
-    const expectedDisplayName = `${m1.user.name}, ${m2.user.name}, ${m3.user.name}`;
+    const expectedDisplayName = `${m1.user!.name}, ${m2.user!.name}, ${m3.user!.name}`;
 
     await waitFor(() => screen.queryByText(expectedDisplayName));
   });
@@ -110,12 +90,7 @@ describe('ChannelPreviewView', () => {
     const message = generateMessage();
     await initializeChannel(generateChannelResponse());
 
-    render(
-      getComponent({
-        latestMessage: message,
-        latestMessageLength: 6,
-      }),
-    );
+    render(getComponent());
 
     const expectedMessagePreview = truncate(message.text, { length: 6 });
     await waitFor(() => screen.queryByText(expectedMessagePreview));