stream-chat-react-native-core 9.10.2-beta.1 → 10.0.0-rc.2

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

@@ -22,7 +22,7 @@ describe('MessageSystem', () => {
   afterEach(cleanup);
 
   it('should render the message system', async () => {
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const message = generateMessage();
     const { queryByTestId } = render(
       <ThemeProvider
@@ -42,7 +42,7 @@ describe('MessageSystem', () => {
   });
 
   it('should match the snapshot for message system', async () => {
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const user = generateStaticUser(0);
     const message = generateStaticMessage('Hello World', { user });
     render(

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

@@ -1,10 +1,17 @@
 import React from 'react';
 
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
+import { nowNs } from 'stream-chat';
 
+import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
+import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
 
@@ -18,10 +25,10 @@ describe('ScrollToBottomButton', () => {
 
   it('should render nothing if showNotification is false', async () => {
     const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const { queryByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators as TranslationContextValue}>
+        <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
           <ScrollToBottomButton onPress={() => null} showNotification={false} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -34,10 +41,10 @@ describe('ScrollToBottomButton', () => {
 
   it('should render if showNotification is true', async () => {
     const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const { queryByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators as TranslationContextValue}>
+        <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
           <ScrollToBottomButton onPress={() => null} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -50,11 +57,11 @@ describe('ScrollToBottomButton', () => {
 
   it('should trigger onPress when pressed', async () => {
     const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const onPress = jest.fn();
     const { getByTestId } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators as TranslationContextValue}>
+        <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
           <ScrollToBottomButton onPress={onPress} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -64,13 +71,31 @@ describe('ScrollToBottomButton', () => {
   });
 
   it('should display the unread count', async () => {
-    const t = jest.fn((key: string) => key);
+    const t = jest.fn((key: string, d?: unknown) => (typeof d === 'string' ? d : key));
     const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
+    // The button reads OUR user's count from `channel.state` (a v10 reactive StateStore) via
+    // `useStateStore`, keyed by the chat client's userID. Seed the `read` slice with 3 unread
+    // for that user.
+    const channel = {
+      state: generateChannelState({
+        read: {
+          me: {
+            last_read: nowNs(),
+            unread_messages: 3,
+            user: { id: 'me' },
+          },
+        },
+      }),
+    };
     const { getByTestId, getByText } = render(
       <ThemeProvider>
         <TranslationProvider value={{ ...translators, t } as unknown as TranslationContextValue}>
-          <ScrollToBottomButton onPress={() => null} showNotification={true} unreadCount={3} />
+          <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+            <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
+              <ScrollToBottomButton onPress={() => null} showNotification={true} />
+            </ChannelProvider>
+          </ChatProvider>
         </TranslationProvider>
       </ThemeProvider>,
     );
@@ -82,10 +107,10 @@ describe('ScrollToBottomButton', () => {
 
   it('should render the message notification and match snapshot', async () => {
     const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
+    const translators = await i18nInstance.init();
     const { toJSON } = render(
       <ThemeProvider>
-        <TranslationProvider value={translators as TranslationContextValue}>
+        <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
           <ScrollToBottomButton onPress={() => null} showNotification={true} />
         </TranslationProvider>
       </ThemeProvider>,
@@ -99,4 +124,31 @@ describe('ScrollToBottomButton', () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  it.each([
+    [1, 'Scroll to bottom, 1 new message'],
+    [3, 'Scroll to bottom, 3 new messages'],
+  ])('labels the button for %i unread messages as "%s"', async (unreadMessages, label) => {
+    const translators = await new Streami18n().init();
+    const channel = {
+      state: generateChannelState({
+        read: { me: { last_read: nowNs(), unread_messages: unreadMessages, user: { id: 'me' } } },
+      }),
+    };
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <AccessibilityProvider value={{ enabled: true }}>
+          <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
+            <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+              <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
+                <ScrollToBottomButton onPress={() => null} showNotification={true} />
+              </ChannelProvider>
+            </ChatProvider>
+          </TranslationProvider>
+        </AccessibilityProvider>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('scroll-to-bottom-button').props.accessibilityLabel).toBe(label);
+  });
 });

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

@@ -2,34 +2,38 @@ 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 type { TypingUsersState } from 'stream-chat';
 
+import { ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
+import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
-import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { TypingIndicator } from '../TypingIndicator';
 
 afterEach(cleanup);
 
 describe('TypingIndicator', () => {
-  let chatClient: StreamChat;
-
   it('should render typing indicator for two users', async () => {
     const user0 = generateUser();
     const user1 = generateUser();
     const user2 = generateUser();
 
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = { user1: { user: user1 }, user2: { user: user2 } };
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: user0 });
+    channel.state.partialNext({
+      typing: {
+        user1: { user: user1 },
+        user2: { user: user2 },
+      } as unknown as TypingUsersState['typing'],
+    });
 
     const { getAllByTestId, getByTestId } = render(
-      <Chat client={chatClient}>
-        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
+      <Chat client={client}>
+        <ChannelProvider value={{ channel } as never}>
           <TypingIndicator />
-        </TypingProvider>
+        </ChannelProvider>
       </Chat>,
     );
     await waitFor(() => {
@@ -42,15 +46,19 @@ describe('TypingIndicator', () => {
     const user0 = generateUser();
     const user1 = generateUser();
 
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = { user1: { user: user1 } };
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: user0 });
+    channel.state.partialNext({
+      typing: { user1: { user: user1 } } as unknown as TypingUsersState['typing'],
+    });
 
     const { getAllByTestId, getByTestId } = render(
-      <Chat client={chatClient}>
-        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
+      <Chat client={client}>
+        <ChannelProvider value={{ channel } as never}>
           <TypingIndicator />
-        </TypingProvider>
+        </ChannelProvider>
       </Chat>,
     );
     await waitFor(() => {
@@ -64,15 +72,22 @@ describe('TypingIndicator', () => {
     const user1 = generateStaticUser(1);
     const user2 = generateStaticUser(3);
 
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = { user1: { user: user1 }, user2: { user: user2 } };
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels({ customUser: user0 });
+    channel.state.partialNext({
+      typing: {
+        user1: { user: user1 },
+        user2: { user: user2 },
+      } as unknown as TypingUsersState['typing'],
+    });
 
     const { toJSON } = render(
-      <Chat client={chatClient}>
-        <TypingProvider value={{ typing: typing as unknown as Record<string, Event> }}>
+      <Chat client={client}>
+        <ChannelProvider value={{ channel } as never}>
           <TypingIndicator />
-        </TypingProvider>
+        </ChannelProvider>
       </Chat>,
     );
     await waitFor(() => {

package/src/components/MessageList/__tests__/buildMessageListWithNeighbours.test.ts

@@ -1,7 +1,10 @@
 import { LocalMessage } from 'stream-chat';
 
+import { convertDateToTimestamp } from '../../../mock-builders/generator/time';
+
 import {
   buildMessageListWithNeighbours,
+  getMessageListItemCacheKey,
   MessageListItemWithNeighbours,
 } from '../utils/buildMessageListWithNeighbours';
 
@@ -49,3 +52,33 @@ describe('buildMessageListWithNeighbours', () => {
     expect(row2.nextMessage?.id).toBe('m2');
   });
 });
+
+// The key is both the FlatList/FlashList render key and the neighbour-cache key, so it has to be
+// stable across renders and identical between the two uses. `created_at` is unix nanoseconds, which
+// makes the epoch `0` — a legitimate value that a truthiness guard mistakes for "absent".
+describe('getMessageListItemCacheKey', () => {
+  it('prefers the message id', () => {
+    expect(getMessageListItemCacheKey(createMessage('m1'), 3)).toBe('m1');
+  });
+
+  it('falls back to created_at for an id-less message', () => {
+    const message = {
+      created_at: convertDateToTimestamp('2026-01-01T15:53:00.000Z'),
+    } as LocalMessage;
+
+    expect(getMessageListItemCacheKey(message, 3)).toBe(String(message.created_at));
+  });
+
+  it('treats the epoch as a real timestamp rather than a missing one', () => {
+    // A truthiness guard skips `created_at` here and returns the index instead, which shifts as
+    // older pages load — and used to return `Date.now()`, a different key on every render.
+    const message = { created_at: 0 } as LocalMessage;
+
+    expect(getMessageListItemCacheKey(message, 3)).toBe('0');
+    expect(getMessageListItemCacheKey(message, 7)).toBe('0');
+  });
+
+  it('falls back to the index only when there is nothing else', () => {
+    expect(getMessageListItemCacheKey({} as LocalMessage, 3)).toBe('index-3');
+  });
+});

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

@@ -3,11 +3,13 @@ import { View } from 'react-native';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Channel as ChannelType, LocalMessage } from 'stream-chat';
+import type { Channel as ChannelType, LocalMessage, TimestampNS } from 'stream-chat';
+import { nsToMs } from 'stream-chat';
 
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
-import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
+import { useStateStore } from '../../../hooks/useStateStore';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
@@ -22,6 +24,7 @@ import { MessageList } from '../MessageList';
 
 const user = generateUser();
 const at = (day: number, hour: number) => new Date(Date.UTC(2026, 0, day, hour, 0, 0));
+const dayOf = (timestamp: TimestampNS) => new Date(nsToMs(timestamp)).toDateString();
 
 const message = (day: number, hour: number) =>
   generateMessage({ text: `message d${day} ${hour}h`, timestamp: at(day, hour), user });
@@ -54,10 +57,7 @@ const renderMessageList = async (
   await channel.watch();
 
   if (hasPrev !== undefined) {
-    const currentSet = channel.state.messageSets.find((set) => set.isCurrent);
-    if (currentSet) {
-      currentSet.pagination = { hasNext: false, hasPrev };
-    }
+    channel.messagePaginator.state.partialNext({ hasMoreTail: hasPrev });
   }
 
   const overrides = typeof components === 'function' ? components(channel) : components;
@@ -187,13 +187,16 @@ describe('a channel that writes a system message at every session boundary', ()
    * meaningful under it.
    *
    * The flag makes those days reachable - the separator is rendered on the marker, so the
-   * component override is invoked and can decide. The list is read from
-   * `PaginatedMessageListContext` rather than `channel.state` because that context value is
-   * memoized on a digest of the whole list, so the separator re-evaluates whenever the list
-   * changes, including for rows whose own neighbours did not.
+   * component override is invoked and can decide. The list is read from the channel's message
+   * paginator through `useStateStore`, so the separator re-evaluates whenever the list changes,
+   * including for rows whose own neighbours did not.
    */
   const SessionAwareDateSeparator = ({ date }: InlineDateSeparatorProps) => {
-    const { hasMore, messages } = usePaginatedMessageListContext();
+    const { channel } = useChannelContext();
+    const { hasMore, messages } = useStateStore(channel.messagePaginator.state, (state) => ({
+      hasMore: state.hasMoreTail,
+      messages: state.items ?? [],
+    }));
 
     if (!date) {
       return null;
@@ -201,11 +204,11 @@ describe('a channel that writes a system message at every session boundary', ()
 
     const day = date.toDateString();
     const hasRealMessage = messages.some(
-      (item: LocalMessage) => item.type !== 'system' && item.created_at.toDateString() === day,
+      (item: LocalMessage) => item.type !== 'system' && dayOf(item.created_at) === day,
     );
     // A day we have not finished loading may still gain a real message - keep it for now, or the
     // separator pops in mid-scroll once `loadMore` brings that day's messages in.
-    const dayIsPartiallyLoaded = day === messages[0]?.created_at.toDateString() && hasMore;
+    const dayIsPartiallyLoaded = !!messages[0] && day === dayOf(messages[0].created_at) && hasMore;
 
     if (!hasRealMessage && !dayIsPartiallyLoaded) {
       return null;
@@ -293,8 +296,8 @@ describe('reading the list from the channel instead of context', () => {
 
   /**
    * The same rule, written against the `channel` the integration already holds rather than the
-   * message list context. `hasMore` on `PaginatedMessageListContext` is set from
-   * `channel.state.messagePagination.hasPrev` at every call site, so the two are equivalent.
+   * paginator's store. The message list's `hasMore` is `channel.messagePaginator.hasMoreTail`, so
+   * the two are equivalent.
    */
   const channelBackedSeparator =
     (channel: ChannelType) =>
@@ -303,13 +306,15 @@ describe('reading the list from the channel instead of context', () => {
         return null;
       }
 
-      const { messages } = channel.state;
+      const messages = channel.messagePaginator.items ?? [];
       const day = date.toDateString();
       const hasRealMessage = messages.some(
-        (item) => item.type !== 'system' && item.created_at.toDateString() === day,
+        (item) => item.type !== 'system' && dayOf(item.created_at) === day,
       );
       const dayIsPartiallyLoaded =
-        day === messages[0]?.created_at.toDateString() && channel.state.messagePagination.hasPrev;
+        !!messages[0] &&
+        day === dayOf(messages[0].created_at) &&
+        channel.messagePaginator.hasMoreTail;
 
       if (!hasRealMessage && !dayIsPartiallyLoaded) {
         return null;

package/src/components/MessageList/__tests__/useMessageDateSeparator.test.ts

@@ -1,7 +1,8 @@
 import { renderHook } from '@testing-library/react-native';
 
-import { LocalMessage } from 'stream-chat';
+import { convertTimestampToDate, LocalMessage } from 'stream-chat';
 
+import { convertDateToTimestamp } from '../../../mock-builders/generator/time';
 import { useMessageDateSeparator } from '../hooks/useMessageDateSeparator';
 
 describe('useMessageDateSeparator', () => {
@@ -10,17 +11,17 @@ describe('useMessageDateSeparator', () => {
   beforeEach(() => {
     messages = [
       {
-        created_at: new Date('2020-01-01T00:00:00.000Z'),
+        created_at: convertDateToTimestamp('2020-01-01T00:00:00.000Z'),
         id: '1',
         text: 'Hello',
       },
       {
-        created_at: new Date('2020-01-02T00:00:00.000Z'),
+        created_at: convertDateToTimestamp('2020-01-02T00:00:00.000Z'),
         id: '2',
         text: 'World',
       },
       {
-        created_at: new Date('2020-01-03T00:00:00.000Z'),
+        created_at: convertDateToTimestamp('2020-01-03T00:00:00.000Z'),
         id: '3',
         text: 'Hello World',
       },
@@ -47,18 +48,18 @@ describe('useMessageDateSeparator', () => {
     const { result } = renderHook(() =>
       useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );
-    expect(result.current).toBe(messages[1].created_at);
+    expect(result.current).toEqual(convertTimestampToDate(messages[1].created_at));
   });
 
   it('should return undefined if the message is the same day as the previous message', () => {
     const messages = [
       {
-        created_at: new Date('2020-01-01T01:00:00.000Z'),
+        created_at: convertDateToTimestamp('2020-01-01T01:00:00.000Z'),
         id: '1',
         text: 'Hello',
       },
       {
-        created_at: new Date('2020-01-01T02:00:00.000Z'),
+        created_at: convertDateToTimestamp('2020-01-01T02:00:00.000Z'),
         id: '2',
         text: 'World',
       },
@@ -66,7 +67,7 @@ describe('useMessageDateSeparator', () => {
     const { result: resultOfFirstMessage } = renderHook(() =>
       useMessageDateSeparator({ message: messages[0], previousMessage: undefined }),
     );
-    expect(resultOfFirstMessage.current).toBe(messages[0].created_at);
+    expect(resultOfFirstMessage.current).toEqual(convertTimestampToDate(messages[0].created_at));
     const { result: resultOfSecondMessage } = renderHook(() =>
       useMessageDateSeparator({ message: messages[1], previousMessage: messages[0] }),
     );

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

@@ -1,66 +1,33 @@
-import React, { FC } from 'react';
-
 import { renderHook } from '@testing-library/react-native';
 
-import type { StreamChat } from 'stream-chat';
-
-import { useCreatePaginatedMessageListContext } from '../../../components/Channel/hooks/useCreatePaginatedMessageListContext';
-import {
-  ChatContext,
-  ChatContextValue,
-  PaginatedMessageListContextValue,
-  PaginatedMessageListProvider,
-} from '../../../contexts';
+import type { Channel, LocalMessage } from 'stream-chat';
 
+import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { generateUser } from '../../../mock-builders/generator/user';
-import { getTestClientWithUser } from '../../../mock-builders/mock';
-
 import { useMessageList } from '../hooks/useMessageList';
 
-const clientUser = generateUser();
-let chatClient: StreamChat;
-
-beforeEach(async () => {
-  chatClient = await getTestClientWithUser(clientUser);
-});
-
 const messages = new Array(10)
   .fill(undefined)
-  .map((_: undefined, id: number) => generateMessage({ id: String(id) }));
-
-const Providers: FC<{ children: React.ReactNode }> = ({ children }) => {
-  const messageListContext = useCreatePaginatedMessageListContext({
-    messages,
-  } as unknown as PaginatedMessageListContextValue);
-
-  return (
-    <ChatContext.Provider
-      value={
-        {
-          auto_translation_enabled: true,
-          client: chatClient,
-        } as unknown as ChatContextValue
-      }
-    >
-      <PaginatedMessageListProvider value={messageListContext}>
-        {children}
-      </PaginatedMessageListProvider>
-    </ChatContext.Provider>
-  );
-};
+  .map((_: undefined, id: number) =>
+    generateMessage({ id: String(id) }),
+  ) as unknown as LocalMessage[];
 
 describe('useMessageList', () => {
+  let channel: Channel;
+
+  beforeEach(async () => {
+    const {
+      channels: [ch],
+    } = await initiateClientWithChannels();
+    channel = ch;
+    // The message list is sourced reactively from channel.messagePaginator.
+    channel.messagePaginator.state.partialNext({ items: messages });
+  });
+
   it('should always return a list of reversed messages', () => {
-    const { result } = renderHook(
-      () =>
-        useMessageList({
-          noGroupByUser: true,
-          threadList: false,
-        } as unknown as Parameters<typeof useMessageList>[0]),
-      { wrapper: Providers },
-    );
-    const reversedMessages = messages.reverse();
+    const { result } = renderHook(() => useMessageList({ paginator: channel.messagePaginator }));
+
+    const reversedMessages = [...messages].reverse();
     expect(result.current.processedMessageList.map(({ id }) => id)).toEqual(
       reversedMessages.map(({ id }) => id),
     );

package/src/components/MessageList/hooks/__tests__/useMarkRead.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import type { Channel, LocalMessage, StreamChat } from 'stream-chat';
+import { msToNs } from 'stream-chat';
+
+import { ChatContext } from '../../../../contexts/chatContext/ChatContext';
+import type { ChatContextValue } from '../../../../contexts/chatContext/ChatContext';
+import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { useMarkRead } from '../useMarkRead';
+
+describe('useMarkRead', () => {
+  let client: StreamChat;
+  let channel: Channel;
+
+  beforeEach(async () => {
+    client = await getTestClientWithUser({ id: 'me' });
+    const response = generateChannelResponse({ messages: [] });
+    useMockedApis(client, [getOrCreateChannelApi(response)]);
+    channel = client.channel('messaging', response.channel.id);
+    await channel.watch();
+    jest.spyOn(client.messageDeliveryReporter, 'throttledMarkRead').mockImplementation(() => {});
+  });
+
+  const render = () =>
+    renderHook(() => useMarkRead(channel), {
+      wrapper: ({ children }) => (
+        <ChatContext.Provider value={{ client } as unknown as ChatContextValue}>
+          {children}
+        </ChatContext.Provider>
+      ),
+    });
+
+  // Messages stamped by a server clock running `aheadMs` ahead of the device.
+  const ingest = (texts: string[], aheadMs: number) =>
+    texts.map((text, i) => {
+      const createdAt = msToNs(Date.now() + aheadMs + i);
+      const message = channel.state.formatMessage(
+        generateMessage({
+          cid: channel.cid,
+          created_at: createdAt,
+          text,
+          user: generateUser({ id: 'other' }),
+        }),
+      ) as LocalMessage;
+      channel.messagePaginator.ingestItem(message);
+      return message;
+    });
+
+  it('sets the read boundary on the server clock, so a device behind it still covers what was read', () => {
+    const read = ingest(['one', 'two', 'three'], 2000);
+    const { result } = render();
+
+    act(() => result.current());
+
+    const snapshot = channel.messagePaginator.unreadStateSnapshot.getLatestValue();
+    expect(snapshot.unreadCount).toBe(0);
+    expect(snapshot.lastReadMessageId).toBe(read[2].id);
+    // The separator treats `created_at > lastReadAt` as unread: none of these may qualify.
+    read.forEach((message) =>
+      expect(message.created_at).toBeLessThanOrEqual(snapshot.lastReadAt as number),
+    );
+
+    const [next] = ingest(['four'], 3000);
+    expect(next.created_at).toBeGreaterThan(snapshot.lastReadAt as number);
+  });
+
+  describe('with read events off', () => {
+    const markRead = () => {
+      const local = jest.spyOn(channel, 'markReadLocally').mockImplementation(() => undefined);
+      const { result } = render();
+      act(() => result.current());
+      return local;
+    };
+
+    it('resets the unread count locally when the channel opted into counting it', () => {
+      client.config.set({
+        channel: { readEvents: { enabled: false, localUnreadCountEnabled: true } },
+      });
+
+      expect(markRead()).toHaveBeenCalledTimes(1);
+      expect(client.messageDeliveryReporter.throttledMarkRead).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when the channel did not opt in', () => {
+      client.config.set({ channel: { readEvents: { enabled: false } } });
+
+      expect(markRead()).not.toHaveBeenCalled();
+      expect(client.messageDeliveryReporter.throttledMarkRead).not.toHaveBeenCalled();
+    });
+  });
+
+  it('keeps the snapshot as it is when asked not to update the unread state', () => {
+    ingest(['one'], 2000);
+    const before = channel.messagePaginator.unreadStateSnapshot.getLatestValue();
+    const { result } = render();
+
+    act(() => result.current({ updateChannelUnreadState: false }));
+
+    expect(channel.messagePaginator.unreadStateSnapshot.getLatestValue()).toBe(before);
+    expect(client.messageDeliveryReporter.throttledMarkRead).toHaveBeenCalledWith(channel);
+  });
+});