@prosopo/procaptcha-puzzle 2.13.3 → 2.14.0

package/dist/tests/procaptchaPuzzle.unit.test.js

@@ -1,22 +1,27 @@
-import { act, createElement } from "react";
-import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import * as entrypoint from "../index.js";
+import { mount, settle } from "./domHarness.js";
 import { config } from "./managerHarness.js";
 const mocks = vi.hoisted(() => ({
     received: [],
+    destroyed: { count: 0 },
 }));
-vi.mock("../components/ProcaptchaWidget.js", async () => {
-    const { createElement: create } = await import("react");
-    return {
-        default: (props) => {
-            mocks.received.push(props);
-            return create("div", { "data-testid": "widget" });
-        },
-    };
-});
-let container;
-let root;
+vi.mock("../components/procaptchaWidget.js", () => ({
+    mountProcaptchaPuzzleWidget: (container, props) => {
+        mocks.received.push(props);
+        const element = document.createElement("div");
+        element.setAttribute("data-testid", "widget");
+        container.appendChild(element);
+        return {
+            destroy: () => {
+                element.remove();
+                mocks.destroyed.count += 1;
+            },
+        };
+    },
+}));
+let mounted;
+let widget;
 const props = (overrides = {}) => ({
     config: config(),
     callbacks: {},
@@ -24,28 +29,24 @@ const props = (overrides = {}) => ({
     ...overrides,
 });
 const render = async (widgetProps) => {
-    await act(async () => {
-        root.render(createElement(entrypoint.ProcaptchaPuzzle, widgetProps));
-    });
+    widget = entrypoint.mountProcaptchaPuzzle(mounted.container, widgetProps);
+    await settle();
 };
 beforeEach(() => {
     mocks.received.length = 0;
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    act(() => {
-        root = createRoot(container);
-    });
+    mocks.destroyed.count = 0;
+    widget = undefined;
+    mounted = mount();
 });
 afterEach(() => {
-    act(() => {
-        root.unmount();
-    });
-    container.remove();
+    widget?.destroy();
+    widget = undefined;
+    mounted.unmount();
 });
-describe("ProcaptchaPuzzle", () => {
+describe("mountProcaptchaPuzzle", () => {
     test("renders the widget once it has loaded", async () => {
         await render(props());
-        expect(container.querySelector('[data-testid="widget"]')).not.toBeNull();
+        expect(mounted.container.querySelector('[data-testid="widget"]')).not.toBeNull();
     });
     test("passes on the props the widget needs but never names", async () => {
         const onSessionInvalidated = vi.fn();
@@ -66,16 +67,26 @@ describe("ProcaptchaPuzzle", () => {
         expect(mocks.received[0]?.callbacks).toBe(callbacks);
         expect(mocks.received[0]?.config).toEqual(config());
     });
-    test("mounts one widget per render, not one per prop change", async () => {
+    test("tears the loaded widget down", async () => {
         await render(props());
-        await render(props({ autoStart: true }));
-        expect(container.querySelectorAll('[data-testid="widget"]')).toHaveLength(1);
+        widget?.destroy();
+        widget = undefined;
+        expect(mocks.destroyed.count).toBe(1);
+        expect(mounted.container.querySelector('[data-testid="widget"]')).toBeNull();
+    });
+    test("cancels a mount that is still loading", async () => {
+        widget = entrypoint.mountProcaptchaPuzzle(mounted.container, props());
+        widget.destroy();
+        widget = undefined;
+        await settle();
+        expect(mocks.received).toHaveLength(0);
     });
 });
 describe("the package entrypoint", () => {
-    test("exports the wrapper a consumer mounts", () => {
-        expect(typeof entrypoint.ProcaptchaPuzzle).toBe("function");
-        expect(Object.keys(entrypoint)).toEqual(["ProcaptchaPuzzle"]);
+    test("exports the mount functions a consumer needs", () => {
+        expect(typeof entrypoint.mountProcaptchaPuzzle).toBe("function");
+        expect(typeof entrypoint.loadProcaptchaPuzzle).toBe("function");
+        expect(typeof entrypoint.mountProcaptchaPuzzleWidget).toBe("function");
     });
 });
 //# sourceMappingURL=procaptchaPuzzle.unit.test.js.map

package/dist/tests/procaptchaPuzzle.unit.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"procaptchaPuzzle.unit.test.js","sourceRoot":"","sources":["../../src/tests/procaptchaPuzzle.unit.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"procaptchaPuzzle.unit.test.js","sourceRoot":"","sources":["../../src/tests/procaptchaPuzzle.unit.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/procaptchaWidget.unit.test.js

@@ -1,8 +1,7 @@
 import { ModeEnum, } from "@prosopo/types";
-import { act, createElement } from "react";
-import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi, } from "vitest";
-import Procaptcha from "../components/ProcaptchaWidget.js";
+import { mountProcaptchaPuzzleWidget, } from "../components/procaptchaWidget.js";
+import { fire, mount, settle } from "./domHarness.js";
 import { challengeResponse, config, frictionless } from "./managerHarness.js";
 const mocks = vi.hoisted(() => {
     const start = vi.fn();
@@ -10,9 +9,9 @@ const mocks = vi.hoisted(() => {
     const resetState = vi.fn();
     const constructions = [];
     const loadI18next = vi.fn();
-    const checkboxProps = { current: undefined };
-    const canvasProps = { current: undefined };
-    const honeypotQuestions = [];
+    const canvasProps = {
+        current: undefined,
+    };
     const translationsReady = { current: true };
     return {
         translationsReady,
@@ -21,9 +20,7 @@ const mocks = vi.hoisted(() => {
         resetState,
         constructions,
         loadI18next,
-        checkboxProps,
         canvasProps,
-        honeypotQuestions,
     };
 });
 vi.mock("../services/Manager.js", () => ({
@@ -36,47 +33,38 @@ vi.mock("../services/Manager.js", () => ({
         };
     },
 }));
-vi.mock("../components/PuzzleCanvas.js", async () => {
-    const { createElement: create } = await import("react");
-    const PuzzleCanvas = (canvasProps) => {
+vi.mock("../components/puzzleCanvas.js", () => ({
+    mountPuzzleCanvas: (canvasProps) => {
         mocks.canvasProps.current = canvasProps;
-        return create("div", { "data-cy": "canvas-stub" });
-    };
-    return { PuzzleCanvas };
-});
-vi.mock("@prosopo/procaptcha-common", async (importOriginal) => {
-    const actual = await importOriginal();
-    const { createElement: create, forwardRef } = await import("react");
-    const Checkbox = (checkboxProps) => {
-        mocks.checkboxProps.current = checkboxProps;
-        return create("input", {
-            type: "checkbox",
-            readOnly: true,
-            checked: checkboxProps.checked,
-            "aria-label": checkboxProps.labelText,
-            "data-error": checkboxProps.error,
-            "data-loading": String(checkboxProps.loading),
-        });
-    };
-    const Honeypot = forwardRef(({ encodedQuestion }, ref) => {
-        mocks.honeypotQuestions.push(encodedQuestion);
-        return create("input", { type: "text", ref, name: "honeypot" });
-    });
-    return { ...actual, Checkbox, Honeypot };
-});
+        const element = document.createElement("div");
+        element.setAttribute("data-cy", "canvas-stub");
+        document.body.appendChild(element);
+        return {
+            update: (next) => {
+                mocks.canvasProps.current = next;
+            },
+            destroy: () => {
+                element.remove();
+                mocks.canvasProps.current = undefined;
+            },
+        };
+    },
+}));
 vi.mock("@prosopo/locale", async (importOriginal) => {
     const actual = await importOriginal();
     return {
         ...actual,
         loadI18next: mocks.loadI18next,
-        useTranslation: () => ({
+        createTranslator: () => ({
             t: (key) => key,
-            ready: mocks.translationsReady.current,
+            isReady: () => mocks.translationsReady.current,
+            subscribe: () => () => undefined,
+            i18n: undefined,
         }),
     };
 });
-let container;
-let root;
+let mounted;
+let widget;
 const i18nStub = (language, changeLanguage) => ({ language, changeLanguage });
 const props = (overrides = {}) => ({
     config: config(),
@@ -85,69 +73,53 @@ const props = (overrides = {}) => ({
     ...overrides,
 });
 const render = (widgetProps) => {
-    act(() => {
-        root.render(createElement(Procaptcha, widgetProps));
-    });
+    widget = mountProcaptchaPuzzleWidget(mounted.container, widgetProps);
+};
+const destroy = () => {
+    widget?.destroy();
+    widget = undefined;
 };
 beforeEach(() => {
     vi.clearAllMocks();
     mocks.constructions.length = 0;
-    mocks.honeypotQuestions.length = 0;
     mocks.translationsReady.current = true;
-    mocks.checkboxProps.current = undefined;
     mocks.canvasProps.current = undefined;
     mocks.start.mockResolvedValue(challengeResponse());
     mocks.submitSolution.mockResolvedValue(true);
     mocks.loadI18next.mockResolvedValue(undefined);
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    act(() => {
-        root = createRoot(container);
-    });
+    widget = undefined;
+    mounted = mount();
 });
 afterEach(() => {
-    act(() => {
-        root.unmount();
-    });
-    container.remove();
+    destroy();
+    mounted.unmount();
     vi.useRealTimers();
     vi.restoreAllMocks();
 });
 const checkbox = () => {
-    const element = container.querySelector('input[type="checkbox"]');
+    const element = mounted.container.querySelector('input[type="checkbox"]');
     if (!element)
         throw new Error("expected a checkbox to be rendered");
     return element;
 };
-const canvas = () => container.querySelector('[data-cy="canvas-stub"]');
+const canvas = () => document.body.querySelector('[data-cy="canvas-stub"]');
+const spinner = () => mounted.container.querySelector('[role="status"]');
 const honeypotInput = () => {
-    const element = container.querySelector('input[name="honeypot"]');
+    const element = document.querySelector('input[name="email_confirm"]');
     if (!element)
         throw new Error("expected a honeypot to be rendered");
     return element;
 };
 const click = async (options = {}) => {
-    const nativeEvent = {
-        isTrusted: options.trusted ?? true,
-        clientX: options.clientX ?? 0,
-        clientY: options.clientY ?? 0,
-        ...(options.touches ? { touches: options.touches } : {}),
-    };
-    await act(async () => {
-        await mocks.checkboxProps.current?.onChange({ nativeEvent });
-    });
+    fire(checkbox(), "click", options);
+    await settle();
 };
 const clickWithoutWaiting = () => {
-    act(() => {
-        void mocks.checkboxProps.current?.onChange({
-            nativeEvent: { isTrusted: true, clientX: 0, clientY: 0 },
-        });
-    });
+    fire(checkbox(), "click");
 };
 const complete = async (x = 200, y = 80, events = [{ x: 200, y: 80, t: 5 }]) => {
-    await act(async () => {
-        await mocks.canvasProps.current?.onComplete(x, y, events);
-    });
+    await mocks.canvasProps.current?.onComplete(x, y, events);
+    await settle();
 };
 describe("what the widget renders", () => {
     test("a visible widget shows a checkbox", () => {
@@ -156,23 +128,23 @@ describe("what the widget renders", () => {
     });
     test("an invisible widget shows no checkbox at all", () => {
         render(props({ config: config({ mode: ModeEnum.invisible }) }));
-        expect(container.querySelector('input[type="checkbox"]')).toBeNull();
+        expect(mounted.container.querySelector('input[type="checkbox"]')).toBeNull();
     });
     test("no puzzle is shown until a challenge has been fetched", () => {
         render(props());
         expect(canvas()).toBeNull();
     });
     test("a session with a honeypot question renders the honeypot", () => {
-        render(props({ frictionlessState: frictionless({ hp: "question" }) }));
+        render(props({ frictionlessState: frictionless({ hp: btoa("question") }) }));
         expect(honeypotInput()).toBeDefined();
-        expect(mocks.honeypotQuestions.at(-1)).toBe("question");
+        expect(document.body.textContent).toContain("question");
     });
     test("a session without one renders no bait at all", () => {
         render(props({ frictionlessState: frictionless() }));
-        expect(container.querySelector('input[name="honeypot"]')).toBeNull();
+        expect(document.querySelector('input[name="email_confirm"]')).toBeNull();
     });
     test("the manager can read the honeypot input the widget rendered", () => {
-        render(props({ frictionlessState: frictionless({ hp: "question" }) }));
+        render(props({ frictionlessState: frictionless({ hp: btoa("question") }) }));
         honeypotInput().value = "bot@example.com";
         expect(mocks.constructions[0]?.getHoneypotValue?.()).toBe("bot@example.com");
     });
@@ -182,25 +154,17 @@ describe("what the widget renders", () => {
     });
     test("the checkbox is labelled once the translations are ready", () => {
         render(props());
-        expect(mocks.checkboxProps.current?.labelText).toBe("WIDGET.I_AM_HUMAN");
+        expect(checkbox().getAttribute("aria-label")).toBe("WIDGET.I_AM_HUMAN");
     });
     test("the label is left empty while the translations load", () => {
         mocks.translationsReady.current = false;
         render(props());
-        expect(mocks.checkboxProps.current?.labelText).toBe("");
+        expect(checkbox().getAttribute("aria-label")).toBe("");
     });
-    test("the widget keeps the manager it started with across re-renders", () => {
-        render(props());
+    test("the widget builds exactly one manager", async () => {
         render(props());
-        act(() => {
-            mocks.constructions[0]?.updateState({
-                error: {
-                    message: "from the original manager",
-                    key: "API.UNKNOWN_ERROR",
-                },
-            });
-        });
-        expect(mocks.checkboxProps.current?.error).toBe("from the original manager");
+        await click();
+        expect(mocks.constructions).toHaveLength(1);
     });
 });
 describe("language", () => {
@@ -243,17 +207,17 @@ describe("starting from the checkbox", () => {
             showRetry: false,
         });
     });
-    test("an untrusted click starts a solve but carries no coordinates", async () => {
+    test("a synthetic click never reaches the manager", async () => {
         render(props());
         await click({ trusted: false, clientX: 12, clientY: 34 });
-        expect(mocks.start).toHaveBeenCalledWith(0, 0);
+        expect(mocks.start).not.toHaveBeenCalled();
     });
     test("a tap reports the coordinates of the first touch", async () => {
         render(props());
         await click({ touches: [{ clientX: 7, clientY: 9 }] });
         expect(mocks.start).toHaveBeenCalledWith(7, 9);
     });
-    test("a touch event with no touches falls back to the origin", async () => {
+    test("a touch event with no touches falls back to the pointer", async () => {
         render(props());
         await click({ touches: [] });
         expect(mocks.start).toHaveBeenCalledWith(0, 0);
@@ -268,9 +232,8 @@ describe("starting from the checkbox", () => {
         clickWithoutWaiting();
         clickWithoutWaiting();
         expect(mocks.start).toHaveBeenCalledTimes(1);
-        await act(async () => {
-            release(challengeResponse());
-        });
+        release(challengeResponse());
+        await settle();
     });
     test("the checkbox shows a spinner while the solve is loading", async () => {
         let release = () => {
@@ -280,55 +243,52 @@ describe("starting from the checkbox", () => {
         }));
         render(props());
         clickWithoutWaiting();
-        expect(mocks.checkboxProps.current?.loading).toBe(true);
-        await act(async () => {
-            release(challengeResponse());
-        });
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        await settle();
+        expect(spinner()).not.toBeNull();
+        release(challengeResponse());
+        await settle();
+        expect(spinner()).toBeNull();
     });
     test("a start that yields no challenge leaves the checkbox in place", async () => {
         mocks.start.mockResolvedValue(undefined);
         render(props());
         await click();
         expect(canvas()).toBeNull();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
     });
     test("a start that throws returns the user to a usable checkbox", async () => {
         const onError = vi.fn();
         mocks.start.mockRejectedValue(new Error("provider down"));
         render(props({ callbacks: { onError } }));
         await click();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
         expect(onError).toHaveBeenCalledWith(expect.any(Error));
     });
     test("a start that throws without an error callback is still recoverable", async () => {
         mocks.start.mockRejectedValue(new Error("provider down"));
         render(props());
         await click();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
     });
 });
 describe("autoStart", () => {
     test("fetches a challenge and opens the puzzle without a click", async () => {
-        await act(async () => {
-            root.render(createElement(Procaptcha, props({ autoStart: true, startCoords: { x: 5, y: 6 } })));
-        });
+        render(props({ autoStart: true, startCoords: { x: 5, y: 6 } }));
+        await settle();
         expect(mocks.start).toHaveBeenCalledWith(5, 6);
         expect(canvas()).not.toBeNull();
     });
     test("starts at the origin when no coordinates were handed over", async () => {
-        await act(async () => {
-            root.render(createElement(Procaptcha, props({ autoStart: true })));
-        });
+        render(props({ autoStart: true }));
+        await settle();
         expect(mocks.start).toHaveBeenCalledWith(0, 0);
     });
     test("a failed autoStart leaves the checkbox usable", async () => {
         mocks.start.mockRejectedValue(new Error("nope"));
-        await act(async () => {
-            root.render(createElement(Procaptcha, props({ autoStart: true })));
-        });
+        render(props({ autoStart: true }));
+        await settle();
         expect(canvas()).toBeNull();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
     });
     test("no autoStart means no solve until the user acts", () => {
         render(props());
@@ -350,7 +310,7 @@ describe("finishing the drag", () => {
         await openPuzzle();
         await complete();
         expect(canvas()).toBeNull();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
     });
     test("a rejected solution asks for another go on a fresh challenge", async () => {
         mocks.submitSolution.mockResolvedValue(false);
@@ -411,22 +371,18 @@ describe("finishing the drag", () => {
             release = resolve;
         }));
         await openPuzzle();
-        act(() => {
-            void mocks.canvasProps.current?.onComplete(200, 80, []);
-        });
+        void mocks.canvasProps.current?.onComplete(200, 80, []);
+        await settle();
         expect(mocks.canvasProps.current?.submitting).toBe(true);
-        expect(mocks.checkboxProps.current?.loading).toBe(true);
-        await act(async () => {
-            release(true);
-        });
+        expect(spinner()).not.toBeNull();
+        release(true);
+        await settle();
     });
 });
 describe("invisible mode", () => {
     const execute = async () => {
-        await act(async () => {
-            document.dispatchEvent(new Event("procaptcha:execute"));
-            await Promise.resolve();
-        });
+        document.dispatchEvent(new Event("procaptcha:execute"));
+        await settle();
     };
     test("an execute event fetches a challenge and opens the puzzle", async () => {
         render(props({ config: config({ mode: ModeEnum.invisible }) }));
@@ -442,10 +398,8 @@ describe("invisible mode", () => {
     test("a targeted execute on the container runs a visible widget", async () => {
         const target = document.createElement("div");
         render(props({ container: target }));
-        await act(async () => {
-            target.dispatchEvent(new Event("procaptcha:execute"));
-            await Promise.resolve();
-        });
+        target.dispatchEvent(new Event("procaptcha:execute"));
+        await settle();
         expect(mocks.start).toHaveBeenCalledTimes(1);
         expect(canvas()).not.toBeNull();
     });
@@ -455,10 +409,8 @@ describe("invisible mode", () => {
             config: config({ mode: ModeEnum.invisible }),
             container: target,
         }));
-        await act(async () => {
-            target.dispatchEvent(new Event("procaptcha:execute"));
-            await Promise.resolve();
-        });
+        target.dispatchEvent(new Event("procaptcha:execute"));
+        await settle();
         expect(mocks.start).toHaveBeenCalledTimes(1);
     });
     test("an execute that yields no challenge shows no puzzle", async () => {
@@ -487,85 +439,66 @@ describe("invisible mode", () => {
         await execute();
         expect(onError).toHaveBeenCalledWith(expect.any(Error));
     });
-    test("the listener is dropped when the widget unmounts", async () => {
+    test("the listener is dropped when the widget is destroyed", async () => {
         render(props({ config: config({ mode: ModeEnum.invisible }) }));
-        act(() => {
-            root.unmount();
-        });
-        act(() => {
-            root = createRoot(container);
-        });
+        destroy();
         await execute();
         expect(mocks.start).not.toHaveBeenCalled();
     });
 });
 describe("an invalidated session", () => {
-    const invalidate = (key = "CAPTCHA.NO_SESSION_FOUND", message = "session gone") => {
-        act(() => {
-            mocks.constructions[0]?.updateState({ error: { message, key } });
-        });
+    const invalidate = async (key = "CAPTCHA.NO_SESSION_FOUND", message = "session gone") => {
+        mocks.constructions[0]?.updateState({ error: { message, key } });
+        await settle();
     };
     test("the error is shown on the checkbox and the puzzle is torn down", async () => {
         render(props());
         await click();
-        invalidate("API.UNKNOWN_ERROR", "something broke");
-        expect(mocks.checkboxProps.current?.error).toBe("something broke");
+        await invalidate("API.UNKNOWN_ERROR", "something broke");
+        expect(mounted.container.textContent).toContain("something broke");
         expect(canvas()).toBeNull();
-        expect(mocks.checkboxProps.current?.loading).toBe(false);
+        expect(spinner()).toBeNull();
     });
     test("the host is told to re-mint, with the coordinates of the original click", async () => {
         const onSessionInvalidated = vi.fn();
         render(props({ onSessionInvalidated }));
         await click({ clientX: 12, clientY: 34 });
-        invalidate();
+        await invalidate();
         expect(onSessionInvalidated).toHaveBeenCalledWith(12, 34);
     });
     test("the host is told only once, however many errors arrive", async () => {
         const onSessionInvalidated = vi.fn();
         render(props({ onSessionInvalidated }));
         await click();
-        invalidate("CAPTCHA.NO_SESSION_FOUND", "gone");
-        invalidate("CAPTCHA.NO_SESSION_FOUND", "gone again");
+        await invalidate("CAPTCHA.NO_SESSION_FOUND", "gone");
+        await invalidate("CAPTCHA.NO_SESSION_FOUND", "gone again");
         expect(onSessionInvalidated).toHaveBeenCalledTimes(1);
     });
     test("with no host handler the frictionless session restarts instead", async () => {
-        vi.useFakeTimers();
         const restart = vi.fn();
         render(props({ frictionlessState: frictionless({ restart }) }));
-        invalidate();
+        await invalidate();
         expect(restart).not.toHaveBeenCalled();
-        await act(async () => {
-            await vi.advanceTimersByTimeAsync(100);
-        });
+        await new Promise((resolve) => setTimeout(resolve, 150));
         expect(restart).toHaveBeenCalledTimes(1);
-        vi.useRealTimers();
     });
-    test("a restart pending at unmount is cancelled", async () => {
-        vi.useFakeTimers();
+    test("a restart pending at destroy is cancelled", async () => {
         const restart = vi.fn();
         render(props({ frictionlessState: frictionless({ restart }) }));
-        invalidate();
-        act(() => {
-            root.unmount();
-        });
-        await act(async () => {
-            await vi.advanceTimersByTimeAsync(200);
-        });
+        await invalidate();
+        destroy();
+        await new Promise((resolve) => setTimeout(resolve, 200));
         expect(restart).not.toHaveBeenCalled();
-        act(() => {
-            root = createRoot(container);
-        });
-        vi.useRealTimers();
     });
     test("a lost session with nothing to recover it is simply surfaced", async () => {
         render(props());
-        invalidate();
-        expect(mocks.checkboxProps.current?.error).toBe("session gone");
+        await invalidate();
+        expect(mounted.container.textContent).toContain("session gone");
     });
-    test("no coordinates are reported when the session was never clicked into", () => {
+    test("no coordinates are reported when the session was never clicked into", async () => {
         const onSessionInvalidated = vi.fn();
         render(props({ onSessionInvalidated }));
-        invalidate();
+        await invalidate();
         expect(onSessionInvalidated).toHaveBeenCalledWith(undefined, undefined);
     });
 });