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/QRCode-test.tsx

@@ -6,13 +6,15 @@ 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 { render, waitFor, cleanup } from "jest-matrix-react";
+import { render, cleanup } from "jest-matrix-react";
 import React from "react";
 
+import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../test-utils/qrcode";
 import QRCode from "../../../../../src/components/views/elements/QRCode";
 
 describe("<QRCode />", () => {
     afterEach(() => {
+        resetQRCodeMock();
         cleanup();
     });
 
@@ -22,14 +24,18 @@ describe("<QRCode />", () => {
     });
 
     it("renders a QR with defaults", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(<QRCode data="asd" />);
-        await waitFor(() => getAllByAltText("QR Code").length === 1);
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 
     it("renders a QR with high error correction level", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(<QRCode data="asd" errorCorrectionLevel="high" />);
-        await waitFor(() => getAllByAltText("QR Code").length === 1);
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 });

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