stream-chat-react-native-core 5.40.0-rc.2 → 5.40.0

package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts

@@ -12,7 +12,10 @@ import { getChannel } from '../../utils';
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
-
+    onMessageNew?: (
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      event: Event<StreamChatGenerics>,
+    ) => void;
     onNewMessageNotification?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
@@ -22,6 +25,7 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
 export const useNewMessageNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  onMessageNew,
   onNewMessageNotification,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
@@ -29,7 +33,12 @@ export const useNewMessageNotification = <
 
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
-      if (typeof onNewMessageNotification === 'function') {
+      if (typeof onMessageNew === 'function') {
+        onMessageNew(setChannels, event);
+        console.warn(
+          'onMessageNew is deprecated and will be removed in future release. Please use onNewMessageNotification to establish the same behaviour',
+        );
+      } else if (typeof onNewMessageNotification === 'function') {
         onNewMessageNotification(setChannels, event);
       } else {
         if (event.channel?.id && event.channel?.type) {

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -1,11 +1,20 @@
 import { useEffect, useState } from 'react';
 
 import { TFunction } from 'i18next';
-import type { Channel, ChannelState, MessageResponse, StreamChat, UserResponse } from 'stream-chat';
+import type {
+  Channel,
+  ChannelState,
+  MessageResponse,
+  PollState,
+  PollVote,
+  StreamChat,
+  UserResponse,
+} from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
+import { useStateStore } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { stringifyMessage } from '../../../utils/utils';
@@ -28,6 +37,18 @@ export type LatestMessagePreview<
   created_at?: string | Date;
 };
 
+export type LatestMessagePreviewSelectorReturnType = {
+  created_by?: UserResponse | null;
+  latest_votes_by_option?: Record<string, PollVote[]>;
+};
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: PollState<StreamChatGenerics>,
+): LatestMessagePreviewSelectorReturnType => ({
+  created_by: nextValue.created_by,
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+});
+
 const getMessageSenderName = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -77,6 +98,7 @@ const getLatestMessageDisplayText = <
   client: StreamChat<StreamChatGenerics>,
   message: LatestMessage<StreamChatGenerics> | undefined,
   t: (key: string) => string,
+  pollState: LatestMessagePreviewSelectorReturnType | undefined,
 ) => {
   if (!message) return [{ bold: false, text: t('Nothing yet...') }];
   const isMessageTypeDeleted = message.type === 'deleted';
@@ -123,6 +145,28 @@ const getLatestMessageDisplayText = <
       { bold: false, text: t('🏙 Attachment...') },
     ];
   }
+  if (message.poll && pollState) {
+    const { created_by, latest_votes_by_option } = pollState;
+    let latestVotes;
+    if (latest_votes_by_option) {
+      latestVotes = Object.values(latest_votes_by_option)
+        .map((votes) => votes?.[0])
+        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+    }
+    let previewAction = 'created';
+    let previewUser = created_by;
+    if (latestVotes && latestVotes.length && latestVotes[0]?.user) {
+      previewAction = 'voted';
+      previewUser = latestVotes[0]?.user;
+    }
+    const previewMessage = `${
+      client.userID === previewUser?.id ? 'You' : previewUser?.name
+    } ${previewAction}: ${message.poll.name}`;
+    return [
+      { bold: false, text: '📊 ' },
+      { bold: false, text: previewMessage },
+    ];
+  }
   return [
     { bold: boldOwner, text: messageSenderText },
     { bold: false, text: t('Empty message...') },
@@ -171,13 +215,14 @@ const getLatestMessagePreview = <
 >(params: {
   channel: Channel<StreamChatGenerics>;
   client: StreamChat<StreamChatGenerics>;
+  pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
   lastMessage?:
     | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
     | MessageResponse<StreamChatGenerics>;
 }) => {
-  const { channel, client, lastMessage, readEvents, t } = params;
+  const { channel, client, lastMessage, pollState, readEvents, t } = params;
 
   const messages = channel.state.messages;
 
@@ -202,7 +247,7 @@ const getLatestMessagePreview = <
   return {
     created_at: message?.created_at,
     messageObject: message,
-    previews: getLatestMessageDisplayText(channel, client, message, t),
+    previews: getLatestMessageDisplayText(channel, client, message, t, pollState),
     status: getLatestMessageReadStatus(channel, client, message, readEvents),
   };
 };
@@ -261,6 +306,12 @@ export const useLatestMessagePreview = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channelConfigExists]);
 
