Fix flaky test

apps/web/src/components/AccountCard/AccountBalance.test.tsx

@@ -45,7 +45,9 @@ describe("<AccountBalance />", () => {
 
     expect(button).toBeVisible();
 
-    await act(() => user.click(button));
+    await waitFor(async () => {
+      await act(() => user.click(button));
+    });
 
     await waitFor(() =>
       expect(

apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx

@@ -67,7 +67,11 @@ describe("<DeriveMnemonicAccountModal />", () => {
     await act(() => user.type(screen.getByLabelText("Account name (Optional)"), newAccount.label));
     await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
     await act(() => user.type(screen.getByLabelText("Password"), "test-password"));
-    await act(() => user.click(screen.getByRole("button", { name: "Submit" })));
+    await waitFor(async () => {
+      await act(() => user.click(screen.getByRole("button", { name: "Submit" })));
+    }, {
+
+    });
 
     expect(mockDeriveMnemonicAccount).toHaveBeenCalledWith({
       fingerPrint: account.seedFingerPrint,

apps/web/src/components/CopyButton/CopyButton.test.tsx

@@ -1,5 +1,5 @@
 import { CopyButton } from "./CopyButton";
-import { act, render, screen, userEvent } from "../../testUtils";
+import { act, render, screen, userEvent, waitFor } from "../../testUtils";
 
 describe("<CopyButton />", () => {
   it("copies the value to the clipboard", async () => {
@@ -8,7 +8,9 @@ describe("<CopyButton />", () => {
 
     render(<CopyButton value="hello">Copy</CopyButton>);
 
-    await act(() => user.click(screen.getByTestId("copy-button")));
+    await waitFor(async () => {
+      await act(() => user.click(screen.getByTestId("copy-button")));
+    });
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith("hello");
   });

apps/web/src/components/MasterPasswordModal/MasterPasswordModal.test.tsx

@@ -1,5 +1,5 @@
 import { MasterPasswordModal } from "./MasterPasswordModal";
-import { renderInModal, screen, userEvent } from "../../testUtils";
+import { renderInModal, screen, userEvent, waitFor } from "../../testUtils";
 
 const mockOnSubmit = jest.fn();
 
@@ -9,9 +9,16 @@ describe("<MasterPasswordModal />", () => {
     await renderInModal(<MasterPasswordModal onSubmit={mockOnSubmit} />);
 
     await user.type(screen.getByLabelText("Password"), "testpassword");
-    await user.click(screen.getByRole("button", { name: "Submit" }));
+    await waitFor(
+      async () => {
+        await user.click(screen.getByRole("button", { name: "Submit" }));
+      },
+      {
+        timeout: 5000,
+      }
+    );
 
-    expect(mockOnSubmit).toHaveBeenCalledWith({ password: "testpassword" });
+    await waitFor(() => expect(mockOnSubmit).toHaveBeenCalledWith({ password: "testpassword" }));
   });
 
   it("shows validation error when submitting without a password", async () => {

apps/web/src/components/Menu/AdvancedMenu/AdvancedMenu.test.tsx

@@ -2,7 +2,13 @@ import { mockImplicitAccount } from "@umami/core";
 import { type UmamiStore, accountsActions, addTestAccount, makeStore } from "@umami/state";
 
 import { AdvancedMenu } from "./AdvancedMenu";
-import { dynamicDrawerContextMock, renderInDrawer, screen, userEvent } from "../../../testUtils";
+import {
+  dynamicDrawerContextMock,
+  renderInDrawer,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../../testUtils";
 import { ChangePasswordMenu } from "../ChangePasswordMenu/ChangePasswordMenu";
 import { ErrorLogsMenu } from "../ErrorLogsMenu/ErrorLogsMenu";
 import { NetworkMenu } from "../NetworkMenu/NetworkMenu";
@@ -35,7 +41,9 @@ describe("<AdvancedMenu />", () => {
 
       await renderInDrawer(<AdvancedMenu />, store);
 
-      await userEvent.click(screen.getByText(label));
+      await waitFor(async () => {
+        await userEvent.click(screen.getByText(label));
+      });
       expect(openWith).toHaveBeenCalledWith(<Component />);
     });
   });

apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.test.tsx

@@ -57,7 +57,10 @@ describe("<ImportBackupTab />", () => {
 
     await act(() => user.upload(screen.getByTestId("file-input"), file));
     await act(() => user.type(screen.getByLabelText("Password"), "wrong password"));
-    await act(() => user.click(screen.getByRole("button", { name: "Import Wallet" })));
+
+    await waitFor(async () => {
+      await act(() => user.click(screen.getByRole("button", { name: "Import Wallet" })));
+    });
 
     await waitFor(() => expect(mockToast).toHaveBeenCalledTimes(1));
     expect(mockToast).toHaveBeenCalledWith({

apps/web/src/components/SendFlow/utils.test.tsx

@@ -58,7 +58,11 @@ describe("SendFlow utils", () => {
       render(<TestComponent onSubmit={mockSingle} />);
 
       await waitFor(() => expect(screen.getByText("Preview")).toBeEnabled());
-      await act(() => user.click(screen.getByText("Preview")));
+
+      await waitFor(async () => {
+        await act(() => user.click(screen.getByText("Preview")));
+      });
+
       expect(mockSingle).toHaveBeenCalled();
     });
   });

apps/web/src/components/beacon/PermissionRequestModal.test.tsx

@@ -4,7 +4,7 @@ import {
   type PermissionRequestOutput,
   PermissionScope,
 } from "@airgap/beacon-wallet";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
 import { mockMnemonicAccount } from "@umami/core";
 import { type UmamiStore, WalletClient, addTestAccounts, makeStore } from "@umami/state";
 
@@ -85,7 +85,9 @@ describe("<PermissionRequestModal />", () => {
     // grant permission
     const grantButton = screen.getByRole("button", { name: "Allow" });
     expect(grantButton).toBeEnabled();
-    await act(() => user.click(grantButton));
+    await waitFor(async () => {
+      await act(() => user.click(grantButton));
+    });
 
     expect(store.getState().beacon).toEqual({
       [SENDER_ID]: {

apps/web/src/setupTests.ts

@@ -6,6 +6,45 @@ import { mockToast } from "@umami/state";
 import { mockLocalStorage } from "@umami/test-utils";
 import { setupJestCanvasMock } from "jest-canvas-mock";
 
+const writeText = jest.fn();
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText,
+  },
+});
+
+const XMLHttpRequestMock = jest.fn(() => ({
+  open: jest.fn(),
+  send: jest.fn(),
+  setRequestHeader: jest.fn(),
+  readyState: 4,
+  status: 200,
+  responseText: "",
+  onload: jest.fn(),
+  onerror: jest.fn(),
+  ontimeout: jest.fn(),
+  upload: {
+    onprogress: jest.fn(),
+  },
+}));
+
+Object.defineProperties(XMLHttpRequestMock, {
+  UNSENT: { value: 0 },
+  OPENED: { value: 1 },
+  HEADERS_RECEIVED: { value: 2 },
+  LOADING: { value: 3 },
+  DONE: { value: 4 }
+});
+
+XMLHttpRequestMock.prototype = {
+  open: jest.fn(),
+  send: jest.fn(),
+  setRequestHeader: jest.fn(),
+};
+
+global.XMLHttpRequest = XMLHttpRequestMock as unknown as typeof XMLHttpRequest;
+
 const mockIntersectionObserver = class MockIntersectionObserver {
   callback: jest.Mock;
   options: jest.Mock;
@@ -30,14 +69,6 @@ jest.doMock("@chakra-ui/react", () => ({
   useColorMode: () => ({ colorMode: "light", toggleColorMode: jest.fn() }),
 }));
 
-Object.defineProperties(global, {
-  crypto: { value: webcrypto, writable: true },
-  TextDecoder: { value: TextDecoder, writable: true },
-  TextEncoder: { value: TextEncoder, writable: true },
-  IntersectionObserver: { value: mockIntersectionObserver, writable: true, configurable: true },
-  fetch: { value: jest.fn(), writable: true },
-});
-
 jest.mock("./utils/persistor", () => ({
   pause: jest.fn(),
 }));
@@ -48,6 +79,18 @@ beforeEach(() => {
   Object.defineProperty(window, "localStorage", {
     value: mockLocalStorage(),
   });
+
+  Object.defineProperties(global, {
+    crypto: { value: webcrypto, writable: true },
+    TextDecoder: { value: TextDecoder, writable: true },
+    TextEncoder: { value: TextEncoder, writable: true },
+    IntersectionObserver: { value: mockIntersectionObserver, writable: true, configurable: true },
+    fetch: { value: jest.fn(), writable: true },
+  });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
 });
 
 // TODO: fix act warnings