chore: migrate test suite from JavaScript to TypeScript (#3057)

### 🎯 Goal

Migrate the entire test suite from JavaScript/JSX to TypeScript/TSX to
improve IDE autocompletion, refactoring safety, and catch type errors at
write time. Also replace ad-hoc `as any` casts with proper SDK types and
typed test helpers.

### 🛠 Implementation details

**Scope:** 248 files changed, 3725 insertions, 2411 deletions

#### Infrastructure
- Install `@total-typescript/shoehorn` for `fromPartial<T>()` in test
mocks
- Update `tsconfig.test.json` with proper include patterns, path
aliases, and 4 strict flags (`strictBindCallApply`, `noImplicitThis`,
`alwaysStrict`, `useUnknownInCatchVariables`)
- Update `eslint.config.mjs` with test-specific rule relaxations; enable
`disallowTypeAnnotations: false` for `typeof import()` in `vi.mock`
- Add `@vitest/expect` module augmentation for jest-dom + vitest-axe
matchers (vitest 4.x compatibility)
- Add `yarn types:tests` script for test type-checking
- Exclude test files from i18next translation extraction
(`i18next.config.ts`)

#### Mock-builders (45 JS → TS)
- All generators typed with SDK types (`UserResponse`, `Attachment`,
`ReactionResponse`, `ChannelMemberResponse`, `LocalMessage`,
`PollResponse`, `ChannelAPIResponse`, etc.)
- `generateMessage()` returns `LocalMessage` (matches what components
consume) and accepts `Date | string` for date fields
- `generateChannel()` returns `ChannelAPIResponse` (renamed
`pinnedMessages` → `pinned_messages`)
- `mockClient` typed with `StreamChat`, uses `vi.spyOn` for public
methods
- `MockClientOverrides` interface using `StreamChat['getAppSettings']`
and `StreamChat['queryReactions']`
- `TokenManager` typed with `fromPartial<TokenManager>()`
- `getOrCreateChannelApi` typed with `ChannelAPIResponse`,
`queryChannelsApi` with `ChannelAPIResponse[]`
- `sendMessageApi` typed with `MessageResponse | LocalMessage`
- Event dispatchers use `fromPartial<Event>()`, accept `Channel |
ChannelResponse` and `MessageResponse | LocalMessage`
- `TDateTimeParser` from `i18n/types` used for translation mock
- `ResizeObserverCallback` DOM type, `Partial<BlobEvent>`,
`Partial<File>`, `Action` from SDK
- 9 typed context builder helpers (`mockChatContext`,
`mockChannelStateContext`, `mockTranslationContextValue`, etc.)

#### Test files (134 JS/JSX → TS/TSX)
- All 1,720 type errors fixed
- `as any` reduced from ~1,107 to ~435 (61% reduction)
- `Record<string, any>` reduced to 0 — all replaced with typed
interfaces
- Provider `value as any` replaced with context helpers
(`mockChatContext()`, etc.)
- `vi.spyOn(obj as any)` replaced with `@ts-expect-error` + proper spy
- `{} as any` replaced with `fromPartial<Type>({})`
- `importOriginal() as any` replaced with `importOriginal<typeof
import('...')>()`
- Private property access uses bracket notation (`obj['prop']`) instead
of `(obj as any).prop`
- `renderComponent` params typed with per-file interfaces using SDK
types
- Variables typed as `StreamChat`, `Channel`, `LocalMessage` instead of
`any`
- `{ children }: any` replaced with `React.PropsWithChildren`
- Removed no-op `amplitudesCount` prop from WaveProgressBar tests
- Deleted 19 orphan `.test.jsx.snap` snapshot files

#### Remaining `as any` (~435, intentionally kept)

| Category | Count | Reason |
|----------|-------|--------|
| Partial objects in component/hook tests | ~149 | Test data does not
satisfy full type; `fromPartial` used where possible |
| TFunction mock (`$TFunctionBrand`) | ~35 | i18next brand symbol cannot
be satisfied by mock functions |
| `LocalMessage[]` → `MessageResponse[]` | ~42 | Date vs string field
mismatch in `generateChannel` calls |
| `window/navigator/globalThis` | ~17 | Read-only DOM globals |
| `@ts-expect-error` (explicit) | ~18 | Mock impl signature mismatches,
properly documented |
| Mouse event mocks | ~16 | Partial event objects |
| `.next(value)` on state/subjects | ~12 | BehaviorSubject type
constraints |
| Misc (channel, client, renderText) | ~146 | Scattered partials and
legacy patterns |

### 🎨 UI Changes

No UI changes — test infrastructure only.

Author: oliverlaz

.gitignore

@@ -78,4 +78,4 @@ coverage.out
 # stream-chat-css/docusaurus files
 docusaurus/docs/React/theming
 docusaurus/docs/React/assets/stream-chat-css*
-shared
+sharedtsconfig.test.tsbuildinfo

eslint.config.mjs

@@ -116,7 +116,7 @@ export default tseslint.config(
   },
   {
     name: 'vitest',
-    files: ['src/**/__tests__/**'],
+    files: ['src/**/__tests__/**', 'src/mock-builders/**'],
     plugins: { vitest: vitestPlugin },
     languageOptions: {
       globals: vitestPlugin.environments.env.globals,
@@ -130,6 +130,12 @@ export default tseslint.config(
       'vitest/no-hooks': 'off',
       'vitest/prefer-spy-on': 'warn',
       '@typescript-eslint/no-empty-function': 'off', // explicitly disable for tests
+      '@typescript-eslint/no-explicit-any': 'off', // test mocks frequently need any
+      '@typescript-eslint/no-non-null-assertion': 'off', // DOM queries in tests commonly use !
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { disallowTypeAnnotations: false },
+      ], // allow typeof import() in vi.mock importOriginal
     },
   },
 );

