Update Jest to more recent release

package.json

@@ -158,13 +158,14 @@
         "@types/fs-extra": "^11.0.0",
         "@types/geojson": "^7946.0.8",
         "@types/glob-to-regexp": "^0.4.1",
-        "@types/jest": "29.2.6",
+        "@types/jest": "29.5.3",
         "@types/katex": "^0.16.0",
         "@types/lodash": "^4.14.168",
         "@types/modernizr": "^3.5.3",
         "@types/node": "^16",
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
+        "@types/prettier": "^2.7.0",
         "@types/qrcode": "^1.3.5",
         "@types/react": "17.0.58",
         "@types/react-beautiful-dnd": "^13.0.0",
@@ -202,10 +203,10 @@
         "express": "^4.18.2",
         "fetch-mock-jest": "^1.5.1",
         "fs-extra": "^11.0.0",
-        "jest": "29.3.1",
-        "jest-canvas-mock": "2.4.0",
-        "jest-environment-jsdom": "^29.2.2",
-        "jest-mock": "^29.2.2",
+        "jest": "^29.6.2",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "^29.6.2",
+        "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
         "matrix-mock-request": "^2.5.0",

test/DeviceListener-test.ts

@@ -61,17 +61,18 @@ describe("DeviceListener", () => {
     let mockClient: Mocked<MatrixClient>;
     let mockCrypto: Mocked<CryptoApi>;
 
-    // spy on various toasts' hide and show functions
-    // easier than mocking
-    jest.spyOn(SetupEncryptionToast, "showToast");
-    jest.spyOn(SetupEncryptionToast, "hideToast");
-    jest.spyOn(BulkUnverifiedSessionsToast, "showToast");
-    jest.spyOn(BulkUnverifiedSessionsToast, "hideToast");
-    jest.spyOn(UnverifiedSessionToast, "showToast");
-    jest.spyOn(UnverifiedSessionToast, "hideToast");
-
     beforeEach(() => {
         jest.resetAllMocks();
+
+        // spy on various toasts' hide and show functions
+        // easier than mocking
+        jest.spyOn(SetupEncryptionToast, "showToast").mockReturnValue(undefined);
+        jest.spyOn(SetupEncryptionToast, "hideToast").mockReturnValue(undefined);
+        jest.spyOn(BulkUnverifiedSessionsToast, "showToast").mockReturnValue(undefined);
+        jest.spyOn(BulkUnverifiedSessionsToast, "hideToast").mockReturnValue(undefined);
+        jest.spyOn(UnverifiedSessionToast, "showToast").mockResolvedValue(undefined);
+        jest.spyOn(UnverifiedSessionToast, "hideToast").mockReturnValue(undefined);
+
         mockPlatformPeg({
             getAppVersion: jest.fn().mockResolvedValue("1.2.3"),
         });

test/audio/VoiceRecording-test.ts

@@ -21,6 +21,7 @@ import Recorder from "opus-recorder/dist/recorder.min.js";
 import { VoiceRecording, voiceRecorderOptions, highQualityRecorderOptions } from "../../src/audio/VoiceRecording";
 import { createAudioContext } from "../..//src/audio/compat";
 import MediaDeviceHandler from "../../src/MediaDeviceHandler";
+import { useMockMediaDevices } from "../test-utils";
 
 jest.mock("opus-recorder/dist/recorder.min.js");
 const RecorderMock = mocked(Recorder);
@@ -56,6 +57,7 @@ describe("VoiceRecording", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         recording = new VoiceRecording();
         // @ts-ignore
         recording.observable = {

test/components/structures/MatrixChat-test.tsx

@@ -194,7 +194,7 @@ describe("<MatrixChat />", () => {
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        jest.clearAllMocks();
     });
 
     it("should render spinner while app is loading", () => {

test/components/structures/PipContainer-test.tsx

@@ -35,6 +35,7 @@ import {
     mkRoomCreateEvent,
     mockPlatformPeg,
     flushPromises,
+    useMockMediaDevices,
 } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { CallStore } from "../../../src/stores/CallStore";
@@ -84,6 +85,8 @@ describe("PipContainer", () => {
     };
 
     beforeEach(async () => {
+        useMockMediaDevices();
+
         user = userEvent.setup();
 
         stubClient();
@@ -133,7 +136,7 @@ describe("PipContainer", () => {
         cleanup();
         await Promise.all([CallStore.instance, WidgetMessagingStore.instance].map(resetAsyncStoreWithClient));
         client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
-        jest.restoreAllMocks();
+        jest.clearAllMocks();
     });
 
     const renderPip = () => {

test/components/structures/RoomView-test.tsx

@@ -104,7 +104,7 @@ describe("RoomView", () => {
 
     afterEach(() => {
         unmockPlatformPeg();
-        jest.restoreAllMocks();
+        jest.clearAllMocks();
     });
 
     const mountRoomView = async (ref?: RefObject<_RoomView>): Promise<RenderResult> => {

test/components/views/context_menus/WidgetContextMenu-test.tsx

@@ -50,15 +50,17 @@ describe("<WidgetContextMenu />", () => {
         avatar_url: undefined,
     };
 
-    const mockClient = {
-        getUserId: jest.fn().mockReturnValue(userId),
-    } as unknown as MatrixClient;
+    let mockClient: MatrixClient;
 
     let onFinished: () => void;
 
     beforeEach(() => {
         onFinished = jest.fn();
         jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+
+        mockClient = {
+            getUserId: jest.fn().mockReturnValue(userId),
+        } as unknown as MatrixClient;
     });
 
     afterEach(() => {

test/components/views/messages/CallEvent-test.tsx

@@ -29,6 +29,7 @@ import {
     setupAsyncStoreWithClient,
     resetAsyncStoreWithClient,
     wrapInMatrixClientContext,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
@@ -41,9 +42,6 @@ import { ConnectionState } from "../../../../src/models/Call";
 const CallEvent = wrapInMatrixClientContext(UnwrappedCallEvent);
 
 describe("CallEvent", () => {
-    useMockedCalls();
-    jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
-
     let client: Mocked<MatrixClient>;
     let room: Room;
     let alice: RoomMember;
@@ -55,6 +53,10 @@ describe("CallEvent", () => {
         jest.useFakeTimers();
         jest.setSystemTime(0);
 
+        useMockMediaDevices();
+        useMockedCalls();
+        jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
+
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
         client.getUserId.mockReturnValue("@alice:example.org");

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
-import { Filter, EventTimeline, Room } from "matrix-js-sdk/src/matrix";
+import { act, fireEvent, render } from "@testing-library/react";
+import { Filter, EventTimeline, Room, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { M_POLL_START } from "matrix-js-sdk/src/@types/polls";
 
 import { PollHistory } from "../../../../../src/components/views/polls/pollHistory/PollHistory";
@@ -194,7 +194,11 @@ describe("<PollHistory />", () => {
         const fourtyDaysAgoTs = now - 60000 * 60 * 24 * 40;
         const pollStart = makePollStartEvent("Question?", userId, undefined, { ts: fourtyDaysAgoTs, id: "1" });
 
-        jest.spyOn(liveTimeline, "getEvents").mockReset().mockReturnValueOnce([]).mockReturnValueOnce([pollStart]);
+        jest.spyOn(liveTimeline, "getEvents")
+            .mockReset()
+            .mockReturnValueOnce([])
+            .mockReturnValueOnce([pollStart])
+            .mockReturnValue(undefined as unknown as MatrixEvent[]);
 
         // mock three pages of timeline history
         jest.spyOn(liveTimeline, "getPaginationToken")
@@ -203,7 +207,7 @@ describe("<PollHistory />", () => {
             .mockReturnValueOnce("test-pagination-token-3");
 
         const { getByText } = getComponent();
-        await flushPromises();
+        await act(flushPromises);
 
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(1);
 
@@ -216,7 +220,7 @@ describe("<PollHistory />", () => {
         // load more polls button still in UI, with loader
         expect(getByText("Load more polls")).toMatchSnapshot();
 
-        await flushPromises();
+        await act(flushPromises);
 
         // no more spinner
         expect(getByText("Load more polls")).toMatchSnapshot();

test/components/views/rooms/LegacyRoomHeader-test.tsx

@@ -28,6 +28,7 @@ import {
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { ClientWidgetApi, Widget } from "matrix-widget-api";
 import EventEmitter from "events";
+import { setupJestCanvasMock } from "jest-canvas-mock";
 
 import type { MatrixClient, MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import type { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
@@ -73,6 +74,10 @@ describe("LegacyRoomHeader", () => {
     let carol: RoomMember;
 
     beforeEach(async () => {
+        // some of our tests rely on the jest canvas mock, and `afterEach` will have reset the mock, so we need to
+        // restore it.
+        setupJestCanvasMock();
+
         mockPlatformPeg({ supportsJitsiScreensharing: () => true });
 
         stubClient();

test/components/views/rooms/RoomTile-test.tsx

@@ -38,6 +38,7 @@ import {
     filterConsole,
     flushPromises,
     mkMessage,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import { CallStore } from "../../../../src/stores/CallStore";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
@@ -134,6 +135,7 @@ describe("RoomTile", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         sdkContext = new TestSdkContext();
 
         client = mocked(stubClient());
@@ -152,7 +154,7 @@ describe("RoomTile", () => {
     afterEach(() => {
         // @ts-ignore
         MessagePreviewStore.instance.previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();
-        jest.restoreAllMocks();
+        jest.clearAllMocks();
     });
 
     describe("when message previews are not enabled", () => {

test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx

@@ -73,6 +73,10 @@ const classes = {
 };
 
 describe("FormattingButtons", () => {
+    beforeEach(() => {
+        openLinkModalSpy.mockReturnValue(undefined);
+    });
+
     afterEach(() => {
         jest.resetAllMocks();
     });

test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx

@@ -28,7 +28,7 @@ describe("<SidebarUserSettingsTab />", () => {
     beforeEach(() => {
         jest.spyOn(PosthogTrackers, "trackInteraction").mockClear();
         jest.spyOn(SettingsStore, "getValue").mockRestore();
-        jest.spyOn(SettingsStore, "setValue").mockReset();
+        jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
     });
 
     it("renders sidebar settings", () => {

test/components/views/user-onboarding/UserOnboardingPage-test.tsx

@@ -24,12 +24,12 @@ import SdkConfig from "../../../../src/SdkConfig";
 
 jest.mock("../../../../src/components/structures/EmbeddedPage", () => ({
     __esModule: true,
-    default: jest.fn().mockImplementation(({ url }) => <div>{url}</div>),
+    default: ({ url }: { url: string }) => <div>{url}</div>,
 }));
 
 jest.mock("../../../../src/components/structures/HomePage", () => ({
     __esModule: true,
-    default: jest.fn().mockImplementation(() => <div>home page</div>),
+    default: () => <div>home page</div>,
 }));
 
 describe("UserOnboardingPage", () => {

test/components/views/voip/CallView-test.tsx

@@ -30,6 +30,7 @@ import {
     useMockedCalls,
     MockedCall,
     setupAsyncStoreWithClient,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { CallView as _CallView } from "../../../../src/components/views/voip/CallView";
@@ -41,7 +42,7 @@ import MediaDeviceHandler from "../../../../src/MediaDeviceHandler";
 
 const CallView = wrapInMatrixClientContext(_CallView);
 
-describe("CallLobby", () => {
+describe("CallView", () => {
     useMockedCalls();
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
@@ -50,7 +51,7 @@ describe("CallLobby", () => {
     let alice: RoomMember;
 
     beforeEach(() => {
-        mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([]);
+        useMockMediaDevices();
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());

test/setup/setupManualMocks.ts

@@ -56,7 +56,8 @@ class MyClipboardEvent extends Event {}
 window.ClipboardEvent = MyClipboardEvent as any;
 
 // matchMedia is not included in jsdom
-const mockMatchMedia = jest.fn().mockImplementation((query) => ({
+// TODO: Extract this to a function and have tests that need it opt into it.
+const mockMatchMedia = (query: string) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -65,7 +66,7 @@ const mockMatchMedia = jest.fn().mockImplementation((query) => ({
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),
-}));
+});
 global.matchMedia = mockMatchMedia;
 
 // maplibre requires a createObjectURL mock
@@ -91,11 +92,3 @@ window.fetch = fetchMock.sandbox();
 
 // @ts-ignore
 window.Response = Response;
-
-// set up mediaDevices mock
-Object.defineProperty(navigator, "mediaDevices", {
-    value: {
-        enumerateDevices: jest.fn().mockResolvedValue([]),
-        getUserMedia: jest.fn(),
-    },
-});

test/stores/room-list/algorithms/Algorithm-test.ts

@@ -20,7 +20,13 @@ import { Widget } from "matrix-widget-api";
 
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import type { ClientWidgetApi } from "matrix-widget-api";
-import { stubClient, setupAsyncStoreWithClient, useMockedCalls, MockedCall } from "../../../test-utils";
+import {
+    stubClient,
+    setupAsyncStoreWithClient,
+    useMockedCalls,
+    MockedCall,
+    useMockMediaDevices,
+} from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { DefaultTagID } from "../../../../src/stores/room-list/models";
@@ -37,6 +43,7 @@ describe("Algorithm", () => {
     let algorithm: Algorithm;
 
     beforeEach(() => {
+        useMockMediaDevices();
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
         DMRoomMap.makeShared(client);

test/test-utils/utilities.ts

@@ -225,3 +225,12 @@ export const clearAllModals = async (): Promise<void> => {
         }
     }
 };
+
+/** Install a stub object at `navigator.mediaDevices` */
+export function useMockMediaDevices(): void {
+    // @ts-ignore
+    navigator["mediaDevices"] = {
+        enumerateDevices: jest.fn().mockResolvedValue([]),
+        getUserMedia: jest.fn(),
+    };
+}

test/utils/media/requestMediaPermissions-test.tsx

@@ -19,7 +19,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { screen } from "@testing-library/react";
 
 import { requestMediaPermissions } from "../../../src/utils/media/requestMediaPermissions";
-import { flushPromises } from "../../test-utils";
+import { flushPromises, useMockMediaDevices } from "../../test-utils";
 
 describe("requestMediaPermissions", () => {
     let error: Error;
@@ -34,6 +34,7 @@ describe("requestMediaPermissions", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         error = new Error();
         jest.spyOn(logger, "log");
     });