Change the way we as unknown the mock RTC session.

src/button/ReactionToggleButton.test.tsx

@@ -18,6 +18,7 @@ import {
 } from "../utils/testReactions";
 import { ReactionToggleButton } from "./ReactionToggleButton";
 import { ElementCallReactionEventType } from "../reactions";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberEventAlice = "$membership-alice:example.org";
@@ -29,7 +30,7 @@ const membership: Record<string, string> = {
 function TestComponent({
   rtcSession,
 }: {
-  rtcSession: MockRTCSession;
+  rtcSession: MatrixRTCSession;
 }): ReactNode {
   return (
     <TooltipProvider>
@@ -45,7 +46,7 @@ test("Can open menu", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   expect(container).toMatchSnapshot();
@@ -56,7 +57,7 @@ test("Can raise hand", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.raise_hand"));
@@ -81,7 +82,7 @@ test("Can lower hand", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
   await user.click(getByLabelText("common.reactions"));
@@ -95,7 +96,7 @@ test("Can react with emoji", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, getByText } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByText("🐶"));
@@ -120,7 +121,7 @@ test("Can fully expand emoji picker", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByText, container, getByLabelText } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.show_more"));
@@ -148,7 +149,7 @@ test("Can close reaction dialog", async () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.show_more"));

src/room/CallEventAudioRenderer.test.tsx

@@ -84,7 +84,9 @@ function TestComponent({
   vm: CallViewModel;
 }): ReactNode {
   return (
-    <TestReactionsWrapper rtcSession={rtcSession}>
+    <TestReactionsWrapper
+      rtcSession={rtcSession as unknown as MatrixRTCSession}
+    >
       <CallEventAudioRenderer vm={vm} />
     </TestReactionsWrapper>
   );

src/room/GroupCallView.tsx

@@ -331,7 +331,7 @@ export const GroupCallView: FC<Props> = ({
         <ActiveCall
           client={client}
           matrixInfo={matrixInfo}
-          rtcSession={rtcSession}
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
           participantCount={participantCount}
           onLeave={onLeave}
           hideHeader={hideHeader}

src/room/ReactionAudioRenderer.test.tsx

@@ -31,6 +31,7 @@ import {
 } from "../settings/settings";
 import { prefetchSounds, useAudioContext } from "../useAudioContext";
 import { GenericReaction, ReactionSet } from "../reactions";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberUserIdBob = "@bob:example.org";
@@ -48,7 +49,7 @@ const membership: Record<string, string> = {
 function TestComponent({
   rtcSession,
 }: {
-  rtcSession: MockRTCSession;
+  rtcSession: MatrixRTCSession;
 }): ReactNode {
   return (
     <TooltipProvider>
@@ -91,7 +92,9 @@ test("preloads all audio elements", () => {
     new MockRoom(memberUserIdAlice),
     membership,
   );
-  render(<TestComponent rtcSession={rtcSession} />);
+  render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   expect(prefetchSounds).toHaveBeenCalledOnce();
 });
 
@@ -99,7 +102,9 @@ test("will play an audio sound when there is a reaction", () => {
   playReactionsSound.setValue(true);
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
+  render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
 
   // Find the first reaction with a sound effect
   const chosenReaction = ReactionSet.find((r) => !!r.sound);
@@ -118,7 +123,9 @@ test("will play the generic audio sound when there is soundless reaction", () =>
   playReactionsSound.setValue(true);
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
+  render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
 
   // Find the first reaction with a sound effect
   const chosenReaction = ReactionSet.find((r) => !r.sound);
@@ -138,7 +145,9 @@ test("will play multiple audio sounds when there are multiple different reaction
 
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  render(<TestComponent rtcSession={rtcSession} />);
+  render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
 
   // Find the first reaction with a sound effect
   const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound);

src/room/ReactionsOverlay.test.tsx

@@ -40,7 +40,9 @@ function TestComponent({
 }): ReactNode {
   return (
     <TooltipProvider>
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <ReactionsOverlay />
       </TestReactionsWrapper>
     </TooltipProvider>
@@ -57,7 +59,9 @@ test("defaults to showing no reactions", () => {
     new MockRoom(memberUserIdAlice),
     membership,
   );
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  const { container } = render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   expect(container.getElementsByTagName("span")).toHaveLength(0);
 });
 
@@ -66,7 +70,9 @@ test("shows a reaction when sent", () => {
   const reaction = ReactionSet[0];
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  const { getByRole } = render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   act(() => {
     room.testSendReaction(memberEventAlice, reaction, membership);
   });
@@ -80,7 +86,9 @@ test("shows two of the same reaction when sent", () => {
   const reaction = ReactionSet[0];
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  const { getAllByRole } = render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   act(() => {
     room.testSendReaction(memberEventAlice, reaction, membership);
   });
@@ -95,7 +103,9 @@ test("shows two different reactions when sent", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const [reactionA, reactionB] = ReactionSet;
-  const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
+  const { getAllByRole } = render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   act(() => {
     room.testSendReaction(memberEventAlice, reactionA, membership);
   });
@@ -115,6 +125,8 @@ test("hides reactions when reaction animations are disabled", () => {
   act(() => {
     room.testSendReaction(memberEventAlice, reaction, membership);
   });
-  const { container } = render(<TestComponent rtcSession={rtcSession} />);
+  const { container } = render(
+    <TestComponent rtcSession={rtcSession as unknown as MatrixRTCSession} />,
+  );
   expect(container.getElementsByTagName("span")).toHaveLength(0);
 });

src/useReactions.test.tsx

@@ -60,7 +60,9 @@ describe("useReactions", () => {
       membership,
     );
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -70,7 +72,9 @@ describe("useReactions", () => {
     const room = new MockRoom(memberUserIdAlice);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -83,7 +87,9 @@ describe("useReactions", () => {
     const room = new MockRoom(memberUserIdAlice);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -107,7 +113,9 @@ describe("useReactions", () => {
     ]);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -121,7 +129,9 @@ describe("useReactions", () => {
     ]);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -135,7 +145,9 @@ describe("useReactions", () => {
     ]);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -153,7 +165,9 @@ describe("useReactions", () => {
     ]);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );
@@ -163,7 +177,9 @@ describe("useReactions", () => {
     const room = new MockRoom(memberUserIdAlice);
     const rtcSession = new MockRTCSession(room, membership);
     const { queryByRole } = render(
-      <TestReactionsWrapper rtcSession={rtcSession}>
+      <TestReactionsWrapper
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <TestComponent />
       </TestReactionsWrapper>,
     );

src/utils/testReactions.tsx

@@ -32,7 +32,7 @@ export const TestReactionsWrapper = ({
   rtcSession,
   children,
 }: PropsWithChildren<{
-  rtcSession: MockRTCSession;
+  rtcSession: MatrixRTCSession;
 }>): ReactNode => {
   return (
     <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>