chore: add type annotations to untyped let declarations in tests

Annotate ~30 let variables across 14 test files with types inferred
from their assignments:

- client/chatClient → StreamChat (from getTestClientWithUser/getTestClient)
- channel → Channel (from client.channel())
- testChannel1/2/3 → ChannelAPIResponse (from generateChannel())
- users → UserResponse[] (from createClientWithChannel)
- containerIsThread → boolean

Also fixed two bugs surfaced by typing:
- TypingIndicator: ch.id → ch.channel.id (ChannelAPIResponse has .channel.id)
- ChannelHeader: testChannel1.id → testChannel1.channel.id

Author: oliverlaz

src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx

@@ -22,16 +22,21 @@ import {
 } from '../../../mock-builders';
 import { axe } from '../../../../axe-helper';
 import { ChannelAvatar } from '../../Avatar';
-import type { ChannelResponse, Channel as ChannelType, StreamChat } from 'stream-chat';
+import type {
+  ChannelAPIResponse,
+  ChannelResponse,
+  Channel as ChannelType,
+  StreamChat,
+} from 'stream-chat';
 import type { ChannelHeaderProps } from '../ChannelHeader';
 import type { GenerateChannelOptions } from '../../../mock-builders/generator/channel';
 
 const AVATAR_IMG_TEST_ID = 'avatar-img';
 
 const user1 = generateUser();
 const user2 = generateUser({ image: null });