i18next.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
     defaultNS: false,
     extractFromComments: false,
     functions: ['t', '*.t'],
+    ignore: ['./src/**/__tests__/**', './src/mock-builders/**'],
     input: ['./src/**/*.{tsx,ts}'],
     keySeparator: false,
     nsSeparator: false,

package.json

@@ -145,6 +145,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "@total-typescript/shoehorn": "^0.1.2",
     "@types/hast": "^2.3.4",
     "@types/jsdom": "^21.1.5",
     "@types/linkifyjs": "^2.1.7",
@@ -203,6 +204,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "types": "tsc --emitDeclarationOnly false --noEmit",
+    "types:tests": "tsc --project tsconfig.test.json --noEmit",
     "validate-translations": "node scripts/validate-translations.js",
     "validate-cjs": "concurrently 'node scripts/validate-cjs-node-bundle.cjs' 'node scripts/validate-cjs-browser-bundle.cjs'",
     "semantic-release": "semantic-release",

src/@types/vitest-axe.d.ts

@@ -0,0 +1,9 @@
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+declare module '@vitest/expect' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface Assertion<T>
+    extends TestingLibraryMatchers<typeof expect.stringContaining, T> {
+    toHaveNoViolations(): void;
+  }
+}

…Attachment/__tests__/Attachment.test.jsx …Attachment/__tests__/Attachment.test.tsxsrc/components/Attachment/__tests__/Attachment.test.jsx renamed to src/components/Attachment/__tests__/Attachment.test.tsx src/components/Attachment/__tests__/Attachment.test.jsx renamed to src/components/Attachment/__tests__/Attachment.test.tsx