+  const pollId = lastMessage?.poll_id ?? '';
+  const poll = client.polls.fromState(pollId);
+  const pollState: LatestMessagePreviewSelectorReturnType =
+    useStateStore(poll?.state, selector) ?? {};
+  const { created_by, latest_votes_by_option } = pollState;
+
   useEffect(
     () =>
       setLatestMessagePreview(
@@ -268,12 +319,20 @@ export const useLatestMessagePreview = <
           channel,
           client,
           lastMessage: translatedLastMessage,
+          pollState,
           readEvents,
           t,
         }),
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelLastMessageString, forceUpdate, readEvents, readStatus],
+    [
+      channelLastMessageString,
+      forceUpdate,
+      readEvents,
+      readStatus,
+      latest_votes_by_option,
+      created_by,
+    ],
   );
 
   return latestMessagePreview;

package/src/components/Chat/Chat.tsx

@@ -24,10 +24,11 @@ import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
 
 import { SDK } from '../../native';
-import { SqliteClient } from '../../store/SqliteClient';
+import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DBSyncManager } from '../../utils/DBSyncManager';
 import type { Streami18n } from '../../utils/i18n/Streami18n';
+import { StreamChatRN } from '../../utils/StreamChatRN';
 import { version } from '../../version.json';
 
 init();
@@ -35,7 +36,7 @@ init();
 export type ChatProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>> & {
+  Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent' | 'resizableCDNHosts'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -142,6 +143,7 @@ const ChatWithContext = <
     enableOfflineSupport = false,
     i18nInstance,
     ImageComponent = Image,
+    resizableCDNHosts = ['.stream-io-cdn.com'],
     style,
   } = props;
 
@@ -176,6 +178,9 @@ const ChatWithContext = <
 
   const userID = client.userID;
 
+  // Set the `resizableCDNHosts` as per the prop.
+  StreamChatRN.setConfig({ resizableCDNHosts });
+
   useEffect(() => {
     if (client) {
       client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);
@@ -203,7 +208,7 @@ const ChatWithContext = <
       // issues we've encountered before with the QuickSqliteClient being
       // uninitialized before it's being invoked.
       setInitialisedDatabaseConfig({ initialised: false, userID });
-      SqliteClient.initializeDatabase();
+      QuickSqliteClient.initializeDatabase();
       setInitialisedDatabaseConfig({ initialised: true, userID });
       DBSyncManager.init(client as unknown as StreamChat);
     }
@@ -214,9 +219,11 @@ const ChatWithContext = <
     if (!client) return;
 
     client.threads.registerSubscriptions();
+    client.polls.registerSubscriptions();
 
     return () => {
       client.threads.unregisterSubscriptions();
+      client.polls.unregisterSubscriptions();
     };
   }, [client]);
 
@@ -238,6 +245,7 @@ const ChatWithContext = <
     ImageComponent,
     isOnline,
     mutedUsers,
+    resizableCDNHosts,
     setActiveChannel,
   });
 

