Unit test tsc fixes part 15 (#8104)

* fix ts issues in MPollBody test Signed-off-by: Kerry Archibald <kerrya@element.io> * fix ts issues in PollCreateDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix settings components Signed-off-by: Kerry Archibald <kerrya@element.io> * fix DateSeparator Signed-off-by: Kerry Archibald <kerrya@element.io> * fix loosies Signed-off-by: Kerry Archibald <kerrya@element.io> * update tsconfig Signed-off-by: Kerry Archibald <kerrya@element.io>
2024-11-22 01:05:42 +03:00 · 2022-03-22 11:32:35 +01:00 · 2022-03-22 11:32:35 +01:00 · abc225d3c6
commit abc225d3c6
parent 2bf1d2b287
16 changed files with 2663 additions and 3038 deletions
--- a/test/components/views/elements/AppTile-test.tsx
+++ b/test/components/views/elements/AppTile-test.tsx
@ -114,6 +114,10 @@ describe("AppTile", () => {
        await RightPanelStore.instance.onReady();
    });

+    beforeEach(() => {
+        jest.spyOn(SettingsStore, "getValue").mockRestore();
+    });
+
    it("tracks live tiles correctly", () => {
        expect(AppTile.isLive("1", "r1")).toEqual(false);

@ -196,7 +200,7 @@ describe("AppTile", () => {
    it("distinguishes widgets with the same ID in different rooms", async () => {
        // Set up right panel state
        const realGetValue = SettingsStore.getValue;
-        SettingsStore.getValue = (name, roomId) => {
+        jest.spyOn(SettingsStore, 'getValue').mockImplementation((name, roomId) => {
            if (name === "RightPanel.phases") {
                if (roomId === "r1") {
                    return {
@ -212,7 +216,7 @@ describe("AppTile", () => {
                return null;
            }
            return realGetValue(name, roomId);
-        };
+        });

        // Run initial render with room 1, and also running lifecycle methods
        const renderer = TestRenderer.create(<MatrixClientContext.Provider value={cli}>
@ -232,7 +236,7 @@ describe("AppTile", () => {
        expect(AppTile.isLive("1", "r1")).toBe(true);
        expect(AppTile.isLive("1", "r2")).toBe(false);

-        SettingsStore.getValue = (name, roomId) => {
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((name, roomId) => {
            if (name === "RightPanel.phases") {
                if (roomId === "r2") {
                    return {
@ -248,7 +252,7 @@ describe("AppTile", () => {
                return null;
            }
            return realGetValue(name, roomId);
-        };
+        });
        // Wait for RPS room 2 updates to fire
        const rpsUpdated2 = waitForRps("r2");
        // Switch to room 2
@ -266,8 +270,6 @@ describe("AppTile", () => {

        expect(AppTile.isLive("1", "r1")).toBe(false);
        expect(AppTile.isLive("1", "r2")).toBe(true);
-
-        SettingsStore.getValue = realGetValue;
    });

    it("preserves non-persisted widget on container move", async () => {
--- a/test/components/views/elements/PollCreateDialog-test.tsx
+++ b/test/components/views/elements/PollCreateDialog-test.tsx
@ -26,16 +26,15 @@ import {
    M_TEXT,
    PollStartEvent,
 } from 'matrix-events-sdk';
-import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';

 import {
-    wrapInMatrixClientContext,
    findById,
-    stubClient,
+    getMockClientWithEventEmitter,
 } from '../../../test-utils';
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import _PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
-const PollCreateDialog = wrapInMatrixClientContext(_PollCreateDialog);
+import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';

 // Fake date to give a predictable snapshot
 const realDateNow = Date.now;
@ -51,9 +50,21 @@ afterAll(() => {
 });

 describe("PollCreateDialog", () => {
+    const mockClient = getMockClientWithEventEmitter({
+        sendEvent: jest.fn().mockResolvedValue({ event_id: '1' }),
+    });
+
+    beforeEach(() => {
+        mockClient.sendEvent.mockClear();
+    });
+
    it("renders a blank poll", () => {
        const dialog = mount(
            <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
+            {
+                wrappingComponent: MatrixClientContext.Provider,
+                wrappingComponentProps: { value: mockClient },
+            },
        );
        expect(dialog.html()).toMatchSnapshot();
    });
@ -207,9 +218,6 @@ describe("PollCreateDialog", () => {
    });

    it("displays a spinner after submitting", () => {
-        stubClient();
-        MatrixClientPeg.get().sendEvent = jest.fn(() => Promise.resolve());
-
        const dialog = mount(
            <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
        );
@ -223,21 +231,6 @@ describe("PollCreateDialog", () => {
    });

    it("sends a poll create event when submitted", () => {
-        stubClient();
-        let sentEventContent: IContent = null;
-        MatrixClientPeg.get().sendEvent = jest.fn(
-            (
-                _roomId: string,
-                _threadId: string,
-                eventType: string,
-                content: IContent,
-            ) => {
-                expect(M_POLL_START.matches(eventType)).toBeTruthy();
-                sentEventContent = content;
-                return Promise.resolve();
-            },
-        );
-
        const dialog = mount(
            <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
        );
@ -246,6 +239,8 @@ describe("PollCreateDialog", () => {
        changeValue(dialog, "Option 2", "A2");

        dialog.find("button").simulate("click");
+        const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
+        expect(M_POLL_START.matches(eventType)).toBeTruthy();
        expect(sentEventContent).toEqual(
            {
                [M_TEXT.name]: "Q\n1. A1\n2. A2",
@ -275,21 +270,6 @@ describe("PollCreateDialog", () => {
    });

    it("sends a poll edit event when editing", () => {
-        stubClient();
-        let sentEventContent: IContent = null;
-        MatrixClientPeg.get().sendEvent = jest.fn(
-            (
-                _roomId: string,
-                _threadId: string,
-                eventType: string,
-                content: IContent,
-            ) => {
-                expect(M_POLL_START.matches(eventType)).toBeTruthy();
-                sentEventContent = content;
-                return Promise.resolve();
-            },
-        );
-
        const previousEvent: MatrixEvent = new MatrixEvent(
            PollStartEvent.from(
                "Poll Q",
@ -312,6 +292,8 @@ describe("PollCreateDialog", () => {
        changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
        dialog.find("button").simulate("click");

+        const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
+        expect(M_POLL_START.matches(eventType)).toBeTruthy();
        expect(sentEventContent).toEqual(
            {
                "m.new_content": {
--- a/test/components/views/messages/DateSeparator-test.tsx
+++ b/test/components/views/messages/DateSeparator-test.tsx
@ -16,17 +16,18 @@ limitations under the License.

 import React from "react";
 import { mount } from "enzyme";
+import { mocked } from "jest-mock";

 import sdk from "../../../skinned-sdk";
-import * as TestUtils from "../../../test-utils";
 import { formatFullDateNoTime } from "../../../../src/DateUtils";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { UIFeature } from "../../../../src/settings/UIFeature";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { getMockClientWithEventEmitter } from "../../../test-utils";

 jest.mock("../../../../src/settings/SettingsStore");

-const _DateSeparator = sdk.getComponent("views.messages.DateSeparator");
-const DateSeparator = TestUtils.wrapInMatrixClientContext(_DateSeparator);
+const DateSeparator = sdk.getComponent("views.messages.DateSeparator");

 describe("DateSeparator", () => {
    const HOUR_MS = 3600000;
@ -45,8 +46,12 @@ describe("DateSeparator", () => {
        }
    }

+    const mockClient = getMockClientWithEventEmitter({});
    const getComponent = (props = {}) =>
-        mount(<DateSeparator {...defaultProps} {...props} />);
+        mount(<DateSeparator {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });

    type TestCase = [string, number, string];
    const testCases: TestCase[] = [
@ -106,7 +111,7 @@ describe("DateSeparator", () => {

    describe('when feature_jump_to_date is enabled', () => {
        beforeEach(() => {
-            (SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
+            mocked(SettingsStore).getValue.mockImplementation((arg) => {
                if (arg === "feature_jump_to_date") {
                    return true;
                }
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/test/components/views/messages/MLocationBody-test.tsx
@ -222,7 +222,7 @@ describe("MLocationBody", () => {

    describe("isSelfLocation", () => {
        it("Returns true for a full m.asset event", () => {
-            const content = makeLocationContent("", 0);
+            const content = makeLocationContent("", '0');
            expect(isSelfLocation(content)).toBe(true);
        });

--- a/test/components/views/messages/MPollBody-test.tsx
+++ b/test/components/views/messages/MPollBody-test.tsx
@ -16,8 +16,7 @@ limitations under the License.

 import React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { Callback, IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { RelatedRelations } from "matrix-js-sdk/src/models/related-relations";
 import {
@ -30,8 +29,8 @@ import {
    M_TEXT,
    POLL_ANSWER,
 } from "matrix-events-sdk";
+import { MockedObject } from "jest-mock";

-import * as TestUtils from "../../../test-utils";
 import sdk from "../../../skinned-sdk";
 import {
    UserVote,
@ -42,19 +41,26 @@ import {
 } from "../../../../src/components/views/messages/MPollBody";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { IBodyProps } from "../../../../src/components/views/messages/IBodyProps";
+import { getMockClientWithEventEmitter } from "../../../test-utils";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

 const CHECKED = "mx_MPollBody_option_checked";

-const _MPollBody = sdk.getComponent("views.messages.MPollBody");
-const MPollBody = TestUtils.wrapInMatrixClientContext(_MPollBody);
+const MPollBody = sdk.getComponent("views.messages.MPollBody");

-MatrixClientPeg.matrixClient = {
-    getUserId: () => "@me:example.com",
-    sendEvent: () => Promise.resolve({ "event_id": "fake_send_id" }),
-};
-setRedactionAllowedForMeOnly(MatrixClientPeg.matrixClient);
+const mockClient = getMockClientWithEventEmitter({
+    getUserId: jest.fn().mockReturnValue("@me:example.com"),
+    sendEvent: jest.fn().mockReturnValue(Promise.resolve({ "event_id": "fake_send_id" })),
+    getRoom: jest.fn(),
+});
+
+setRedactionAllowedForMeOnly(mockClient);

 describe("MPollBody", () => {
+    beforeEach(() => {
+        mockClient.sendEvent.mockClear();
+    });
+
    it("finds no votes if there are none", () => {
        expect(
            allVotes(
@ -110,13 +116,12 @@ describe("MPollBody", () => {
            ]),
        ]);

-        const matrixClient = TestUtils.createTestClient();
-        setRedactionAllowedForMeOnly(matrixClient);
+        setRedactionAllowedForMeOnly(mockClient);

        expect(
            pollEndTs(
                { getRoomId: () => "$room" } as MatrixEvent,
-                matrixClient,
+                mockClient,
                endRelations,
            ),
        ).toBe(12);
@ -132,13 +137,12 @@ describe("MPollBody", () => {
            ]),
        ]);

-        const matrixClient = TestUtils.createTestClient();
-        setRedactionAllowedForMeOnly(matrixClient);
+        setRedactionAllowedForMeOnly(mockClient);

        expect(
            pollEndTs(
                { getRoomId: () => "$room" } as MatrixEvent,
-                matrixClient,
+                mockClient,
                endRelations,
            ),
        ).toBe(13);
@ -460,7 +464,7 @@ describe("MPollBody", () => {
        const votes = [];
        const ends = [];
        const body = newMPollBody(votes, ends, answers);
-        expect(body.html()).toBe("");
+        expect(body.html()).toBeNull();
    });

    it("renders the first 20 answers if 21 were given", () => {
@ -530,110 +534,47 @@ describe("MPollBody", () => {
    });

    it("sends a vote event when I choose an option", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([
-            expectedResponseEvent("wings"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("wings"));
    });

    it("sends only one vote event when I click several times", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([
-            expectedResponseEvent("wings"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(
+            ...expectedResponseEventCall("wings"),
+        );
    });

    it("sends no vote event when I click what I already chose", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
        const votes = [responseEvent("@me:example.com", "wings")];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
        clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([]);
+        expect(mockClient.sendEvent).not.toHaveBeenCalled();
    });

    it("sends several events when I click different options", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
        const votes = [];
        const body = newMPollBody(votes);
        clickRadio(body, "wings");
        clickRadio(body, "italian");
        clickRadio(body, "poutine");
-        expect(receivedEvents).toEqual([
-            expectedResponseEvent("wings"),
-            expectedResponseEvent("italian"),
-            expectedResponseEvent("poutine"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledTimes(3);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("wings"));
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("italian"));
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("poutine"));
    });

    it("sends no events when I click in an ended poll", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
        const ends = [
            endEvent("@me:example.com", 25),
        ];
@ -645,7 +586,7 @@ describe("MPollBody", () => {
        clickEndedOption(body, "wings");
        clickEndedOption(body, "italian");
        clickEndedOption(body, "poutine");
-        expect(receivedEvents).toEqual([]);
+        expect(mockClient.sendEvent).not.toHaveBeenCalled();
    });

    it("finds the top answer among several votes", () => {
@ -888,9 +829,8 @@ describe("MPollBody", () => {

    it("says poll is not ended if endRelations is undefined", () => {
        const pollEvent = new MatrixEvent();
-        const matrixClient = TestUtils.createTestClient();
-        setRedactionAllowedForMeOnly(matrixClient);
-        expect(isPollEnded(pollEvent, matrixClient, undefined)).toBe(false);
+        setRedactionAllowedForMeOnly(mockClient);
+        expect(isPollEnded(pollEvent, mockClient, undefined)).toBe(false);
    });

    it("says poll is not ended if asking for relations returns undefined", () => {
@ -899,15 +839,15 @@ describe("MPollBody", () => {
            "room_id": "#myroom:example.com",
            "content": newPollStart([]),
        });
-        MatrixClientPeg.matrixClient.getRoom = () => {
+        mockClient.getRoom.mockImplementation((_roomId) => {
            return {
                currentState: {
                    maySendRedactionForEvent: (_evt: MatrixEvent, userId: string) => {
                        return userId === "@me:example.com";
                    },
                },
-            };
-        };
+            } as unknown as Room;
+        });
        const getRelationsForEvent =
            (eventId: string, relationType: string, eventType: string) => {
                expect(eventId).toBe("$mypoll");
@ -1134,7 +1074,12 @@ function newMPollBodyFromEvent(
                }
            }
        }
-    />);
+    />, {
+        wrappingComponent: MatrixClientContext.Provider,
+        wrappingComponentProps: {
+            value: mockClient,
+        },
+    });
 }

 function clickRadio(wrapper: ReactWrapper, value: string) {
@ -1271,12 +1216,20 @@ function expectedResponseEvent(answer: string) {
                "rel_type": "m.reference",
            },
        },
-        "eventType": M_POLL_RESPONSE.name,
        "roomId": "#myroom:example.com",
+        "eventType": M_POLL_RESPONSE.name,
        "txnId": undefined,
        "callback": undefined,
    };
 }
+function expectedResponseEventCall(answer: string) {
+    const {
+        content, roomId, eventType,
+    } = expectedResponseEvent(answer);
+    return [
+        roomId, eventType, content,
+    ];
+}

 function endEvent(
    sender = "@me:example.com",
@ -1309,8 +1262,7 @@ function runIsPollEnded(ends: MatrixEvent[]) {
        "content": newPollStart(),
    });

-    const matrixClient = TestUtils.createTestClient();
-    setRedactionAllowedForMeOnly(matrixClient);
+    setRedactionAllowedForMeOnly(mockClient);

    const getRelationsForEvent =
        (eventId: string, relationType: string, eventType: string) => {
@ -1320,7 +1272,7 @@ function runIsPollEnded(ends: MatrixEvent[]) {
            return newEndRelations(ends);
        };

-    return isPollEnded(pollEvent, matrixClient, getRelationsForEvent);
+    return isPollEnded(pollEvent, mockClient, getRelationsForEvent);
 }

 function runFindTopAnswer(votes: MatrixEvent[], ends: MatrixEvent[]) {
@ -1347,8 +1299,8 @@ function runFindTopAnswer(votes: MatrixEvent[], ends: MatrixEvent[]) {
    return findTopAnswer(pollEvent, MatrixClientPeg.get(), getRelationsForEvent);
 }

-function setRedactionAllowedForMeOnly(matrixClient: MatrixClient) {
-    matrixClient.getRoom = (_roomId: string) => {
+function setRedactionAllowedForMeOnly(matrixClient: MockedObject<MatrixClient>) {
+    matrixClient.getRoom.mockImplementation((_roomId: string) => {
        return {
            currentState: {
                maySendRedactionForEvent: (_evt: MatrixEvent, userId: string) => {
@ -1356,7 +1308,7 @@ function setRedactionAllowedForMeOnly(matrixClient: MatrixClient) {
                },
            },
        } as Room;
-    };
+    });
 }

 let EVENT_ID = 0;
--- a/test/components/views/messages/snapshots/DateSeparator-test.tsx.snap
+++ b/test/components/views/messages/snapshots/DateSeparator-test.tsx.snap
@ -1,116 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`DateSeparator renders the date separator correctly 1`] = `
-<Wrapper
+<DateSeparator
  now="2021-12-17T08:09:00.000Z"
  ts={1639728540000}
 >
-  <DateSeparator
-    now="2021-12-17T08:09:00.000Z"
-    ts={1639728540000}
+  <h2
+    aria-label="Today"
+    className="mx_DateSeparator"
+    role="separator"
+    tabIndex={-1}
  >
-    <h2
-      aria-label="Today"
-      className="mx_DateSeparator"
-      role="separator"
-      tabIndex={-1}
+    <hr
+      role="none"
+    />
+    <div
+      aria-hidden="true"
    >
-      <hr
-        role="none"
-      />
-      <div
-        aria-hidden="true"
-      >
-        Today
-      </div>
-      <hr
-        role="none"
-      />
-    </h2>
-  </DateSeparator>
-</Wrapper>
+      Today
+    </div>
+    <hr
+      role="none"
+    />
+  </h2>
+</DateSeparator>
 `;

 exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
-<Wrapper
+<DateSeparator
  now="2021-12-17T08:09:00.000Z"
  ts={1639728540000}
 >
-  <DateSeparator
-    now="2021-12-17T08:09:00.000Z"
-    ts={1639728540000}
+  <h2
+    aria-label="Fri, Dec 17 2021"
+    className="mx_DateSeparator"
+    role="separator"
+    tabIndex={-1}
  >
-    <h2
-      aria-label="Fri, Dec 17 2021"
-      className="mx_DateSeparator"
-      role="separator"
-      tabIndex={-1}
+    <hr
+      role="none"
+    />
+    <ContextMenuTooltipButton
+      className="mx_DateSeparator_jumpToDateMenu"
+      isExpanded={false}
+      onClick={[Function]}
+      title="Jump to date"
    >
-      <hr
-        role="none"
-      />
-      <ContextMenuTooltipButton
+      <AccessibleTooltipButton
+        aria-expanded={false}
+        aria-haspopup={true}
        className="mx_DateSeparator_jumpToDateMenu"
-        isExpanded={false}
+        forceHide={false}
        onClick={[Function]}
+        onContextMenu={[Function]}
        title="Jump to date"
      >
-        <AccessibleTooltipButton
+        <AccessibleButton
          aria-expanded={false}
          aria-haspopup={true}
+          aria-label="Jump to date"
          className="mx_DateSeparator_jumpToDateMenu"
-          forceHide={false}
+          element="div"
+          onBlur={[Function]}
          onClick={[Function]}
          onContextMenu={[Function]}
-          title="Jump to date"
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseOver={[Function]}
+          role="button"
+          tabIndex={0}
        >
-          <AccessibleButton
+          <div
            aria-expanded={false}
            aria-haspopup={true}
            aria-label="Jump to date"
-            className="mx_DateSeparator_jumpToDateMenu"
-            element="div"
+            className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
            onBlur={[Function]}
            onClick={[Function]}
            onContextMenu={[Function]}
            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
            onMouseLeave={[Function]}
            onMouseOver={[Function]}
            role="button"
            tabIndex={0}
          >
            <div
-              aria-expanded={false}
-              aria-haspopup={true}
-              aria-label="Jump to date"
-              className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onContextMenu={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              role="button"
-              tabIndex={0}
+              aria-hidden="true"
            >
-              <div
-                aria-hidden="true"
-              >
-                Fri, Dec 17 2021
-              </div>
-              <div
-                className="mx_DateSeparator_chevron"
-              />
+              Fri, Dec 17 2021
            </div>
-          </AccessibleButton>
-        </AccessibleTooltipButton>
-      </ContextMenuTooltipButton>
-      <hr
-        role="none"
-      />
-    </h2>
-  </DateSeparator>
-</Wrapper>
+            <div
+              className="mx_DateSeparator_chevron"
+            />
+          </div>
+        </AccessibleButton>
+      </AccessibleTooltipButton>
+    </ContextMenuTooltipButton>
+    <hr
+      role="none"
+    />
+  </h2>
+</DateSeparator>
 `;
--- a/test/components/views/messages/snapshots/MPollBody-test.tsx.snap
+++ b/test/components/views/messages/snapshots/MPollBody-test.tsx.snap
--- a/test/components/views/settings/FontScalingPanel-test.tsx
+++ b/test/components/views/settings/FontScalingPanel-test.tsx
@ -19,9 +19,7 @@ import { mount } from "enzyme";

 import '../../../skinned-sdk';
 import * as TestUtils from "../../../test-utils";
-import _FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';
-
-const FontScalingPanel = TestUtils.wrapInMatrixClientContext(_FontScalingPanel);
+import FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';

 // Fake random strings to give a predictable snapshot
 jest.mock(
--- a/test/components/views/settings/KeyboardShortcut-test.tsx
+++ b/test/components/views/settings/KeyboardShortcut-test.tsx
@ -19,7 +19,7 @@ import React from "react";
 import { mount, ReactWrapper } from "enzyme";

 import { Key } from "../../../../src/Keyboard";
-import PlatformPeg from "../../../../src/PlatformPeg";
+import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils/platform";

 const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";

@ -31,6 +31,7 @@ const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper>
 describe("KeyboardShortcut", () => {
    beforeEach(() => {
        jest.resetModules();
+        unmockPlatformPeg();
    });

    it("renders key icon", async () => {
@ -49,7 +50,7 @@ describe("KeyboardShortcut", () => {
    });

    it("doesn't render same modifier twice", async () => {
-        PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
+        mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
        const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
            value: {
                key: Key.A,
--- a/test/components/views/settings/Notifications-test.tsx
+++ b/test/components/views/settings/Notifications-test.tsx
@ -15,14 +15,14 @@ limitations under the License.
 import React from 'react';
 import { mount } from 'enzyme';
 import '../../../skinned-sdk';
-import { IPushRule, IPushRules, RuleId } from 'matrix-js-sdk/src/matrix';
-import { ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
+import { IPushRule, IPushRules, RuleId, IPusher } from 'matrix-js-sdk/src/matrix';
+import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
 import { act } from 'react-dom/test-utils';

 import Notifications from '../../../../src/components/views/settings/Notifications';
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { StandardActions } from '../../../../src/notifications/StandardActions';
+import { getMockClientWithEventEmitter } from '../../../test-utils';

 jest.mock('../../../../src/settings/SettingsStore', () => ({
    monitorSetting: jest.fn(),
@ -64,7 +64,7 @@ describe('<Notifications />', () => {
        return component;
    };

-    const mockClient = {
+    const mockClient = getMockClientWithEventEmitter({
        getPushRules: jest.fn(),
        getPushers: jest.fn(),
        getThreePids: jest.fn(),
@ -72,15 +72,11 @@ describe('<Notifications />', () => {
        setPushRuleEnabled: jest.fn(),
        setPushRuleActions: jest.fn(),
        getRooms: jest.fn().mockReturnValue([]),
-    };
+    });
    mockClient.getPushRules.mockResolvedValue(pushRules);

    const findByTestId = (component, id) => component.find(`[data-test-id="${id}"]`);

-    beforeAll(() => {
-        MatrixClientPeg.get = () => mockClient;
-    });
-
    beforeEach(() => {
        mockClient.getPushRules.mockClear().mockResolvedValue(pushRules);
        mockClient.getPushers.mockClear().mockResolvedValue({ pushers: [] });
@ -124,7 +120,7 @@ describe('<Notifications />', () => {
                    ...pushRules.global,
                    override: [{ ...masterRule, enabled: true }],
                },
-            };
+            } as unknown as IPushRules;
            mockClient.getPushRules.mockClear().mockResolvedValue(disableNotificationsPushRules);
            const component = await getComponentAndWait();

@ -148,7 +144,7 @@ describe('<Notifications />', () => {
                        {
                            medium: ThreepidMedium.Email,
                            address: testEmail,
-                        },
+                        } as unknown as IThreepid,
                    ],
                });
            });
@ -160,7 +156,11 @@ describe('<Notifications />', () => {
            });

            it('renders email switches correctly when notifications are on for email', async () => {
-                mockClient.getPushers.mockResolvedValue({ pushers: [{ kind: 'email', pushkey: testEmail }] });
+                mockClient.getPushers.mockResolvedValue({
+                    pushers: [
+                        { kind: 'email', pushkey: testEmail } as unknown as IPusher,
+                    ],
+                });
                const component = await getComponentAndWait();

                expect(findByTestId(component, 'notif-email-switch').props().value).toEqual(true);
@ -205,7 +205,7 @@ describe('<Notifications />', () => {
            });

            it('enables email notification when toggling off', async () => {
-                const testPusher = { kind: 'email', pushkey: 'tester@test.com' };
+                const testPusher = { kind: 'email', pushkey: 'tester@test.com' } as unknown as IPusher;
                mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] });
                const component = await getComponentAndWait();

--- a/test/components/views/settings/ThemeChoicePanel-test.tsx
+++ b/test/components/views/settings/ThemeChoicePanel-test.tsx
@ -19,9 +19,7 @@ import { mount } from "enzyme";

 import '../../../skinned-sdk';
 import * as TestUtils from "../../../test-utils";
-import _ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';
-
-const ThemeChoicePanel = TestUtils.wrapInMatrixClientContext(_ThemeChoicePanel);
+import ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';

 // Fake random strings to give a predictable snapshot
 jest.mock(
--- a/test/components/views/settings/snapshots/FontScalingPanel-test.tsx.snap
+++ b/test/components/views/settings/snapshots/FontScalingPanel-test.tsx.snap
@ -1,313 +1,311 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`FontScalingPanel renders the font scaling UI 1`] = `
-<Wrapper>
-  <FontScalingPanel>
-    <div
-      className="mx_SettingsTab_section mx_FontScalingPanel"
+<FontScalingPanel>
+  <div
+    className="mx_SettingsTab_section mx_FontScalingPanel"
+  >
+    <span
+      className="mx_SettingsTab_subheading"
+    >
+      Font size
+    </span>
+    <EventTilePreview
+      avatarUrl={null}
+      className="mx_FontScalingPanel_fontSlider_preview"
+      displayName={null}
+      layout="group"
+      message="Hey you. You're the best!"
+      userId={null}
    >
-      <span
-        className="mx_SettingsTab_subheading"
-      >
-        Font size
-      </span>
-      <EventTilePreview
-        avatarUrl={null}
-        className="mx_FontScalingPanel_fontSlider_preview"
-        displayName={null}
-        layout="group"
-        message="Hey you. You're the best!"
-        userId={null}
-      >
-        <div
-          className="mx_FontScalingPanel_fontSlider_preview mx_GroupLayout mx_EventTilePreview_loader"
-        >
-          <Spinner
-            h={32}
-            w={32}
-          >
-            <div
-              className="mx_Spinner"
-            >
-              <div
-                aria-label="Loading..."
-                className="mx_Spinner_icon"
-                style={
-                  Object {
-                    "height": 32,
-                    "width": 32,
-                  }
-                }
-              />
-            </div>
-          </Spinner>
-        </div>
-      </EventTilePreview>
      <div
-        className="mx_FontScalingPanel_fontSlider"
+        className="mx_FontScalingPanel_fontSlider_preview mx_GroupLayout mx_EventTilePreview_loader"
      >
-        <div
-          className="mx_FontScalingPanel_fontSlider_smallText"
-        >
-          Aa
-        </div>
-        <Slider
-          disabled={false}
-          displayFunc={[Function]}
-          onSelectionChange={[Function]}
-          value={15}
-          values={
-            Array [
-              13,
-              14,
-              15,
-              16,
-              18,
-            ]
-          }
+        <Spinner
+          h={32}
+          w={32}
        >
          <div
-            className="mx_Slider"
+            className="mx_Spinner"
          >
-            <div>
+            <div
+              aria-label="Loading..."
+              className="mx_Spinner_icon"
+              style={
+                Object {
+                  "height": 32,
+                  "width": 32,
+                }
+              }
+            />
+          </div>
+        </Spinner>
+      </div>
+    </EventTilePreview>
+    <div
+      className="mx_FontScalingPanel_fontSlider"
+    >
+      <div
+        className="mx_FontScalingPanel_fontSlider_smallText"
+      >
+        Aa
+      </div>
+      <Slider
+        disabled={false}
+        displayFunc={[Function]}
+        onSelectionChange={[Function]}
+        value={15}
+        values={
+          Array [
+            13,
+            14,
+            15,
+            16,
+            18,
+          ]
+        }
+      >
+        <div
+          className="mx_Slider"
+        >
+          <div>
+            <div
+              className="mx_Slider_bar"
+            >
+              <hr
+                onClick={[Function]}
+              />
              <div
-                className="mx_Slider_bar"
+                className="mx_Slider_selection"
              >
-                <hr
-                  onClick={[Function]}
-                />
                <div
-                  className="mx_Slider_selection"
+                  className="mx_Slider_selectionDot"
+                  style={
+                    Object {
+                      "left": "calc(-1.195em + 50%)",
+                    }
+                  }
                >
                  <div
-                    className="mx_Slider_selectionDot"
-                    style={
-                      Object {
-                        "left": "calc(-1.195em + 50%)",
-                      }
-                    }
+                    className="mx_Slider_selectionText"
                  >
-                    <div
-                      className="mx_Slider_selectionText"
-                    >
-                      15
-                    </div>
+                    15
                  </div>
-                  <hr
-                    style={
-                      Object {
-                        "width": "50%",
-                      }
-                    }
-                  />
                </div>
-              </div>
-              <div
-                className="mx_Slider_dotContainer"
-              >
-                <Dot
-                  active={true}
-                  disabled={false}
-                  key="13"
-                  label=""
-                  onClick={[Function]}
-                >
-                  <span
-                    className="mx_Slider_dotValue"
-                    onClick={[Function]}
-                  >
-                    <div
-                      className="mx_Slider_dot mx_Slider_dotActive"
-                    />
-                    <div
-                      className="mx_Slider_labelContainer"
-                    >
-                      <div
-                        className="mx_Slider_label"
-                      />
-                    </div>
-                  </span>
-                </Dot>
-                <Dot
-                  active={true}
-                  disabled={false}
-                  key="14"
-                  label=""
-                  onClick={[Function]}
-                >
-                  <span
-                    className="mx_Slider_dotValue"
-                    onClick={[Function]}
-                  >
-                    <div
-                      className="mx_Slider_dot mx_Slider_dotActive"
-                    />
-                    <div
-                      className="mx_Slider_labelContainer"
-                    >
-                      <div
-                        className="mx_Slider_label"
-                      />
-                    </div>
-                  </span>
-                </Dot>
-                <Dot
-                  active={true}
-                  disabled={false}
-                  key="15"
-                  label=""
-                  onClick={[Function]}
-                >
-                  <span
-                    className="mx_Slider_dotValue"
-                    onClick={[Function]}
-                  >
-                    <div
-                      className="mx_Slider_dot mx_Slider_dotActive"
-                    />
-                    <div
-                      className="mx_Slider_labelContainer"
-                    >
-                      <div
-                        className="mx_Slider_label"
-                      />
-                    </div>
-                  </span>
-                </Dot>
-                <Dot
-                  active={false}
-                  disabled={false}
-                  key="16"
-                  label=""
-                  onClick={[Function]}
-                >
-                  <span
-                    className="mx_Slider_dotValue"
-                    onClick={[Function]}
-                  >
-                    <div
-                      className="mx_Slider_dot"
-                    />
-                    <div
-                      className="mx_Slider_labelContainer"
-                    >
-                      <div
-                        className="mx_Slider_label"
-                      />
-                    </div>
-                  </span>
-                </Dot>
-                <Dot
-                  active={false}
-                  disabled={false}
-                  key="18"
-                  label=""
-                  onClick={[Function]}
-                >
-                  <span
-                    className="mx_Slider_dotValue"
-                    onClick={[Function]}
-                  >
-                    <div
-                      className="mx_Slider_dot"
-                    />
-                    <div
-                      className="mx_Slider_labelContainer"
-                    >
-                      <div
-                        className="mx_Slider_label"
-                      />
-                    </div>
-                  </span>
-                </Dot>
-              </div>
-            </div>
-          </div>
-        </Slider>
-        <div
-          className="mx_FontScalingPanel_fontSlider_largeText"
-        >
-          Aa
-        </div>
-      </div>
-      <SettingsFlag
-        level="account"
-        name="useCustomFontSize"
-        onChange={[Function]}
-        useCheckbox={true}
-      >
-        <StyledCheckbox
-          checked={false}
-          className=""
-          disabled={false}
-          onChange={[Function]}
-        >
-          <span
-            className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-          >
-            <input
-              checked={false}
-              disabled={false}
-              id="checkbox_abdefghi"
-              onChange={[Function]}
-              type="checkbox"
-            />
-            <label
-              htmlFor="checkbox_abdefghi"
-            >
-              <div
-                className="mx_Checkbox_background"
-              >
-                <div
-                  className="mx_Checkbox_checkmark"
+                <hr
+                  style={
+                    Object {
+                      "width": "50%",
+                    }
+                  }
                />
              </div>
-              <div>
-                Use custom size
-              </div>
-            </label>
-          </span>
-        </StyledCheckbox>
-      </SettingsFlag>
-      <Field
-        autoComplete="off"
-        className="mx_FontScalingPanel_customFontSizeField"
-        disabled={true}
-        element="input"
-        id="font_size_field"
-        label="Font size"
-        onChange={[Function]}
-        onValidate={[Function]}
-        placeholder="15"
-        type="number"
-        validateOnBlur={true}
-        validateOnChange={true}
-        validateOnFocus={true}
-        value="15"
+            </div>
+            <div
+              className="mx_Slider_dotContainer"
+            >
+              <Dot
+                active={true}
+                disabled={false}
+                key="13"
+                label=""
+                onClick={[Function]}
+              >
+                <span
+                  className="mx_Slider_dotValue"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="mx_Slider_dot mx_Slider_dotActive"
+                  />
+                  <div
+                    className="mx_Slider_labelContainer"
+                  >
+                    <div
+                      className="mx_Slider_label"
+                    />
+                  </div>
+                </span>
+              </Dot>
+              <Dot
+                active={true}
+                disabled={false}
+                key="14"
+                label=""
+                onClick={[Function]}
+              >
+                <span
+                  className="mx_Slider_dotValue"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="mx_Slider_dot mx_Slider_dotActive"
+                  />
+                  <div
+                    className="mx_Slider_labelContainer"
+                  >
+                    <div
+                      className="mx_Slider_label"
+                    />
+                  </div>
+                </span>
+              </Dot>
+              <Dot
+                active={true}
+                disabled={false}
+                key="15"
+                label=""
+                onClick={[Function]}
+              >
+                <span
+                  className="mx_Slider_dotValue"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="mx_Slider_dot mx_Slider_dotActive"
+                  />
+                  <div
+                    className="mx_Slider_labelContainer"
+                  >
+                    <div
+                      className="mx_Slider_label"
+                    />
+                  </div>
+                </span>
+              </Dot>
+              <Dot
+                active={false}
+                disabled={false}
+                key="16"
+                label=""
+                onClick={[Function]}
+              >
+                <span
+                  className="mx_Slider_dotValue"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="mx_Slider_dot"
+                  />
+                  <div
+                    className="mx_Slider_labelContainer"
+                  >
+                    <div
+                      className="mx_Slider_label"
+                    />
+                  </div>
+                </span>
+              </Dot>
+              <Dot
+                active={false}
+                disabled={false}
+                key="18"
+                label=""
+                onClick={[Function]}
+              >
+                <span
+                  className="mx_Slider_dotValue"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="mx_Slider_dot"
+                  />
+                  <div
+                    className="mx_Slider_labelContainer"
+                  >
+                    <div
+                      className="mx_Slider_label"
+                    />
+                  </div>
+                </span>
+              </Dot>
+            </div>
+          </div>
+        </div>
+      </Slider>
+      <div
+        className="mx_FontScalingPanel_fontSlider_largeText"
      >
-        <div
-          className="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
+        Aa
+      </div>
+    </div>
+    <SettingsFlag
+      level="account"
+      name="useCustomFontSize"
+      onChange={[Function]}
+      useCheckbox={true}
+    >
+      <StyledCheckbox
+        checked={false}
+        className=""
+        disabled={false}
+        onChange={[Function]}
+      >
+        <span
+          className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
        >
          <input
-            autoComplete="off"
-            disabled={true}
-            id="font_size_field"
-            label="Font size"
-            onBlur={[Function]}
+            checked={false}
+            disabled={false}
+            id="checkbox_abdefghi"
            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="15"
-            type="number"
-            value="15"
+            type="checkbox"
          />
          <label
-            htmlFor="font_size_field"
+            htmlFor="checkbox_abdefghi"
          >
-            Font size
+            <div
+              className="mx_Checkbox_background"
+            >
+              <div
+                className="mx_Checkbox_checkmark"
+              />
+            </div>
+            <div>
+              Use custom size
+            </div>
          </label>
-        </div>
-      </Field>
-    </div>
-  </FontScalingPanel>
-</Wrapper>
+        </span>
+      </StyledCheckbox>
+    </SettingsFlag>
+    <Field
+      autoComplete="off"
+      className="mx_FontScalingPanel_customFontSizeField"
+      disabled={true}
+      element="input"
+      id="font_size_field"
+      label="Font size"
+      onChange={[Function]}
+      onValidate={[Function]}
+      placeholder="15"
+      type="number"
+      validateOnBlur={true}
+      validateOnChange={true}
+      validateOnFocus={true}
+      value="15"
+    >
+      <div
+        className="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
+      >
+        <input
+          autoComplete="off"
+          disabled={true}
+          id="font_size_field"
+          label="Font size"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="15"
+          type="number"
+          value="15"
+        />
+        <label
+          htmlFor="font_size_field"
+        >
+          Font size
+        </label>
+      </div>
+    </Field>
+  </div>
+</FontScalingPanel>
 `;
--- a/test/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
+++ b/test/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
@ -1,115 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
-<Wrapper>
-  <ThemeChoicePanel>
-    <div
-      className="mx_SettingsTab_section mx_ThemeChoicePanel"
+<ThemeChoicePanel>
+  <div
+    className="mx_SettingsTab_section mx_ThemeChoicePanel"
+  >
+    <span
+      className="mx_SettingsTab_subheading"
    >
-      <span
-        className="mx_SettingsTab_subheading"
+      Theme
+    </span>
+    <div
+      className="mx_ThemeSelectors"
+    >
+      <StyledRadioGroup
+        definitions={
+          Array [
+            Object {
+              "className": "mx_ThemeSelector_light",
+              "disabled": true,
+              "label": "Light",
+              "value": "light",
+            },
+            Object {
+              "className": "mx_ThemeSelector_dark",
+              "disabled": true,
+              "label": "Dark",
+              "value": "dark",
+            },
+          ]
+        }
+        name="theme"
+        onChange={[Function]}
+        outlined={true}
      >
-        Theme
-      </span>
-      <div
-        className="mx_ThemeSelectors"
-      >
-        <StyledRadioGroup
-          definitions={
-            Array [
-              Object {
-                "className": "mx_ThemeSelector_light",
-                "disabled": true,
-                "label": "Light",
-                "value": "light",
-              },
-              Object {
-                "className": "mx_ThemeSelector_dark",
-                "disabled": true,
-                "label": "Dark",
-                "value": "dark",
-              },
-            ]
-          }
+        <StyledRadioButton
+          checked={false}
+          childrenInLabel={true}
+          className="mx_ThemeSelector_light"
+          disabled={true}
+          id="theme-light"
          name="theme"
          onChange={[Function]}
          outlined={true}
+          value="light"
        >
-          <StyledRadioButton
-            checked={false}
-            childrenInLabel={true}
-            className="mx_ThemeSelector_light"
-            disabled={true}
-            id="theme-light"
-            name="theme"
-            onChange={[Function]}
-            outlined={true}
-            value="light"
+          <label
+            className="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
          >
-            <label
-              className="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
+            <input
+              checked={false}
+              disabled={true}
+              id="theme-light"
+              name="theme"
+              onChange={[Function]}
+              type="radio"
+              value="light"
+            />
+            <div>
+              <div />
+            </div>
+            <div
+              className="mx_StyledRadioButton_content"
            >
-              <input
-                checked={false}
-                disabled={true}
-                id="theme-light"
-                name="theme"
-                onChange={[Function]}
-                type="radio"
-                value="light"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                className="mx_StyledRadioButton_content"
-              >
-                Light
-              </div>
-              <div
-                className="mx_StyledRadioButton_spacer"
-              />
-            </label>
-          </StyledRadioButton>
-          <StyledRadioButton
-            checked={false}
-            childrenInLabel={true}
-            className="mx_ThemeSelector_dark"
-            disabled={true}
-            id="theme-dark"
-            name="theme"
-            onChange={[Function]}
-            outlined={true}
-            value="dark"
+              Light
+            </div>
+            <div
+              className="mx_StyledRadioButton_spacer"
+            />
+          </label>
+        </StyledRadioButton>
+        <StyledRadioButton
+          checked={false}
+          childrenInLabel={true}
+          className="mx_ThemeSelector_dark"
+          disabled={true}
+          id="theme-dark"
+          name="theme"
+          onChange={[Function]}
+          outlined={true}
+          value="dark"
+        >
+          <label
+            className="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
          >
-            <label
-              className="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
+            <input
+              checked={false}
+              disabled={true}
+              id="theme-dark"
+              name="theme"
+              onChange={[Function]}
+              type="radio"
+              value="dark"
+            />
+            <div>
+              <div />
+            </div>
+            <div
+              className="mx_StyledRadioButton_content"
            >
-              <input
-                checked={false}
-                disabled={true}
-                id="theme-dark"
-                name="theme"
-                onChange={[Function]}
-                type="radio"
-                value="dark"
-              />
-              <div>
-                <div />
-              </div>
-              <div
-                className="mx_StyledRadioButton_content"
-              >
-                Dark
-              </div>
-              <div
-                className="mx_StyledRadioButton_spacer"
-              />
-            </label>
-          </StyledRadioButton>
-        </StyledRadioGroup>
-      </div>
+              Dark
+            </div>
+            <div
+              className="mx_StyledRadioButton_spacer"
+            />
+          </label>
+        </StyledRadioButton>
+      </StyledRadioGroup>
    </div>
-  </ThemeChoicePanel>
-</Wrapper>
+  </div>
+</ThemeChoicePanel>
 `;
--- a/test/components/views/spaces/QuickThemeSwitcher-test.tsx
+++ b/test/components/views/spaces/QuickThemeSwitcher-test.tsx
@ -28,7 +28,7 @@ import { findById } from '../../../test-utils';
 import { SettingLevel } from '../../../../src/settings/SettingLevel';
 import dis from '../../../../src/dispatcher/dispatcher';
 import { Action } from '../../../../src/dispatcher/actions';
-import PlatformPeg from "../../../../src/PlatformPeg";
+import { mockPlatformPeg } from '../../../test-utils/platform';

 jest.mock('../../../../src/theme');
 jest.mock('../../../../src/components/views/settings/ThemeChoicePanel', () => ({
@ -45,7 +45,7 @@ jest.mock('../../../../src/dispatcher/dispatcher', () => ({
    register: jest.fn(),
 }));

-PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
+mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });

 describe('<QuickThemeSwitcher />', () => {
    const defaultProps = {
--- a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
+++ b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
@ -1,6 +1,7 @@
 // skinned-sdk should be the first import in most tests
 import '../../../skinned-sdk';
 import React from "react";
+import { mocked } from 'jest-mock';
 import {
    renderIntoDocument,
    Simulate,
@ -53,11 +54,10 @@ describe('<SpaceSettingsVisibilityTab />', () => {
        ];
        const space = mkSpace(client, mockSpaceId);
        const getStateEvents = mockStateEventImplementation(events);
-        space.currentState.getStateEvents.mockImplementation(getStateEvents);
-        space.currentState.mayClientSendStateEvent.mockReturnValue(false);
-        const mockGetJoinRule = jest.fn().mockReturnValue(joinRule);
-        space.getJoinRule = mockGetJoinRule;
-        space.currentState.getJoinRule = mockGetJoinRule;
+        mocked(space.currentState).getStateEvents.mockImplementation(getStateEvents);
+        mocked(space.currentState).mayClientSendStateEvent.mockReturnValue(false);
+        space.getJoinRule.mockReturnValue(joinRule);
+        mocked(space.currentState).getJoinRule.mockReturnValue(joinRule);
        return space as unknown as Room;
    };
    const defaultProps = {
@ -70,6 +70,7 @@ describe('<SpaceSettingsVisibilityTab />', () => {
        const wrapper = renderIntoDocument<HTMLSpanElement>(
            // wrap in element so renderIntoDocument can render functional component
            <span>
+                { /* @ts-ignore */ }
                <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
            </span>,
        ) as HTMLSpanElement;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -28,14 +28,8 @@
    "./test/utils/**/*.tsx",
    "./test/stores/**/*.ts",
    "./test/stores/**/*.tsx",
-    "./test/components/structures/**/*.ts",
-    "./test/components/structures/**/*.tsx",
-    "./test/components/views/context_menus/**/*.ts",
-    "./test/components/views/context_menus/**/*.tsx",
-    "./test/components/views/rooms/**/*.tsx",
-    "./test/components/views/rooms/**/*.ts",
-    "./test/components/views/right_panel/**/*.tsx",
-    "./test/components/views/right_panel/**/*.ts",
+    "./test/components/**/*.tsx",
+    "./test/components/**/*.ts",
  ],
  "exclude": [
    "./test/end-to-end-tests/"