refactor(mfa): scope the harness controls to each render

The module-level controlsHolder and getMfaControls are replaced by a ref
created inside renderMfaUi, which now returns executeScenario with the
render result. The returned function reads the ref at call time, so the
walk keeps driving the latest context API after re-renders. The event
executors become a factory bound to the current render.

Author: dariusz-biela

tests/unit/components/MultifactorAuthentication/machine/graphTraversal/viewMatchesMachine.test.tsx

@@ -1,7 +1,7 @@
 import {act, fireEvent, screen} from '@testing-library/react-native';
 import {MFA_TEST_SCENARIO_NAME} from 'tests/utils/mfa/flowFixtures';
 import getWalkedPaths from 'tests/utils/mfa/flowPaths';
-import {getMfaControls, renderMfaUi} from 'tests/utils/mfa/realUi/harness';
+import renderMfaUi from 'tests/utils/mfa/realUi/harness';
 import {pendingModalClose, resetMfaUiMocks} from 'tests/utils/mfa/realUi/mocks';
 import type * as MfaRealUiMocks from 'tests/utils/mfa/realUi/mocks';
 import getSettleableLeafStates from 'tests/utils/mfa/settleableLeafStates';
@@ -47,37 +47,41 @@ type MfaEventType = MfaEvent['type'];
 
 type MfaEventExecutor = () => Promise<void>;
 
+type ExecuteScenario = ReturnType<typeof renderMfaUi>['executeScenario'];
+
 /**
  * Maps every machine event to the action that produces it in the rendered app, such as a button press
  * or a navigator callback. The walk drives each path step through this table, and the `satisfies`
- * clause makes a machine event without an executor fail compilation.
+ * clause makes a machine event without an executor fail compilation. The executors act on a concrete
+ * render, so each test builds them from its own `executeScenario`.
  */
 /* eslint-disable @typescript-eslint/naming-convention -- keys mirror the machine's event type union. */
-const mfaEventExecutors = {
-    INIT: async () => {
-        await act(async () => {
-            await getMfaControls().executeScenario(MFA_TEST_SCENARIO_NAME);
-        });
-        await waitForBatchedUpdatesWithAct();
-        // The initial screen's `onLayout` does not fire in jsdom, so the test calls the same handler to flush the
-        // buffered navigation.
-        act(() => handleInitialScreenLayout());
-        await waitForBatchedUpdatesWithAct();
-    },
-    CLOSE_MODAL: async () => {
-        fireEvent.press(screen.getByTestId(CONFIRM_BUTTON_TEST_ID));
-        await waitForBatchedUpdatesWithAct();
-    },
-    MODAL_CLOSED: async () => {
-        act(() => pendingModalClose.run());
-        await waitForBatchedUpdatesWithAct();
-    },
-} satisfies Record<MfaEventType, MfaEventExecutor>;
+function createMfaEventExecutors(executeScenario: ExecuteScenario) {
+    return {
+        INIT: async () => {
+            await act(async () => {
+                await executeScenario(MFA_TEST_SCENARIO_NAME);
+            });
+            await waitForBatchedUpdatesWithAct();
+            // The initial screen's `onLayout` does not fire in jsdom, so the test calls the same handler to flush the
+            // buffered navigation.
+            act(() => handleInitialScreenLayout());
+            await waitForBatchedUpdatesWithAct();
+        },
+        CLOSE_MODAL: async () => {
+            fireEvent.press(screen.getByTestId(CONFIRM_BUTTON_TEST_ID));
+            await waitForBatchedUpdatesWithAct();
+        },
+        MODAL_CLOSED: async () => {
+            act(() => pendingModalClose.run());
+            await waitForBatchedUpdatesWithAct();
+        },
+    } satisfies Record<MfaEventType, MfaEventExecutor>;
+}
 /* eslint-enable @typescript-eslint/naming-convention */
 
 // Dot-path state keys let `matchesState` target nested leaves such as `open.outcome.success`.
 const testConfig = {
-    events: mfaEventExecutors,
     states: {
         [MFA_STATE.CLOSED]: () => {
             expect(screen.queryAllByTestId(MODAL_BACKDROP_TEST_ID)).toHaveLength(0);
@@ -131,9 +135,9 @@ describe('the real MFA modal matches the machine at every step of every generate
     });
 
     it.each(walkedPathTestCases)('$title', async ({path}) => {
-        renderMfaUi();
+        const {executeScenario} = renderMfaUi();
         await waitForBatchedUpdatesWithAct();
-        await path.test(testConfig);
+        await path.test({...testConfig, events: createMfaEventExecutors(executeScenario)});
     });
 });
 

tests/utils/mfa/realUi/harness.tsx

@@ -10,41 +10,46 @@ type MfaUiControls = {
     executeScenario: ReturnType<typeof useMultifactorAuthentication>['executeScenario'];
 };
 
-const controlsHolder: {current: MfaUiControls | undefined} = {current: undefined};
+type MfaControlsRef = {current: MfaUiControls | undefined};
 
 /**
- * Renders nothing. It sits inside the providers only to capture the live context API so the event
- * executors can start a flow through the public API.
+ * Renders nothing. It sits inside the providers only to capture the live context API so the
+ * `executeScenario` returned by `renderMfaUi` can start a flow through the public API.
  */
-function MfaControlsCapture() {
+function MfaControlsCapture({controlsRef}: {controlsRef: MfaControlsRef}) {
     const {executeScenario} = useMultifactorAuthentication();
     useEffect(() => {
-        controlsHolder.current = {executeScenario};
-    }, [executeScenario]);
+        // eslint-disable-next-line no-param-reassign -- the ref exists to carry the capture out to `renderMfaUi`.
+        controlsRef.current = {executeScenario};
+    }, [controlsRef, executeScenario]);
     return null;
 }
 
 /**
  * Mounts the production MFA providers and modal navigator. The global safe-area mock provides fixed
- * values without a `SafeAreaProvider`.
+ * values without a `SafeAreaProvider`. The returned `executeScenario` reads the captured controls at
+ * call time because the provider recreates the context API on every render.
  */
 function renderMfaUi() {
-    controlsHolder.current = undefined;
-    return render(
+    const controlsRef: MfaControlsRef = {current: undefined};
+
+    const renderResult = render(
         <ComposeProviders components={[OnyxListItemProvider, LocaleContextProvider]}>
             <MultifactorAuthenticationContextProviders>
-                <MfaControlsCapture />
+                <MfaControlsCapture controlsRef={controlsRef} />
                 <MultifactorAuthenticationModalNavigator />
             </MultifactorAuthenticationContextProviders>
         </ComposeProviders>,
     );
-}
 
-function getMfaControls(): MfaUiControls {
-    if (!controlsHolder.current) {
-        throw new Error('MFA UI controls were not captured. Call renderMfaUi() and await waitForBatchedUpdatesWithAct() first.');
-    }
-    return controlsHolder.current;
+    const executeScenario: MfaUiControls['executeScenario'] = (scenarioName, ...args) => {
+        if (!controlsRef.current) {
+            throw new Error('MFA UI controls were not captured. Await waitForBatchedUpdatesWithAct() after renderMfaUi() first.');
+        }
+        return controlsRef.current.executeScenario(scenarioName, ...args);
+    };
+
+    return {executeScenario, ...renderResult};
 }
 
-export {renderMfaUi, getMfaControls};
+export default renderMfaUi;