test: use forceCloseAllModals instead of closeCurrentModal (#30211)

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.
+ * Clears all modals that are currently open.
- * `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.
  */
 export const clearAllModals = async (): Promise<void> => {
     // Prevent modals from leaking and polluting other tests
-    let keepClosingModals = true;
+    act(() => Modal.forceCloseAllModals());
-    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();
-        }
-    }
 };
 
 /** Install a stub object at `navigator.mediaDevices` */

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

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>