Merge pull request #9252 from Couchers-org/web/chore/upgrade-to-jest-30

chore: Update Jest to 30

Author: darrenvong

app/web/components/ImageInput/ImageInput.test.tsx

@@ -93,7 +93,7 @@ describe("ImageInput component", () => {
       expect(uploadFileMock).toHaveBeenCalledTimes(1);
     });
 
-    expect(onSuccessMock).toBeCalledWith({
+    expect(onSuccessMock).toHaveBeenCalledWith({
       file: MOCK_FILE,
       filename: MOCK_FILE.name,
       key: MOCK_KEY,

app/web/components/LocationAutocomplete/LocationAutocomplete.test.tsx

@@ -80,7 +80,7 @@ describe("LocationAutocomplete component", () => {
     const submitButton = await screen.findByRole("button", { name: "submit" });
     await user.click(submitButton);
     await waitFor(() => {
-      expect(submitAction).toBeCalledWith(
+      expect(submitAction).toHaveBeenCalledWith(
         expect.objectContaining({
           location: {
             name: "test city, test county, test country",
@@ -171,7 +171,7 @@ describe("LocationAutocomplete component", () => {
     await user.click(submitButton);
 
     await waitFor(() => {
-      expect(submitAction).toBeCalledWith(
+      expect(submitAction).toHaveBeenCalledWith(
         expect.objectContaining({
           location: "",
         }),
@@ -239,6 +239,6 @@ describe("LocationAutocomplete component", () => {
     expect(
       await screen.findByText(t("global:location_autocomplete.more_specific")),
     ).toBeVisible();
-    expect(submitAction).not.toBeCalled();
+    expect(submitAction).not.toHaveBeenCalled();
   });
 });

app/web/features/analytics/provider.test.tsx

@@ -16,6 +16,12 @@ jest.mock("./eventCollector", () => ({
 let eventOnSpy: jest.SpyInstance;
 let eventOffSpy: jest.SpyInstance;
 
+// jsdom makes window.location non-configurable, so it can't be replaced with
+// Object.defineProperty. pushState updates pathname/search/href in place instead.
+function setLocation(pathname: string, search = "") {
+  window.history.pushState({}, "", `${pathname}${search}`);
+}
+
 beforeEach(() => {
   mockLogEvent.mockReset();
   mockDestroyCollector.mockReset();
@@ -26,15 +32,7 @@ beforeEach(() => {
   // Reset router to root
   mockRouter.setCurrentUrl("/");
 
-  Object.defineProperty(window, "location", {
-    value: {
-      pathname: "/",
-      search: "",
-      href: "http://localhost/",
-    },
-    writable: true,
-    configurable: true,
-  });
+  setLocation("/");
 });
 
 afterEach(() => {
@@ -112,15 +110,10 @@ describe("AnalyticsProvider", () => {
 
   describe("search property (item 9)", () => {
     it("includes non-UTM query params as search in initial page.viewed", () => {
-      Object.defineProperty(window, "location", {
-        value: {
-          pathname: "/search",
-          search: "?q=paris&guests=2&utm_source=google&utm_medium=cpc",
-          href: "http://localhost/search?q=paris&guests=2&utm_source=google&utm_medium=cpc",
-        },
-        writable: true,
-        configurable: true,
-      });
+      setLocation(
+        "/search",
+        "?q=paris&guests=2&utm_source=google&utm_medium=cpc",
+      );
 
       render(
         <AnalyticsProvider>
@@ -136,15 +129,7 @@ describe("AnalyticsProvider", () => {
     });
 
     it("sets search to null when only UTM params are present", () => {
-      Object.defineProperty(window, "location", {
-        value: {
-          pathname: "/landing",
-          search: "?utm_source=google&utm_campaign=spring",
-          href: "http://localhost/landing?utm_source=google&utm_campaign=spring",
-        },
-        writable: true,
-        configurable: true,
-      });
+      setLocation("/landing", "?utm_source=google&utm_campaign=spring");
 
       render(
         <AnalyticsProvider>
@@ -176,15 +161,10 @@ describe("AnalyticsProvider", () => {
 
   describe("UTM params in session.started", () => {
     it("includes UTM params in session.started properties", () => {
-      Object.defineProperty(window, "location", {
-        value: {
-          pathname: "/",
-          search: "?utm_source=twitter&utm_medium=social&utm_campaign=launch",
-          href: "http://localhost/?utm_source=twitter&utm_medium=social&utm_campaign=launch",
-        },
-        writable: true,
-        configurable: true,
-      });
+      setLocation(
+        "/",
+        "?utm_source=twitter&utm_medium=social&utm_campaign=launch",
+      );
 
       render(
         <AnalyticsProvider>

app/web/features/auth/signup/CommunityGuidelinesForm.test.tsx

@@ -69,14 +69,14 @@ describe("community guidelines signup form", () => {
 
     checkboxes.forEach(async (checkbox) => {
       expect(button).toBeDisabled();
-      expect(signupFlowCommunityGuidelinesMock).not.toBeCalled();
+      expect(signupFlowCommunityGuidelinesMock).not.toHaveBeenCalled();
       await user.click(checkbox);
     });
     await waitFor(() => expect(button).not.toBeDisabled());
     await user.click(button);
 
     await waitFor(() => {
-      expect(signupFlowCommunityGuidelinesMock).toBeCalledWith(
+      expect(signupFlowCommunityGuidelinesMock).toHaveBeenCalledWith(
         "dummy-token",
         true,
       );

app/web/features/auth/signup/Signup.test.tsx

@@ -594,7 +594,7 @@ describe("Signup", () => {
     expect(
       await screen.findByLabelText(t("auth:account_form.username.field_label")),
     ).toBeVisible();
-    expect(signupFlowEmailTokenMock).toBeCalledWith("fakeEmailToken");
+    expect(signupFlowEmailTokenMock).toHaveBeenCalledWith("fakeEmailToken");
     const { result } = renderHook(() => useAuthStore(), { wrapper });
     expect(result.current.authState.flowState?.needVerifyEmail).toBe(false);
   });

app/web/features/communities/discussions/DiscussionPage.test.tsx

@@ -364,7 +364,7 @@ describe("Discussion page", () => {
     );
 
     await waitFor(() => {
-      expect(mockRouter.back).toBeCalled();
+      expect(mockRouter.back).toHaveBeenCalled();
     });
   });
 

app/web/features/messages/groupchats/GroupChatView.test.tsx

@@ -449,7 +449,10 @@ describe("GroupChatView", () => {
     screen.getByText(t("messages:chat_view.mute.unmute_button_label")).click();
 
     await waitFor(() => {
-      expect(muteChatMock).toBeCalledWith({ groupChatId: 1, unmute: true });
+      expect(muteChatMock).toHaveBeenCalledWith({
+        groupChatId: 1,
+        unmute: true,
+      });
       expect(muteIcon).not.toBeVisible();
     });
   });
@@ -482,7 +485,10 @@ describe("GroupChatView", () => {
       .click();
 
     await waitFor(() => {
-      expect(muteChatMock).toBeCalledWith({ groupChatId: 1, forever: true });
+      expect(muteChatMock).toHaveBeenCalledWith({
+        groupChatId: 1,
+        forever: true,
+      });
     });
 
     // Manually update the query data to reflect the muted state

app/web/features/messages/requests/MarkAllReadButton.test.tsx

@@ -93,8 +93,8 @@ describe("MarkAllReadButton", () => {
     );
 
     await waitFor(() => {
-      expect(markLastSeenGroupChatMock).toBeCalledTimes(1);
-      expect(markLastSeenGroupChatMock).toBeCalledWith(2, 2);
+      expect(markLastSeenGroupChatMock).toHaveBeenCalledTimes(1);
+      expect(markLastSeenGroupChatMock).toHaveBeenCalledWith(2, 2);
       expect(mutableStore).toMatchObject({
         chats: [
           { lastSeenMessageId: 1 },
@@ -115,8 +115,8 @@ describe("MarkAllReadButton", () => {
     );
 
     await waitFor(() => {
-      expect(markLastRequestSeenMock).toBeCalledTimes(1);
-      expect(markLastRequestSeenMock).toBeCalledWith(2, 2);
+      expect(markLastRequestSeenMock).toHaveBeenCalledTimes(1);
+      expect(markLastRequestSeenMock).toHaveBeenCalledWith(2, 2);
       expect(mutableStore).toMatchObject({
         requests: [
           { lastSeenMessageId: 1 },

app/web/features/notifications/PushNotificationSettings.test.tsx

@@ -52,7 +52,6 @@ const mockServiceWorker = {
 
 describe("PushNotificationSettings Component", () => {
   const originalNavigator = global.navigator;
-  const originalWindow = global.window;
 
   const mNotification = jest.fn();
   Object.defineProperty(global, "Notification", {
@@ -73,10 +72,6 @@ describe("PushNotificationSettings Component", () => {
       value: originalNavigator,
       configurable: true,
     });
-    Object.defineProperty(global, "window", {
-      value: originalWindow,
-      configurable: true,
-    });
 
     jest.resetAllMocks();
   });

app/web/features/profile/edit/EditProfilePage.test.tsx

@@ -78,7 +78,10 @@ describe("Edit profile", () => {
 
     await user.clear(aboutMeInput);
     await waitFor(() => expect(aboutMeInput).toHaveValue(""));
-    await user.type(aboutMeInput, aboutMeText);
+    // Use paste instead of type for large text - much faster, avoids a
+    // re-render of the whole form per keystroke
+    await user.click(aboutMeInput);
+    await user.paste(aboutMeText);
 
     const saveButton = await screen.findByRole("button", {
       name: t("global:save_changes"),