From 3317b60437fe23eabc46345d7a841d48279d0e29 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 23 Mar 2022 18:13:40 -0400
Subject: [PATCH] Improve typing around wrapInMatrixClientContext (#8130)

---
 .../views/spaces/SpaceSettingsVisibilityTab-test.tsx   |  1 -
 test/components/views/voip/VoiceChannelRadio-test.tsx  |  5 -----
 test/test-utils/wrappers.tsx                           | 10 +++++-----
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
index 2d7d0b10e5..976e030b3b 100644
--- a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
+++ b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
@@ -70,7 +70,6 @@ describe('<SpaceSettingsVisibilityTab />', () => {
         const wrapper = renderIntoDocument<HTMLSpanElement>(
             // wrap in element so renderIntoDocument can render functional component
             <span>
-                { /* @ts-ignore */ }
                 <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
             </span>,
         ) as HTMLSpanElement;
diff --git a/test/components/views/voip/VoiceChannelRadio-test.tsx b/test/components/views/voip/VoiceChannelRadio-test.tsx
index d53d7a2daa..9ab3c27937 100644
--- a/test/components/views/voip/VoiceChannelRadio-test.tsx
+++ b/test/components/views/voip/VoiceChannelRadio-test.tsx
@@ -79,7 +79,6 @@ describe("VoiceChannelRadio", () => {
     });
 
     it("shows when connecting voice", async () => {
-        // @ts-ignore - TS doesn't like mounting this for some reason, but is fine with it elsewhere
         const radio = mount(<VoiceChannelRadio />);
         expect(radio.children().children().exists()).toEqual(false);
 
@@ -90,7 +89,6 @@ describe("VoiceChannelRadio", () => {
 
     it("hides when disconnecting voice", () => {
         VoiceChannelStore.instance.connect("!1:example.org");
-        // @ts-ignore - TS doesn't like mounting this for some reason, but is fine with it elsewhere
         const radio = mount(<VoiceChannelRadio />);
         expect(radio.children().children().exists()).toEqual(true);
 
@@ -102,7 +100,6 @@ describe("VoiceChannelRadio", () => {
     describe("disconnect button", () => {
         it("works", () => {
             VoiceChannelStore.instance.connect("!1:example.org");
-            // @ts-ignore - TS doesn't like mounting this for some reason, but is fine with it elsewhere
             const radio = mount(<VoiceChannelRadio />);
 
             act(() => {
@@ -115,7 +112,6 @@ describe("VoiceChannelRadio", () => {
     describe("video button", () => {
         it("works", () => {
             VoiceChannelStore.instance.connect("!1:example.org");
-            // @ts-ignore - TS doesn't like mounting this for some reason, but is fine with it elsewhere
             const radio = mount(<VoiceChannelRadio />);
 
             act(() => {
@@ -133,7 +129,6 @@ describe("VoiceChannelRadio", () => {
     describe("audio button", () => {
         it("works", () => {
             VoiceChannelStore.instance.connect("!1:example.org");
-            // @ts-ignore - TS doesn't like mounting this for some reason, but is fine with it elsewhere
             const radio = mount(<VoiceChannelRadio />);
 
             act(() => {
diff --git a/test/test-utils/wrappers.tsx b/test/test-utils/wrappers.tsx
index 24205cfa73..faaf5bf6a7 100644
--- a/test/test-utils/wrappers.tsx
+++ b/test/test-utils/wrappers.tsx
@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { RefCallback } from "react";
+import React, { RefCallback, ComponentType } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg as peg } from '../../src/MatrixClientPeg';
 import MatrixClientContext from "../../src/contexts/MatrixClientContext";
 
-type WrapperType<T> = React.Component<{ wrappedRef?: RefCallback<T> }>;
+type WrapperProps<T> = { wrappedRef?: RefCallback<ComponentType<T>> } & T;
 
-export function wrapInMatrixClientContext<T>(WrappedComponent): WrapperType<T> {
-    class Wrapper extends React.Component<{ wrappedRef?: RefCallback<T> }> {
+export function wrapInMatrixClientContext<T>(WrappedComponent: ComponentType<T>): ComponentType<WrapperProps<T>> {
+    class Wrapper extends React.Component<WrapperProps<T>> {
         _matrixClient: MatrixClient;
         constructor(props) {
             super(props);
@@ -37,5 +37,5 @@ export function wrapInMatrixClientContext<T>(WrappedComponent): WrapperType<T> {
             </MatrixClientContext.Provider>;
         }
     }
-    return Wrapper as unknown as WrapperType<T>;
+    return Wrapper;
 }