chore: migrate test suite from JavaScript to TypeScript

.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;
+  }
+}

src/components/Attachment/__tests__/Attachment.test.jsx → 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();
     });
   });
 

src/components/Attachment/__tests__/Audio.test.jsx → src/components/Attachment/__tests__/Audio.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>,

src/components/Attachment/__tests__/Card.test.jsx → src/components/Attachment/__tests__/Card.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] = [
       {

src/components/Attachment/__tests__/File.test.jsx → src/components/Attachment/__tests__/File.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 = {

src/components/Attachment/__tests__/Geolocation.test.jsx → src/components/Attachment/__tests__/Geolocation.test.tsx

@@ -3,11 +3,13 @@ import { act, render, screen } from '@testing-library/react';
 import { Channel } from '../../Channel';
 import { Chat } from '../../Chat';
 import { Geolocation } from '../Geolocation';
+import type { GeolocationProps } from '../Geolocation';
 import {
   generateLiveLocationResponse,
   generateStaticLocationResponse,
   initClientWithChannels,
 } from '../../../mock-builders';
+import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 const GeolocationMapComponent = (props) => (
   <div data-props={props} data-testid='geolocation-map' />
@@ -30,7 +32,13 @@ const getGeolocationMap = () => screen.queryByTestId('geolocation-map');
 const ownUser = { id: 'user-id' };
 const otherUser = { id: 'other-user-id' };
 
-const renderComponent = async ({ channel, client, props } = {}) => {
+const renderComponent = async (
+  { channel, client, props } = {} as {
+    channel?: ChannelType;
+    client?: StreamChat;
+    props?: GeolocationProps;
+  },
+) => {
   const {
     channels: [defaultChannel],
     client: defaultClient,
@@ -40,7 +48,7 @@ const renderComponent = async ({ channel, client, props } = {}) => {
     result = render(
       <Chat client={client ?? defaultClient}>
         <Channel channel={channel ?? defaultChannel}>
-          <Geolocation {...props} />
+          <Geolocation {...props!} />
         </Channel>
       </Chat>,
     );