-let testChannel1;
-let client;
+let testChannel1: ChannelAPIResponse;
+let client: StreamChat;
 
 const CustomMenuIcon = () => <div id='custom-icon'>Custom Menu Icon</div>;
 const defaultChannelState = {
@@ -72,7 +77,7 @@ async function renderComponent({
   testChannel1 = generateChannel({ ...defaultChannelState, channel: channelData });
   /* eslint-disable-next-line react-hooks/rules-of-hooks */
   useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
-  const channel = client.channel(channelType, testChannel1.id, channelData);
+  const channel = client.channel(channelType, testChannel1.channel.id, channelData);
   await channel.query();
 
   return renderComponentBase({ channel, client, props });

src/components/ChannelList/__tests__/ChannelList.test.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { nanoid } from 'nanoid';
 import { SearchController } from 'stream-chat';
-import type { StreamChat } from 'stream-chat';
+import type { ChannelAPIResponse, StreamChat } from 'stream-chat';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { axe } from '../../../../axe-helper';
 
@@ -84,10 +84,10 @@ const ChannelListComponent = (props) => {
 const ROLE_LIST_ITEM_SELECTOR = '[role="listitem"]';
 const SEARCH_RESULT_LIST_SELECTOR = '.str-chat__search-results';
 describe('ChannelList', () => {
-  let chatClient;
-  let testChannel1;
-  let testChannel2;
-  let testChannel3;
+  let chatClient: StreamChat;
+  let testChannel1: ChannelAPIResponse;
+  let testChannel2: ChannelAPIResponse;
+  let testChannel3: ChannelAPIResponse;
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser({ id: 'uthred' });
@@ -666,8 +666,8 @@ describe('ChannelList', () => {
     });
 
     it('should fall back to the first channel when `customActiveChannel` is not found', async () => {
-      chatClient.axiosInstance.post.mockReset();
-      chatClient.axiosInstance.post
+      vi.mocked(chatClient.axiosInstance.post).mockReset();
+      vi.mocked(chatClient.axiosInstance.post)
         .mockResolvedValueOnce(queryChannelsApi([testChannel1, testChannel2]).response)
         .mockResolvedValueOnce(queryChannelsApi([]).response);
 
@@ -1941,7 +1941,7 @@ describe('ChannelList', () => {
 
       await waitFor(() => {
         expect(chatClient.queryChannels).toHaveBeenCalledTimes(2);
-        expect(chatClient.queryChannels.mock.calls[1][2]).toStrictEqual(
+        expect(vi.mocked(chatClient.queryChannels).mock.calls[1][2]).toStrictEqual(
           expect.objectContaining({ offset: 0 }),
         );
       });
@@ -1964,7 +1964,7 @@ describe('ChannelList', () => {
 
       await waitFor(() => {
         expect(chatClient.queryChannels).toHaveBeenCalledTimes(2);
-        expect(chatClient.queryChannels.mock.calls[1][2]).toStrictEqual(
+        expect(vi.mocked(chatClient.queryChannels).mock.calls[1][2]).toStrictEqual(
           expect.objectContaining({ offset: 0 }),
         );
       });
@@ -1977,7 +1977,7 @@ describe('ChannelList', () => {
 
       await waitFor(() => {
         expect(chatClient.queryChannels).toHaveBeenCalledTimes(3);
-        expect(chatClient.queryChannels.mock.calls[2][2]).toStrictEqual(
+        expect(vi.mocked(chatClient.queryChannels).mock.calls[2][2]).toStrictEqual(
           expect.objectContaining({ offset: 0 }),
         );
       });
@@ -2014,7 +2014,7 @@ describe('ChannelList', () => {
 
       await waitFor(() => {
         expect(chatClient.queryChannels).toHaveBeenCalledTimes(3);
-        expect(chatClient.queryChannels.mock.calls[2][2]).toStrictEqual(
+        expect(vi.mocked(chatClient.queryChannels).mock.calls[2][2]).toStrictEqual(
           expect.objectContaining({ offset: 0 }),
         );
       });

src/components/ChannelListItem/__tests__/ChannelListItemUI.test.tsx

@@ -10,6 +10,7 @@ import {
   useMockedApis,
 } from 'mock-builders';
 
+import type { Channel, StreamChat } from 'stream-chat';
 import { ChannelListItemUI } from '../ChannelListItemUI';
 import { ChatProvider, ComponentProvider, DialogManagerProvider } from '../../../context';
 
@@ -23,8 +24,8 @@ NoopActionButtons.displayName = 'ChannelListItemActionButtons';
 describe('ChannelPreviewMessenger', () => {
   const clientUser = generateUser();
 
-  let chatClient;
-  let channel;
+  let chatClient: StreamChat;
+  let channel: Channel;
   const renderComponent = (props?: any, componentOverrides = {}) => (
     <ChatProvider value={mockChatContext({ client: chatClient })}>
       <DialogManagerProvider>

src/components/ChannelListItem/__tests__/utils.test.ts

@@ -13,6 +13,7 @@ import {
   useMockedApis,
 } from 'mock-builders';
 
+import type { StreamChat } from 'stream-chat';
 import {
   getChannelDisplayImage,
   getGroupChannelDisplayInfo,
@@ -23,7 +24,7 @@ import { render } from '@testing-library/react';
 
 describe('ChannelPreview utils', () => {
   const clientUser = generateUser();
-  let chatClient;
+  let chatClient: StreamChat;
   const getQueriedChannelInstance = async (c) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);

src/components/Message/__tests__/MessageUI.test.tsx

@@ -36,7 +36,7 @@ import {
 } from '../../../mock-builders';
 import { MessageBouncePrompt } from '../../MessageBounce';
 import { generateReminderResponse } from '../../../mock-builders/generator/reminder';
-import type { ChannelConfigWithInfo } from 'stream-chat';
+import type { Channel, ChannelConfigWithInfo, StreamChat } from 'stream-chat';
 import type { ComponentContextValue, MessageContextValue } from '../../../context';
 
 vi.mock('../../ChatView', async (importOriginal) => {
@@ -94,8 +94,8 @@ function generateBobMessage(
 }
 
 describe('<MessageSimple />', () => {
-  let channel;
-  let client;
+  let channel: Channel;
+  let client: StreamChat;
 
   async function renderMessageSimple({
     channelCapabilities = { 'send-reaction': true, 'send-reply': true },

src/components/Message/__tests__/utils.test.ts

@@ -1,6 +1,7 @@
 import { generateMessage, generateReaction, generateUser } from 'mock-builders';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ChannelConfigWithInfo, Mute } from 'stream-chat';
+import type { StreamChat } from 'stream-chat';
 import {
   countReactions,
   getTestClientWithUser,
@@ -442,7 +443,7 @@ describe('Message utils', () => {
   describe('getReadByTooltipText', () => {
     const tooltipUserNameMapper = mapToUserNameOrId;
 
-    let client;
+    let client: StreamChat;
 
     beforeAll(async () => {
       client = await getTestClientWithUser(alice);

src/components/Message/hooks/__tests__/useDeleteHandler.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { useDeleteHandler } from '../useDeleteHandler';
 import {
@@ -18,8 +19,8 @@ import { Channel } from '../../../Channel';
 import { Chat } from '../../../Chat';
 import { act } from '@testing-library/react';
 
-let channel;
-let client;
+let channel: ChannelType;
+let client: StreamChat;
 const testMessage = generateMessage();
 const deleteMessage = vi.fn(() => Promise.resolve(testMessage)) as any;
 const removeMessage = vi.fn();

src/components/MessageList/__tests__/ConnectionStatus.test.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import type { StreamChat } from 'stream-chat';
 import { dispatchConnectionChangedEvent, getTestClient } from 'mock-builders';
 
 import { ConnectionStatus } from '../ConnectionStatus';
 import { Chat } from '../../Chat';
 
 const customNotificationId = 'custom-notification';
 describe('<ChatContext /> component', () => {
-  let chatClient;
+  let chatClient: StreamChat;
   beforeEach(() => {
     chatClient = getTestClient();
   });

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

@@ -96,7 +96,7 @@ const createDeferred = () => {
 };
 
 describe('MessageList', () => {
-  let chatClient;
+  let chatClient: StreamChat;
   let channel;
   let markReadMock;
 

src/components/MessageList/__tests__/ScrollToLatestMessageButton.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { Channel, StreamChat, UserResponse } from 'stream-chat';
 
 import { ScrollToLatestMessageButton } from '../ScrollToLatestMessageButton';
 import { ChannelStateProvider, ChatProvider } from '../../../context';
@@ -17,10 +18,10 @@ const NEW_MESSAGE_COUNTER_TEST_ID = 'unread-message-notification-counter';
 const mainList = 'the main message list';
 const threadList = 'a thread';
 
-let client;
-let channel;
-let users;
-let containerIsThread;
+let client: StreamChat;
+let channel: Channel;
+let users: UserResponse[];
+let containerIsThread: boolean;
 let anotherUser;
 let channelStateContext;
 let parentMsg;