Stabilise flaky QR code rendering tests (#33593)

* Stabilise QR code rendering tests

* Extract QR mocking code to test-utils

apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx

@@ -6,22 +6,26 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { cleanup, render, waitFor } from "jest-matrix-react";
+import { cleanup, render } from "jest-matrix-react";
 import React from "react";
 
+import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../../test-utils/qrcode";
 import VerificationQRCode from "../../../../../../src/components/views/elements/crypto/VerificationQRCode";
 
 describe("<VerificationQRCode />", () => {
     afterEach(() => {
+        resetQRCodeMock();
         cleanup();
     });
 
     it("renders a QR code", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(
             <VerificationQRCode qrCodeBytes={new Uint8ClampedArray(Buffer.from("asd"))} />,
         );
         // wait for the spinner to go away
-        await waitFor(() => getAllByAltText("QR Code").length === 1, { timeout: 2000 });
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 });