package/src/components/Chat/__tests__/Chat.test.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import NetInfo from '@react-native-community/netinfo';
-
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -44,6 +43,8 @@ describe('Chat', () => {
 
   it('listens and updates state on a connection changed event', async () => {
     let context;
+    const netInfoFetch = jest.fn();
+    setNetInfoFetchMock(netInfoFetch);
 
     render(
       <Chat client={chatClient}>
@@ -55,7 +56,7 @@ describe('Chat', () => {
       </Chat>,
     );
 
-    await waitFor(() => expect(NetInfo.fetch).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
 
     const { connectionRecovering } = context;
     act(() => dispatchConnectionChangedEvent(chatClient, false));
@@ -82,221 +83,215 @@ describe('Chat', () => {
 
     await waitFor(() => expect(context.connectionRecovering).toStrictEqual(false));
   });
-});
-
-describe('ChatContext', () => {
-  afterEach(cleanup);
-  const chatClient = getTestClient();
-  it('exposes the chat context', async () => {
-    let context;
 
-    render(
-      <Chat client={chatClient}>
-        <ChatContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></ChatContextConsumer>
-      </Chat>,
-    );
+  describe('ChatContext', () => {
+    it('exposes the chat context', async () => {
+      let context;
+
+      render(
+        <Chat client={chatClient}>
+          <ChatContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></ChatContextConsumer>
+        </Chat>,
+      );
 
-    await waitFor(() => {
-      expect(context).toBeInstanceOf(Object);
-      expect(context.channel).toBeUndefined();
-      expect(context.client).toBe(chatClient);
-      expect(context.connectionRecovering).toBeFalsy();
-      expect(context.setActiveChannel).toBeInstanceOf(Function);
+      await waitFor(() => {
+        expect(context).toBeInstanceOf(Object);
+        expect(context.channel).toBeUndefined();
+        expect(context.client).toBe(chatClient);
+        expect(context.connectionRecovering).toBeFalsy();
+        expect(context.setActiveChannel).toBeInstanceOf(Function);
+      });
     });
-  });
-
-  it('calls setActiveChannel to set a new channel in context', async () => {
-    let context;
 
-    render(
-      <Chat client={chatClient}>
-        <ChatContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></ChatContextConsumer>
-      </Chat>,
-    );
-
-    const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
-
-    await waitFor(() => expect(context.channel).toBeUndefined());
-    act(() => context.setActiveChannel(channel));
+    it('calls setActiveChannel to set a new channel in context', async () => {
+      let context;
+
+      render(
+        <Chat client={chatClient}>
+          <ChatContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></ChatContextConsumer>
+        </Chat>,
+      );
 
-    await waitFor(() => expect(context.channel).toStrictEqual(channel));
-  });
-});
+      const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
 
-describe('TranslationContext', () => {
-  beforeEach(() => {
-    jest.spyOn(DBSyncManager, 'init');
-  });
+      await waitFor(() => expect(context.channel).toBeUndefined());
+      act(() => context.setActiveChannel(channel));
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-  const chatClient = getTestClient();
-  it('exposes the translation context', async () => {
-    let context;
-
-    render(
-      <Chat client={chatClient}>
-        <TranslationContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></TranslationContextConsumer>
-      </Chat>,
-    );
-
-    await waitFor(() => {
-      expect(context).toBeInstanceOf(Object);
-      expect(context.t).toBeInstanceOf(Function);
-      expect(context.tDateTimeParser).toBeInstanceOf(Function);
+      await waitFor(() => expect(context.channel).toStrictEqual(channel));
     });
   });
 
-  it('uses the i18nInstance provided in props', async () => {
-    let context;
-    const i18nInstance = new Streami18n();
-    const { t, tDateTimeParser } = await i18nInstance.getTranslators();
-
-    i18nInstance.t = () => 't';
-    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
-
-    render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <TranslationContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></TranslationContextConsumer>
-      </Chat>,
-    );
+  describe('TranslationContext', () => {
+    it('exposes the translation context', async () => {
+      let context;
+
+      render(
+        <Chat client={chatClient}>
+          <TranslationContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></TranslationContextConsumer>
+        </Chat>,
+      );
 
-    await waitFor(() => {
-      expect(context.t).not.toBe(t);
-      expect(context.t).toBe(i18nInstance.t);
-      expect(context.tDateTimeParser).not.toBe(tDateTimeParser);
-      expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
+      await waitFor(() => {
+        expect(context).toBeInstanceOf(Object);
+        expect(context.t).toBeInstanceOf(Function);
+        expect(context.tDateTimeParser).toBeInstanceOf(Function);
+      });
     });
-  });
-
-  it('updates the context when props change', async () => {
-    let context;
-    const i18nInstance = new Streami18n();
-
-    i18nInstance.t = () => 't';
-    i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
 
-    const { rerender } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <TranslationContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></TranslationContextConsumer>
-      </Chat>,
-    );
+    it('uses the i18nInstance provided in props', async () => {
+      let context;
+      const i18nInstance = new Streami18n();
+      const { t, tDateTimeParser } = await i18nInstance.getTranslators();
+
+      i18nInstance.t = () => 't';
+      i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
+
+      render(
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <TranslationContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></TranslationContextConsumer>
+        </Chat>,
+      );
 
-    await waitFor(() => {
-      expect(context.t).toBe(i18nInstance.t);
-      expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
+      await waitFor(() => {
+        expect(context.t).not.toBe(t);
+        expect(context.t).toBe(i18nInstance.t);
+        expect(context.tDateTimeParser).not.toBe(tDateTimeParser);
+        expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
+      });
     });
 
-    const newI18nInstance = new Streami18n();
-
-    newI18nInstance.t = () => 'newT';
-    newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser';
+    it('updates the context when props change', async () => {
+      let context;
+      const i18nInstance = new Streami18n();
+
+      i18nInstance.t = () => 't';
+      i18nInstance.tDateTimeParser = () => 'tDateTimeParser';
+
+      const { rerender } = render(
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <TranslationContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></TranslationContextConsumer>
+        </Chat>,
+      );
 
-    rerender(
-      <Chat client={chatClient} i18nInstance={newI18nInstance}>
-        <TranslationContextConsumer
-          fn={(ctx) => {
-            context = ctx;
-          }}
-        ></TranslationContextConsumer>
-      </Chat>,
-    );
-    await waitFor(() => {
-      expect(context.t).not.toBe(i18nInstance.t);
-      expect(context.t).toBe(newI18nInstance.t);
-      expect(context.tDateTimeParser).not.toBe(i18nInstance.tDateTimeParser);
-      expect(context.tDateTimeParser).toBe(newI18nInstance.tDateTimeParser);
-    });
-  });
+      await waitFor(() => {
+        expect(context.t).toBe(i18nInstance.t);
+        expect(context.tDateTimeParser).toBe(i18nInstance.tDateTimeParser);
+      });
 
-  it('makes sure DBSyncManager listeners are cleaned up after Chat remount', async () => {
-    const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+      const newI18nInstance = new Streami18n();
 
-    // initial mount and render
-    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport key={1} />);
+      newI18nInstance.t = () => 'newT';
+      newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser';
 
-    // the unsubscribe fn changes during init(), so we keep a reference to the spy
-    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+      rerender(
+        <Chat client={chatClient} i18nInstance={newI18nInstance}>
+          <TranslationContextConsumer
+            fn={(ctx) => {
+              context = ctx;
+            }}
+          ></TranslationContextConsumer>
+        </Chat>,
+      );
+      await waitFor(() => {
+        expect(context.t).not.toBe(i18nInstance.t);
+        expect(context.t).toBe(newI18nInstance.t);
+        expect(context.tDateTimeParser).not.toBe(i18nInstance.tDateTimeParser);
+        expect(context.tDateTimeParser).toBe(newI18nInstance.tDateTimeParser);
+      });
+    });
 
-    // remount
-    rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
+    it('makes sure DBSyncManager listeners are cleaned up after Chat remount', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+      jest.spyOn(DBSyncManager, 'init');
 
-    await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
-      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-        listenersAfterInitialMount.length,
+      // initial mount and render
+      const { rerender } = render(
+        <Chat client={chatClientWithUser} enableOfflineSupport key={1} />,
       );
-    });
-  });
 
-  it('makes sure DBSyncManager listeners are cleaned up if the user changes', async () => {
-    const chatClientWithUser = await getTestClientWithUser({ id: 'testID1' });
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
 
-    // initial render
-    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+      // remount
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport key={2} />);
 
-    // the unsubscribe fn changes during init(), so we keep a reference to the spy
-    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-    await act(async () => {
-      await setUser(chatClientWithUser, { id: 'testID2' });
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(2);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
     });
-    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
-
-    // rerender with different user ID
-    rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
-      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-        listenersAfterInitialMount.length,
-      );
+    it('makes sure DBSyncManager listeners are cleaned up if the user changes', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID1' });
+      jest.spyOn(DBSyncManager, 'init');
+
+      // initial render
+      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      await act(async () => {
+        await setUser(chatClientWithUser, { id: 'testID2' });
+      });
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+
+      // rerender with different user ID
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
+
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(2);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(1);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
     });
-  });
 
-  it('makes sure DBSyncManager state stays intact during normal rerenders', async () => {
-    const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+    it('makes sure DBSyncManager state stays intact during normal rerenders', async () => {
+      const chatClientWithUser = await getTestClientWithUser({ id: 'testID' });
+      jest.spyOn(DBSyncManager, 'init');
 
-    // initial render
-    const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
+      // initial render
+      const { rerender } = render(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    // the unsubscribe fn changes during init(), so we keep a reference to the spy
-    const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
-    const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
+      // the unsubscribe fn changes during init(), so we keep a reference to the spy
+      const unsubscribeSpy = jest.spyOn(DBSyncManager.connectionChangedListener, 'unsubscribe');
+      const listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed'];
 
-    // rerender
-    rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
+      // rerender
+      rerender(<Chat client={chatClientWithUser} enableOfflineSupport />);
 
-    await waitFor(() => {
-      expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
-      expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
-      expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
-        listenersAfterInitialMount.length,
-      );
+      await waitFor(() => {
+        expect(DBSyncManager.init).toHaveBeenCalledTimes(1);
+        expect(unsubscribeSpy).toHaveBeenCalledTimes(0);
+        expect(chatClientWithUser.listeners['connection.changed'].length).toBe(
+          listenersAfterInitialMount.length,
+        );
+      });
     });
   });
 });