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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { Text } from 'react-native';
 
 import { act, render } from '@testing-library/react-native';
@@ -8,6 +8,7 @@ import { WithComponents } from '../../../contexts/componentsContext/ComponentsCo
 import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
 import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
 import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { SwipableWrapper } from '../../UIComponents/SwipableWrapper';
 import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
 import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
 
@@ -60,7 +61,8 @@ jest.mock('../../UIComponents/SwipableWrapper', () => ({
     rightActionsProbe.items = items;
     return null;
   },
-  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+  SwipableWrapper: (...args: [ComponentProps<typeof SwipableWrapper>]) =>
+    mockSwipableWrapper(...args),
 }));
 
 describe('ChannelSwipableWrapper', () => {

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

@@ -19,7 +19,7 @@ describe('useChannelPreviewDisplayPresence', () => {
     chatClient = await getTestClientWithUser({
       id: currentUserId,
       userID: currentUserId,
-    });
+    } as unknown as Parameters<typeof getTestClientWithUser>[0]);
 
     // Create mock channel
     mockChannel = {

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

@@ -5,8 +5,10 @@ import NetInfo from '@react-native-community/netinfo';
 
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
@@ -14,12 +16,12 @@ import { getTestClient, getTestClientWithUser, setUser } from '../../../mock-bui
 import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../Chat';
 
-const ChatContextConsumer = ({ fn }) => {
+const ChatContextConsumer = ({ fn }: { fn: (ctx: ChatContextValue) => void }) => {
   fn(useChatContext());
   return <View testID='children' />;
 };
 
-const TranslationContextConsumer = ({ fn }) => {
+const TranslationContextConsumer = ({ fn }: { fn: (ctx: TranslationContextValue) => void }) => {
   fn(useTranslationContext());
   return <View testID='children' />;
 };
@@ -42,7 +44,7 @@ describe('Chat', () => {
   });
 
   it('listens and updates state on a connection changed event', async () => {
-    let context;
+    let context: ChatContextValue = {} as ChatContextValue;
 
     render(
       <Chat client={chatClient}>
@@ -65,7 +67,7 @@ describe('Chat', () => {
   });
 
   it('listens and updates state on a connection recovered event', async () => {
-    let context;
+    let context: ChatContextValue = {} as ChatContextValue;
 
     render(
       <Chat client={chatClient}>
@@ -87,7 +89,7 @@ describe('ChatContext', () => {
   afterEach(cleanup);
   const chatClient = getTestClient();
   it('exposes the chat context', async () => {
-    let context;
+    let context: ChatContextValue = {} as ChatContextValue;
 
     render(
       <Chat client={chatClient}>
@@ -109,7 +111,7 @@ describe('ChatContext', () => {
   });
 
   it('calls setActiveChannel to set a new channel in context', async () => {
-    let context;
+    let context: ChatContextValue = {} as ChatContextValue;
 
     render(
       <Chat client={chatClient}>
@@ -124,7 +126,11 @@ describe('ChatContext', () => {
     const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
 
     await waitFor(() => expect(context.channel).toBeUndefined());
-    act(() => context.setActiveChannel(channel));
+    act(() =>
+      context.setActiveChannel(
+        channel as unknown as Parameters<typeof context.setActiveChannel>[0],
+      ),
+    );
 
     await waitFor(() => expect(context.channel).toStrictEqual(channel));
   });
@@ -138,7 +144,7 @@ describe('TranslationContext', () => {
 
   const chatClient = getTestClient();
   it('exposes the translation context', async () => {
-    let context;
+    let context: TranslationContextValue = {} as TranslationContextValue;
 
     render(
       <Chat client={chatClient}>
@@ -158,12 +164,12 @@ describe('TranslationContext', () => {
   });
 
   it('uses the i18nInstance provided in props', async () => {
-    let context;
+    let context: TranslationContextValue = {} as TranslationContextValue;
     const i18nInstance = new Streami18n();
     const { t, tDateTimeParser } = await i18nInstance.getTranslators();
 
-    i18nInstance.t = () => 't';
-    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
+    i18nInstance.t = (() => 't') as typeof i18nInstance.t;
+    i18nInstance.tDateTimeParser = (() => 'tDateTimeParser') as typeof i18nInstance.tDateTimeParser;
 
     render(
       <Chat client={chatClient} i18nInstance={i18nInstance}>
@@ -184,11 +190,11 @@ describe('TranslationContext', () => {
   });
 
   it('updates the context when props change', async () => {
-    let context;
+    let context: TranslationContextValue = {} as TranslationContextValue;
     const i18nInstance = new Streami18n();
 
-    i18nInstance.t = () => 't';
-    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
+    i18nInstance.t = (() => 't') as typeof i18nInstance.t;
+    i18nInstance.tDateTimeParser = (() => 'tDateTimeParser') as typeof i18nInstance.tDateTimeParser;
 
     const { rerender } = render(
       <Chat client={chatClient} i18nInstance={i18nInstance}>
@@ -207,8 +213,9 @@ describe('TranslationContext', () => {
 
     const newI18nInstance = new Streami18n();
 
-    newI18nInstance.t = () => 'newT';
-    newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser';
+    newI18nInstance.t = (() => 'newT') as typeof newI18nInstance.t;
+    newI18nInstance.tDateTimeParser = (() =>
+      'newtDateTimeParser') as typeof newI18nInstance.tDateTimeParser;
 
     rerender(
       <Chat client={chatClient} i18nInstance={newI18nInstance}>
@@ -233,15 +240,15 @@ describe('TranslationContext', () => {
     // initial mount and render
     const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport key={1} />);
 
-    let unsubscribeSpy;
-    let listenersAfterInitialMount;
-    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
+    let unsubscribeSpy: jest.SpyInstance | undefined;
+    let listenersAfterInitialMount: Array<unknown> = [];
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
       unsubscribeSpy = jest.spyOn(
-        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
-        'unsubscribe',
+        chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object,
+        'unsubscribe' as never,
       );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
@@ -264,15 +271,15 @@ describe('TranslationContext', () => {
     // initial render
     const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    let unsubscribeSpy;
-    let listenersAfterInitialMount;
-    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
+    let unsubscribeSpy: jest.SpyInstance | undefined;
+    let listenersAfterInitialMount: Array<unknown> = [];
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
       unsubscribeSpy = jest.spyOn(
-        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
-        'unsubscribe',
+        chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object,
+        'unsubscribe' as never,
       );
       listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
     });
@@ -299,14 +306,14 @@ describe('TranslationContext', () => {
     // initial render
     const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    let unsubscribeSpy;
-    const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init');
+    let unsubscribeSpy: jest.SpyInstance | undefined;
+    const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init');
 
     await waitFor(() => {
       // the unsubscribe fn changes during init(), so we keep a reference to the spy
       unsubscribeSpy = jest.spyOn(
-        chatClientWithUser.offlineDb.syncManager.connectionChangedListener,
-        'unsubscribe',
+        chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object,
+        'unsubscribe' as never,
       );
     });
 

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

@@ -88,15 +88,13 @@ describe('ImageGallery', () => {
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
-        message={
-          generateMessage({
-            attachments: [
-              generateImageAttachment(),
-              generateGiphyAttachment(),
-              generateVideoAttachment({ type: 'video' }),
-            ],
-          }) as unknown as LocalMessage
-        }
+        message={generateMessage({
+          attachments: [
+            generateImageAttachment(),
+            generateGiphyAttachment(),
+            generateVideoAttachment({ type: 'video' }),
+          ],
+        })}
       />,
     );
 
@@ -111,11 +109,9 @@ describe('ImageGallery', () => {
 
     render(
       <ImageGalleryComponent
-        message={
-          generateMessage({
-            attachments: [generateImageAttachment()],
-          }) as unknown as LocalMessage
-        }
+        message={generateMessage({
+          attachments: [generateImageAttachment()],
+        })}
       />,
     );
 

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

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
-import { Attachment, LocalMessage } from 'stream-chat';
+import { Attachment } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
@@ -53,7 +53,7 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
     messages: [
       generateMessage({
         attachments: [attachment],
-      }) as unknown as LocalMessage,
+      }),
     ],
     selectedAttachmentUrl: attachment.asset_url,
   });
@@ -95,7 +95,7 @@ const ImageGalleryComponentImage = (
     messages: [
       generateMessage({
         attachments: [props.attachment],
-      }) as unknown as LocalMessage,
+      }),
     ],
     selectedAttachmentUrl: props.attachment.image_url as string,
   });

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

@@ -17,7 +17,8 @@ import {
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store';
-import { ImageGalleryGrid, ImageGalleryGridProps } from '../components/ImageGrid';
+import { ImageGalleryGrid } from '../components/ImageGrid';
+import type { ImageGalleryGridProps } from '../components/types';
 
 const ImageGalleryGridComponent = (
   props: Partial<ImageGalleryGridProps> & { message: LocalMessage },
@@ -54,7 +55,7 @@ describe('ImageGalleryGrid', () => {
   it('should render ImageGalleryGrid', async () => {
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateImageAttachment()],
-    }) as unknown as LocalMessage;
+    });
 
     render(<ImageGalleryGridComponent message={message} />);
 
@@ -66,7 +67,7 @@ describe('ImageGalleryGrid', () => {
   it('should render ImageGalleryGrid individual images', async () => {
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
-    }) as unknown as LocalMessage;
+    });
 
     render(<ImageGalleryGridComponent message={message} />);
 
@@ -81,7 +82,7 @@ describe('ImageGalleryGrid', () => {
 
     const message = generateMessage({
       attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
-    }) as unknown as LocalMessage;
+    });
 
     render(<ImageGalleryGridComponent closeGridView={closeGridViewMock} message={message} />);
 

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

@@ -4,8 +4,6 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
-import { LocalMessage } from 'stream-chat';
-
 import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../../components/ImageGallery/components/ImageGalleryHeader';
 import {
   ImageGalleryContext,
@@ -36,7 +34,7 @@ const ImageGalleryComponent = (props: ImageGalleryProps) => {
   const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore());
   const attachment = generateImageAttachment();
   imageGalleryStateStore.openImageGallery({
-    messages: [generateMessage({ attachments: [attachment] }) as unknown as LocalMessage],
+    messages: [generateMessage({ attachments: [attachment] })],
     selectedAttachmentUrl: attachment.image_url,
   });
 
@@ -77,9 +75,12 @@ describe('ImageGalleryHeader', () => {
     const setOverlayMock = jest.fn();
     const user = userEvent.setup();
 
-    jest.spyOn(overlayContext, 'useOverlayContext').mockImplementation(() => ({
-      setOverlay: setOverlayMock,
-    }));
+    jest.spyOn(overlayContext, 'useOverlayContext').mockImplementation(
+      () =>
+        ({
+          setOverlay: setOverlayMock,
+        }) as unknown as ReturnType<typeof overlayContext.useOverlayContext>,
+    );
 
     render(<ImageGalleryComponent />);
 

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

@@ -3,8 +3,6 @@ import { SharedValue, useSharedValue } from 'react-native-reanimated';
 
 import { render, renderHook, waitFor } from '@testing-library/react-native';
 
-import { LocalMessage } from 'stream-chat';
-
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -19,11 +17,14 @@ const ImageGalleryComponentWrapper = ({ children }: PropsWithChildren) => {
   const initialImageGalleryStateStore = new ImageGalleryStateStore();
   const attachment = generateImageAttachment();
   initialImageGalleryStateStore.openImageGallery({
-    message: generateMessage({
-      attachments: [attachment],
-      user: {},
-    }) as unknown as LocalMessage,
-    selectedAttachmentUrl: attachment.url,
+    messages: [
+      generateMessage({
+        attachments: [attachment],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        user: {} as any,
+      }),
+    ],
+    selectedAttachmentUrl: (attachment as unknown as { url?: string }).url,
   });
 
   const [imageGalleryStateStore] = useState(initialImageGalleryStateStore);
@@ -49,12 +50,7 @@ it('doesnt fail if fromNow is not available on first render', async () => {
     });
     const { getAllByText } = render(
       <ImageGalleryComponentWrapper>
-        <ImageGalleryHeader
-          // @ts-ignore
-          opacity={sharedValueOpacity}
-          // @ts-ignore
-          visible={sharedValueVisible}
-        />
+        <ImageGalleryHeader opacity={sharedValueOpacity!} visible={sharedValueVisible!} />
       </ImageGalleryComponentWrapper>,
     );
     await waitFor(() => {

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -46,7 +46,9 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
       );
     default:
       return (
-        <Text style={[{ color: semantics.textSecondary }, messageContainer]}>No items exist</Text>
+        <Text style={[{ color: semantics.textSecondary }, messageContainer]}>
+          {t('No items exist')}
+        </Text>
       );
   }
 };

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

@@ -4,7 +4,9 @@ import { Pressable, Text, View } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
+import type { ComponentOverrides } from '../../../../contexts/componentsContext/ComponentsContext';
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 import { MessageListItemProvider } from '../../../../contexts/messageListItemContext/MessageListItemContext';
@@ -24,7 +26,7 @@ import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles
 import { Message } from '../../Message';
 import { MessageOverlayWrapper } from '../../MessageOverlayWrapper';
 
-const OverlayStateText = ({ label }) => {
+const OverlayStateText = ({ label }: { label: string }) => {
   const shouldUseOverlayStyles = useShouldUseOverlayStyles();
 
   return <Text>{`${label}:${shouldUseOverlayStyles ? 'overlay' : 'normal'}`}</Text>;
@@ -54,9 +56,14 @@ const CustomMessageItemView = () => (
 );
 
 describe('Message', () => {
-  let channel;
-  let chatClient;
-  let renderMessage;
+  let channel: ChannelType;
+  let chatClient: StreamChat;
+  let renderMessage: (
+    options: Omit<React.ComponentProps<typeof Message>, 'groupStyles'> &
+      Partial<Pick<React.ComponentProps<typeof Message>, 'groupStyles'>>,
+    channelProps?: Partial<React.ComponentProps<typeof Channel>>,
+    componentOverrides?: ComponentOverrides,
+  ) => ReturnType<typeof render>;
 
   const user = generateUser({ id: 'id', name: 'name' });
   const messages = [generateMessage({ user })];
@@ -70,19 +77,21 @@ describe('Message', () => {
 
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel.channel.id);
 
     renderMessage = (options, channelProps, componentOverrides) =>
       render(
         <SafeAreaProvider>
           <OverlayProvider>
             <MessageListItemProvider
-              value={{
-                goToMessage: jest.fn(),
-                modifiedTheme: {},
-                onThreadSelect: jest.fn(),
-                setNativeScrollability: jest.fn(),
-              }}
+              value={
+                {
+                  goToMessage: jest.fn(),
+                  modifiedTheme: {},
+                  onThreadSelect: jest.fn(),
+                  setNativeScrollability: jest.fn(),
+                } as unknown as React.ComponentProps<typeof MessageListItemProvider>['value']
+              }
             >
               <Chat client={chatClient}>
                 {componentOverrides ? (

package/src/components/Message/MessageItemView/__tests__/{MessageAuthor.test.js → MessageAuthor.test.tsx}

@@ -1,7 +1,10 @@
 import React from 'react';
 
 import { cleanup, render, screen, waitFor } 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 {
   generateMessage,
@@ -15,7 +18,7 @@ import { MessageAuthor } from '../MessageAuthor';
 afterEach(cleanup);
 
 describe('MessageAuthor', () => {
-  let chatClient;
+  let chatClient: StreamChat;
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser({ id: 'me' });
@@ -27,8 +30,8 @@ describe('MessageAuthor', () => {
       user: { ...staticUser, image: undefined },
     });
     render(
-      <Chat client={chatClient} style={defaultTheme}>
-        <MessageAuthor alignment='right' groupStyles={['bottom']} message={message} />
+      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+        <MessageAuthor message={message} />
       </Chat>,
     );
 
@@ -37,8 +40,8 @@ describe('MessageAuthor', () => {
     });
 
     screen.rerender(
-      <Chat client={chatClient} style={defaultTheme}>
-        <MessageAuthor alignment='right' groupStyles={[]} message={message} />
+      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+        <MessageAuthor message={message} />
       </Chat>,
     );
 
@@ -52,13 +55,8 @@ describe('MessageAuthor', () => {
     });
 
     screen.rerender(
-      <Chat client={chatClient} style={defaultTheme}>
-        <MessageAuthor
-          alignment='left'
-          groupStyles={['single']}
-          message={staticMessage}
-          showAvatar
-        />
+      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+        <MessageAuthor message={staticMessage} showAvatar />
       </Chat>,
     );
 

package/src/components/Message/MessageItemView/__tests__/{MessageContent.test.js → MessageContent.test.tsx}

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
@@ -22,10 +23,16 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
+import type { MessageFooterProps } from '../MessageFooter';
+import type { MessageHeaderProps } from '../MessageHeader';
+
 describe('MessageContent', () => {
-  let channel;
-  let chatClient;
-  let renderMessage;
+  let channel: ChannelType;
+  let chatClient: StreamChat;
+  let renderMessage: (
+    options: Omit<React.ComponentProps<typeof Message>, 'groupStyles'> &
+      Partial<Pick<React.ComponentProps<typeof Message>, 'groupStyles'>>,
+  ) => ReturnType<typeof render>;
 
   const user = generateUser({ id: 'id', name: 'name' });
   const messages = [generateMessage({ user })];
@@ -39,7 +46,7 @@ describe('MessageContent', () => {
 
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel.channel.id);
 
     renderMessage = (options) =>
       render(
@@ -112,7 +119,9 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
+    const ContextMessageHeader = (props: MessageHeaderProps) => (
+      <View {...props} testID='message-header' />
+    );
 
     render(
       <ChannelsStateProvider>
@@ -136,7 +145,9 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
+    const ContextMessageFooter = (props: MessageFooterProps) => (
+      <View {...props} testID='message-footer' />
+    );
 
     render(
       <ChannelsStateProvider>
@@ -272,10 +283,7 @@ describe('MessageContent', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({
-      message,
-      MessageFooter: null,
-    });
+    renderMessage({ message });
 
     await waitFor(() => {
       expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
@@ -441,7 +449,9 @@ describe('MessageContent', () => {
     const user = generateUser();
     const reaction = generateReaction();
     const message = generateMessage({
-      reaction_groups: { [reaction.type]: reaction },
+      reaction_groups: { [reaction.type]: reaction } as unknown as ReturnType<
+        typeof generateMessage
+      >['reaction_groups'],
       user,
     });
 
@@ -449,7 +459,7 @@ describe('MessageContent', () => {
       <ChannelsStateProvider>
         <Chat client={chatClient}>
           <Channel channel={channel}>
-            <Message groupStyles={['bottom']} message={message} reactionsEnabled />
+            <Message groupStyles={['bottom']} message={message} />
           </Channel>
         </Chat>
       </ChannelsStateProvider>,

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

@@ -4,8 +4,10 @@ import { StyleSheet, Text } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import type { ComponentOverrides } from '../../../../contexts/componentsContext/ComponentsContext';
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 
@@ -25,9 +27,14 @@ import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
 
 describe('MessageItemView', () => {
-  let channel;
-  let chatClient;
-  let renderMessage;
+  let channel: ChannelType;
+  let chatClient: StreamChat;
+  let renderMessage: (
+    options: Omit<React.ComponentProps<typeof Message>, 'groupStyles'> &
+      Partial<Pick<React.ComponentProps<typeof Message>, 'groupStyles'>>,
+    channelProps?: Partial<React.ComponentProps<typeof Channel>>,
+    componentOverrides?: ComponentOverrides,
+  ) => ReturnType<typeof render>;
 
   const user = generateUser({ id: 'id', name: 'name' });
   const messages = [generateMessage({ user })];
@@ -41,7 +48,7 @@ describe('MessageItemView', () => {
 
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel.channel.id);
 
     renderMessage = (options, channelProps, componentOverrides) =>
       render(