Update Jest to more recent release #11409

richvdh · 2023-08-14T17:03:46Z

I want to use things like jest.advanceTimersByTimeAsync

~~based on #11413~~
Fixes element-hq/element-web#24588

This change is marked as an internal change (Task), so will not be included in the changelog.

I want to use things like `jest.advanceTimersByTimeAsync`

richvdh · 2023-08-14T17:29:30Z

package.json

        "@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",


looks like this was previously being pulled in transitively, but is no more.

richvdh · 2023-08-14T17:30:23Z

@t3chguy sorry I needed some more stuff. Could you take another look?

richvdh · 2023-08-15T14:40:32Z

This is proving somewhat tricky. The problem is that Jest changed the semantics of restoreAllMocks, and lots of our tests rely on the old behaviour.

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

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.

richvdh · 2023-08-15T17:57:26Z

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


    let onFinished: () => void;

    beforeEach(() => {
        onFinished = jest.fn();
        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+
+        mockClient = {
+            getUserId: jest.fn().mockReturnValue(userId),


restoreAllMocks now clears the mock return value, so move this in here to set it up before each test.

richvdh · 2023-08-15T17:58:29Z

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

+        useMockedCalls();
+        jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});


move these in here from the top of the describe block, so they are set up afresh after the restoreAllMocks in afterEach

richvdh · 2023-08-15T17:58:58Z

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

+        // set up mediaDevices mock
+        Object.defineProperty(navigator, "mediaDevices", {
+            value: {
+                enumerateDevices: jest.fn().mockResolvedValue([]),
+                getUserMedia: jest.fn(),
+            },
+        });


move this in here from setupManualMocks, again to ensure that they are set up afresh after restoreAllMocks.

richvdh · 2023-08-15T18:01:19Z

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

+            .mockReset()
+            .mockReturnValueOnce([])
+            .mockReturnValueOnce([pollStart])
+            .mockReturnValue(undefined as unknown as MatrixEvent[]);


this is necessary due to a change in the way mockReset works.

https://jestjs.io/docs/29.3/mock-function-api#mockfnmockreset says:

Resetting a mock created with jest.spyOn() will result in a function with no return value.

This no longer appears to be the case as of 29.6 and we now get the original implementation instead.

So, to preserve current behaviour, have it return undefined once we run out of mockReturnValueOnces.

richvdh · 2023-08-15T18:01:33Z

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

@@ -203,7 +207,7 @@ describe("<PollHistory />", () => {
            .mockReturnValueOnce("test-pagination-token-3");

        const { getByText } = getComponent();
-        await flushPromises();
+        await act(flushPromises);


shoved some things in act while I was debugging this test.

richvdh · 2023-08-15T18:03:02Z

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

+    beforeEach(() => {
+        openLinkModalSpy.mockReturnValue(undefined);
+    });


we were previously relying on resetAllMocks to make this return undefined. It doesn't any longer, so we need to do it explicitly.

richvdh · 2023-08-15T18:03:30Z

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


another case of mockReset not working the same way on spyOn

richvdh · 2023-08-15T18:04:55Z

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

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


avoid these being reset by restoreAllMocks by using regular functions instead of mocks.

richvdh · 2023-08-15T18:05:37Z

test/setup/setupManualMocks.ts

+// TODO: Extract this to a function and have tests that need it opt into it.
+const mockMatchMedia = (query: string) => ({


avoid this being reset by restoreAllMocks by using a regular function instead of a mock.

richvdh · 2023-08-15T20:59:19Z

test/DeviceListener-test.ts

+        // 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);


we were previously relying on resetAllMocks to make these return undefined. It doesn't any longer, so we need to do it explicitly.

Update Jest to more recent release

9dd3d5d

I want to use things like `jest.advanceTimersByTimeAsync`

richvdh requested a review from a team as a code owner August 14, 2023 17:03

richvdh requested a review from t3chguy August 14, 2023 17:03

richvdh added the T-Task Refactoring, enabling or disabling functionality, other engineering tasks label Aug 14, 2023

t3chguy mentioned this pull request Aug 14, 2023

Update jest #10657

Closed

1 task

t3chguy approved these changes Aug 14, 2023

View reviewed changes

github-actions bot deployed to Netlify August 14, 2023 17:08 View deployment

richvdh added 2 commits August 14, 2023 18:19

more jest updates

1561c54

add dep on types/prettier

f2b854f

richvdh commented Aug 14, 2023

View reviewed changes

richvdh requested a review from t3chguy August 14, 2023 17:30

github-actions bot deployed to Netlify August 14, 2023 17:33 View deployment

t3chguy approved these changes Aug 14, 2023

View reviewed changes

richvdh added 2 commits August 15, 2023 13:34

fix LegacyRoomHeader-test

8fb0790

fix MatrixChat-test

4f03c69

richvdh requested a review from a team as a code owner August 15, 2023 13:38

richvdh requested a review from germain-gg August 15, 2023 13:38

github-actions bot deployed to Netlify August 15, 2023 13:44 View deployment

richvdh marked this pull request as draft August 15, 2023 13:54

richvdh removed the request for review from germain-gg August 15, 2023 13:54

richvdh added 2 commits August 15, 2023 15:24

fix RoomView-test

b478248

fix PollHistory-test

2c78ec7

github-actions bot deployed to Netlify August 15, 2023 14:31 View deployment

richvdh added 2 commits August 15, 2023 16:41

update SidebarUserSettingsTab-test

6840a9f

fix PipContainer-test

77dae84

github-actions bot deployed to Netlify August 15, 2023 15:49 View deployment

richvdh added 2 commits August 15, 2023 18:02

fix UserOnboardingPage-test

0526efe

fix WidgetContextMenu-test.tsx

84c26d9

Avoid mockImplementation for mock matchMedia impl

790ef21

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

github-actions bot deployed to Netlify August 15, 2023 17:26 View deployment

github-actions bot deployed to Netlify August 15, 2023 17:46 View deployment

github-actions bot deployed to Netlify August 15, 2023 17:59 View deployment

richvdh force-pushed the rav/update_jest branch 2 times, most recently from e1c1eb9 to bcb41e6 Compare August 15, 2023 20:50

Move mediaDevices mock out of setupManualMocks

67b0a9f

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.

github-actions bot deployed to Netlify August 15, 2023 20:55 View deployment

richvdh added 4 commits August 15, 2023 21:55

fix FormattingButtons-test.tsx

3bd5fa1

fix DeviceListenerTest

cf1a849

fix RoomTile-test

20a4703

Merge branch 'rav/mediaDevices_mock' into rav/update_jest

fd9aa0e

richvdh changed the base branch from develop to rav/mediaDevices_mock August 15, 2023 20:57

richvdh commented Aug 15, 2023

View reviewed changes

richvdh force-pushed the rav/update_jest branch from bcb41e6 to fd9aa0e Compare August 15, 2023 21:11

github-actions bot deployed to Netlify August 15, 2023 21:19 View deployment

t3chguy approved these changes Aug 16, 2023

View reviewed changes

Base automatically changed from rav/mediaDevices_mock to develop August 16, 2023 09:19

Merge remote-tracking branch 'origin/develop' into rav/update_jest

70c338d

richvdh marked this pull request as ready for review August 16, 2023 09:52

richvdh enabled auto-merge August 16, 2023 09:53

github-actions bot deployed to Netlify August 16, 2023 09:56 View deployment

richvdh added this pull request to the merge queue Aug 16, 2023

Merged via the queue into develop with commit 7a6d81c Aug 16, 2023
80 checks passed

richvdh deleted the rav/update_jest branch August 16, 2023 10:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Jest to more recent release #11409

Update Jest to more recent release #11409

richvdh commented Aug 14, 2023 •

edited by github-actions bot

richvdh Aug 14, 2023

richvdh commented Aug 14, 2023

richvdh commented Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

richvdh Aug 15, 2023

		useMockedCalls();
		jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});

		// TODO: Extract this to a function and have tests that need it opt into it.
		const mockMatchMedia = (query: string) => ({

Update Jest to more recent release #11409

Update Jest to more recent release #11409

Conversation

richvdh commented Aug 14, 2023 • edited by github-actions bot

Choose a reason for hiding this comment

richvdh commented Aug 14, 2023

richvdh commented Aug 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

richvdh commented Aug 14, 2023 •

edited by github-actions bot