From 18ac6b92fa760088bf1e98cdca9aef29d4576bfb Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 26 Jun 2025 10:02:42 +0200
Subject: [PATCH] test: use `forceCloseAllModals` instead of
 `closeCurrentModal` (#30211)

---
 test/test-utils/utilities.ts                  | 28 ++-----------------
 .../settings/AddRemoveThreepids-test.tsx      |  4 +--
 .../AddRemoveThreepids-test.tsx.snap          |  8 +++---
 3 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/test/test-utils/utilities.ts b/test/test-utils/utilities.ts
index dd3e5e6a62..fef20bddad 100644
--- a/test/test-utils/utilities.ts
+++ b/test/test-utils/utilities.ts
@@ -188,35 +188,11 @@ export const waitEnoughCyclesForModal = async ({
 };
 
 /**
- * A horrible hack necessary to make sure modals don't leak and pollute tests.
- * `jest-matrix-react` automatic cleanup function does not pick up the async modal
- * rendering and the modals don't unmount when the component unmounts. We should strive
- * to fix this.
+ * Clears all modals that are currently open.
  */
 export const clearAllModals = async (): Promise<void> => {
     // Prevent modals from leaking and polluting other tests
-    let keepClosingModals = true;
-    while (keepClosingModals) {
-        keepClosingModals = await act(() => Modal.closeCurrentModal());
-
-        // Then wait for the screen to update (probably React rerender and async/await).
-        // Important for tests using Jest fake timers to not get into an infinite loop
-        // of removing the same modal because the promises don't flush otherwise.
-        //
-        // XXX: Maybe in the future with Jest 29.5.0+, we could use `runAllTimersAsync` instead.
-
-        // this is called in some places where timers are not faked
-        // which causes a lot of noise in the console
-        // to make a hack even hackier check if timers are faked using a weird trick from github
-        // then call the appropriate promise flusher
-        // https://github.com/facebook/jest/issues/10555#issuecomment-1136466942
-        const jestTimersFaked = setTimeout.name === "setTimeout";
-        if (jestTimersFaked) {
-            await flushPromisesWithFakeTimers();
-        } else {
-            await flushPromises();
-        }
-    }
+    act(() => Modal.forceCloseAllModals());
 };
 
 /** Install a stub object at `navigator.mediaDevices` */
diff --git a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx b/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
index 6d3d3de692..58306a508d 100644
--- a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
+++ b/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
@@ -45,9 +45,9 @@ describe("AddRemoveThreepids", () => {
         client = stubClient();
     });
 
-    afterEach(() => {
+    afterEach(async () => {
         jest.restoreAllMocks();
-        clearAllModals();
+        await clearAllModals();
         cleanup();
     });
 
diff --git a/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
index 0258ce7092..fc949f01bf 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
@@ -61,14 +61,14 @@ exports[`AddRemoveThreepids should render email addresses 1`] = `
     >
       <input
         autocomplete="email"
-        id="mx_Field_14"
+        id="mx_Field_15"
         label="Email Address"
         placeholder="Email Address"
         type="text"
         value=""
       />
       <label
-        for="mx_Field_14"
+        for="mx_Field_15"
       >
         Email Address
       </label>
@@ -148,14 +148,14 @@ exports[`AddRemoveThreepids should render phone numbers 1`] = `
       </span>
       <input
         autocomplete="tel-national"
-        id="mx_Field_15"
+        id="mx_Field_16"
         label="Phone Number"
         placeholder="Phone Number"
         type="text"
         value=""
       />
       <label
-        for="mx_Field_15"
+        for="mx_Field_16"
       >
         Phone Number
       </label>