Update Jest to more recent release (#11409)

* Update Jest to more recent release

I want to use things like `jest.advanceTimersByTimeAsync`

* more jest updates

* add dep on types/prettier

* fix LegacyRoomHeader-test

* fix MatrixChat-test

* fix RoomView-test

* fix PollHistory-test

* update SidebarUserSettingsTab-test

* fix PipContainer-test

* fix UserOnboardingPage-test

* fix WidgetContextMenu-test.tsx

* Avoid `mockImplementation` for mock `matchMedia` impl

`mockImplementation` is (now) reset by `jest.resetAllMocks` and
`jest.restoreAllMocks`, which we don't really want here.

Fixes `theme-test`

* Move `mediaDevices` mock out of `setupManualMocks`

This doesn't work well in test suites with multiple tests, because the
`mockReturnValue` is reset for subsequent tests.

In any case, having it mocked out automagically is *magical*. Let's make it
opt-in.

* fix FormattingButtons-test.tsx

* fix DeviceListenerTest

* fix RoomTile-test

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/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

@@ -154,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", () => {