@@ -18,7 +18,10 @@ import {
 
 import { Attachment } from '../Attachment';
 import { SUPPORTED_VIDEO_FORMATS } from '../utils';
-import { generateScrapedVideoAttachment } from '../../../mock-builders';
+import {
+  generateScrapedVideoAttachment,
+  mockChannelStateContext,
+} from '../../../mock-builders';
 import { ChannelStateProvider } from '../../../context';
 
 const UNSUPPORTED_ATTACHMENT_TEST_ID = 'attachment-unsupported';
@@ -33,8 +36,9 @@ const ModalGallery = (props) => (
   <div data-testid='gallery-attachment'>{props.customTestId}</div>
 );
 const Giphy = (props) => <div data-testid='giphy-attachment'>{props.customTestId}</div>;
+const GEOLOCATION_TEST_ID = 'geolocation-attachment';
 const Geolocation = (props) => (
-  <div data-testid={'geolocation-attachment'}>{props.customTestId}</div>
+  <div data-testid={GEOLOCATION_TEST_ID}>{props.customTestId}</div>
 );
 
 const ATTACHMENTS = {
@@ -56,7 +60,7 @@ const ATTACHMENTS = {
 
 const renderComponent = (props) =>
   render(
-    <ChannelStateProvider value={{}}>
+    <ChannelStateProvider value={mockChannelStateContext()}>
       <Attachment
         AttachmentActions={AttachmentActions}
         Audio={Audio}
@@ -258,13 +262,13 @@ describe('attachment', () => {
   });
 
   it('renders shared location with Geolocation attachment', () => {
-    renderComponent({ attachments: [generateLiveLocationResponse()] });
+    renderComponent({ attachments: [generateLiveLocationResponse({})] });
     waitFor(() => {
-      expect(screen.getByTestId(testId)).toBeInTheDocument();
+      expect(screen.getByTestId(GEOLOCATION_TEST_ID)).toBeInTheDocument();
     });
-    renderComponent({ attachments: [generateStaticLocationResponse()] });
+    renderComponent({ attachments: [generateStaticLocationResponse({})] });
     waitFor(() => {
-      expect(screen.getByTestId(testId)).toBeInTheDocument();
+      expect(screen.getByTestId(GEOLOCATION_TEST_ID)).toBeInTheDocument();
     });
   });
 

…ent/__tests__/AttachmentActions.test.jsx …ent/__tests__/AttachmentActions.test.tsxsrc/components/Attachment/__tests__/AttachmentActions.test.jsx renamed to src/components/Attachment/__tests__/AttachmentActions.test.tsx src/components/Attachment/__tests__/AttachmentActions.test.jsx renamed to src/components/Attachment/__tests__/AttachmentActions.test.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { Audio } from '../Audio';
-import { generateAudioAttachment, generateMessage } from '../../../mock-builders';
+import {
+  generateAudioAttachment,
+  generateMessage,
+  mockMessageContext,
+} from '../../../mock-builders';
 import { prettifyFileSize } from '../../MessageComposer/hooks/utils';
 import { WithAudioPlayback } from '../../AudioPlayback';
 import { MessageProvider } from '../../../context';
@@ -33,10 +37,10 @@ vi.spyOn(window, 'Audio').mockImplementation(function AudioMock(...args) {
 });
 
 const originalConsoleError = console.error;
-vi.spyOn(console, 'error').mockImplementationOnce((...errorOrTextorArg) => {
+vi.spyOn(console, 'error').mockImplementationOnce((...errorOrTextorArg: any[]) => {
   const msg = Array.isArray(errorOrTextorArg)
     ? errorOrTextorArg[0]
-    : (errorOrTextorArg.message ?? errorOrTextorArg);
+    : (errorOrTextorArg['message'] ?? errorOrTextorArg);
   if (msg.match('Not implemented')) return;
   originalConsoleError(...errorOrTextorArg);
 });
@@ -79,7 +83,9 @@ describe('Audio', () => {
   beforeEach(() => {
     // jsdom doesn't define these, so mock them instead
     // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#Methods
-    vi.spyOn(HTMLMediaElement.prototype, 'play').mockImplementation(() => {});
+    vi.spyOn(HTMLMediaElement.prototype, 'play').mockImplementation(() =>
+      Promise.resolve(),
+    );
     vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
     vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => {});
   });
@@ -96,7 +102,9 @@ describe('Audio', () => {
     });
 
     expect(getByText(audioAttachment.title)).toBeInTheDocument();
-    expect(getByText(prettifyFileSize(audioAttachment.file_size))).toBeInTheDocument();
+    expect(
+      getByText(prettifyFileSize(audioAttachment.file_size as number)),
+    ).toBeInTheDocument();
     expect(container.querySelector('img')).not.toBeInTheDocument();
   });
 
@@ -118,7 +126,7 @@ describe('Audio', () => {
     const { getByTestId } = renderComponent({ og: audioAttachment });
     await clickToPlay();
     vi.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockImplementationOnce(
-      () => ({ width: 120, x: 0 }),
+      () => ({ width: 120, x: 0 }) as any,
     );
 
     vi.spyOn(HTMLAudioElement.prototype, 'currentTime', 'set').mockImplementationOnce(
@@ -265,10 +273,10 @@ describe('Audio', () => {
     const message = generateMessage();
     render(
       <WithAudioPlayback allowConcurrentPlayback>
-        <MessageProvider value={{ message }}>
+        <MessageProvider value={mockMessageContext({ message })}>
           <Audio attachment={audioAttachment} />
         </MessageProvider>
-        <MessageProvider value={{ message, threadList: true }}>
+        <MessageProvider value={mockMessageContext({ message, threadList: true })}>
           <Audio attachment={audioAttachment} />
         </MessageProvider>
       </WithAudioPlayback>,
@@ -287,10 +295,10 @@ describe('Audio', () => {
     const message = generateMessage();
     render(
       <WithAudioPlayback>
-        <MessageProvider value={{ message }}>
+        <MessageProvider value={mockMessageContext({ message })}>
           <Audio attachment={audioAttachment} />
         </MessageProvider>
-        <MessageProvider value={{ message }}>
+        <MessageProvider value={mockMessageContext({ message })}>
           <Audio attachment={audioAttachment} />
         </MessageProvider>
       </WithAudioPlayback>,

…ents/Attachment/__tests__/Audio.test.jsx …ents/Attachment/__tests__/Audio.test.tsxsrc/components/Attachment/__tests__/Audio.test.jsx renamed to src/components/Attachment/__tests__/Audio.test.tsx src/components/Attachment/__tests__/Audio.test.jsx renamed to src/components/Attachment/__tests__/Audio.test.tsx

@@ -3,45 +3,52 @@ import { cleanup, render, waitFor } from '@testing-library/react';
 
 import { Card } from '../LinkPreview/Card';
 
+import { fromPartial } from '@total-typescript/shoehorn';
 import { ChannelActionProvider, TranslationContext } from '../../../context';
 import { ChannelStateProvider } from '../../../context/ChannelStateContext';
 import { ChatProvider } from '../../../context/ChatContext';
 import { ComponentProvider } from '../../../context/ComponentContext';
 
+import type { ChannelActionContextValue } from '../../../context';
+import type { Channel, StreamChat } from 'stream-chat';
+
 import {
   generateChannel,
   generateGiphyAttachment,
   generateMember,
   generateUser,
   getOrCreateChannelApi,
   getTestClientWithUser,
-  mockTranslationContext,
+  mockChannelStateContext,
+  mockChatContext,
+  mockComponentContext,
+  mockTranslationContextValue,
   useMockedApis,
 } from '../../../mock-builders';
 import { WithAudioPlayback } from '../../AudioPlayback';
 
-let chatClient;
-let channel;
+let chatClient: StreamChat;
+let channel: Channel;
 const user = generateUser({ id: 'userId', name: 'username' });
 
-vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation();
-vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation();
-vi.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation();
-const channelActionContext = {};
+vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(async () => {});
+vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
+vi.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {});
+const channelActionContext = fromPartial<ChannelActionContextValue>({});
 
 const mockedChannel = generateChannel({
   members: [generateMember({ user })],
   messages: [],
-  thread: [],
-});
+  threads: [],
+} as any);
 
-const renderCard = ({ cardProps, chatContext, theRenderer = render }) =>
+const renderCard = ({ cardProps, chatContext, theRenderer = render }: any) =>
   theRenderer(
-    <ChatProvider value={chatContext}>
-      <TranslationContext.Provider value={mockTranslationContext}>
+    <ChatProvider value={mockChatContext(chatContext)}>
+      <TranslationContext.Provider value={mockTranslationContextValue()}>
         <ChannelActionProvider value={channelActionContext}>
-          <ChannelStateProvider value={{}}>
-            <ComponentProvider value={{}}>
+          <ChannelStateProvider value={mockChannelStateContext()}>
+            <ComponentProvider value={mockComponentContext()}>
               <WithAudioPlayback>
                 <Card {...cardProps} />
               </WithAudioPlayback>
@@ -56,7 +63,7 @@ describe('Card', () => {
   beforeAll(async () => {
     chatClient = await getTestClientWithUser({ id: user.id });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel['id']);
     channel.query();
   });
 
@@ -75,7 +82,7 @@ describe('Card', () => {
 
   const attachmentTypes = ['audio', 'image', 'video'];
 
-  const cases = attachmentTypes.reduce((acc, type) => {
+  const cases = attachmentTypes.reduce((acc: any, type) => {
     const attachment = { ...dummyAttachment, type };
     acc[type] = [
       {

…nents/Attachment/__tests__/Card.test.jsx …nents/Attachment/__tests__/Card.test.tsxsrc/components/Attachment/__tests__/Card.test.jsx renamed to src/components/Attachment/__tests__/Card.test.tsx src/components/Attachment/__tests__/Card.test.jsx renamed to src/components/Attachment/__tests__/Card.test.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { FileAttachment } from '../FileAttachment';
-import { TranslationContext } from '../../../context';
-import { mockTranslationContext } from '../../../mock-builders';
+import { TranslationProvider } from '../../../context';
+import { mockTranslationContextValue } from '../../../mock-builders';
 
-const getComponent = ({ attachment }) => (
-  <TranslationContext.Provider value={mockTranslationContext}>
+const getComponent = ({ attachment }: any) => (
+  <TranslationProvider value={mockTranslationContextValue()}>
     <FileAttachment attachment={attachment} />
-  </TranslationContext.Provider>
+  </TranslationProvider>
 );
 
 const file = {