Improve typing around wrapInMatrixClientContext (#8130)

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;

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(() => {

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