[$250] [Due for payment 2025-11-17] Fix flaky test: tests/ui/PaginationTest.tsx

[roryabraham]

Problem

tests/ui/PaginationTest.tsx is flaky

Solution

Fix it!

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021991017149138563503
• Upwork Job ID: 1991017149138563503
• Last Price Increase: 2025-11-26

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abzokhattab (External)

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

PaginationTest often times out. The timeout leads Jest to unmount the renderer mid-test, which then crashes with Can't access .root on unmounted test renderer.

What is the root cause of that problem?

The helper signInAndGetApp renders <App /> and does the slow UI sign-in every time a test runs. This is the same pattern we already fixed in UnreadIndicatorsTest.

App/tests/ui/PaginationTest.tsx

Lines 178 to 235 in 42937a5

	reportID === REPORT_ID
	? [
	{
	onyxMethod: 'merge',
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`,
	// The API also returns the action that was requested with the reportActionID.
	value: buildReportComments(messageCount + 1, reportActionID, true),
	},
	]
	: [],
	hasNewerActions: messageCount > 0,
	}));
	}
	/**
	* Sets up a test with a logged in user. Returns the <App/> test instance.
	*/
	async function signInAndGetApp(): Promise<void> {
	// Render the App and sign in as a test user.
	render(<App />);
	await waitForBatchedUpdatesWithAct();
	const hintText = TestHelper.translateLocal('loginForm.loginForm');
	const loginForm = await screen.findAllByLabelText(hintText);
	expect(loginForm).toHaveLength(1);
	await act(async () => {
	await TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A');
	});
	await waitForBatchedUpdatesWithAct();
	subscribeToUserEvents();
	await waitForBatchedUpdates();
	await act(async () => {
	// Simulate setting an unread report and personal details
	await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
	reportID: REPORT_ID,
	reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
	lastMessageText: 'Test',
	participants: {
	[USER_B_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
	[USER_A_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
	},
	lastActorAccountID: USER_B_ACCOUNT_ID,
	type: CONST.REPORT.TYPE.CHAT,
	});
	await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
	[USER_B_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
	});
	// Setup a 2nd report to test comment linking.
	await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${COMMENT_LINKING_REPORT_ID}`, {
	reportID: COMMENT_LINKING_REPORT_ID,
	reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
	lastMessageText: 'Test',

What changes do you think we should make in order to solve the problem?

• Seed the signed-in Onyx state upfront so the app mounts already authenticated.
• Render the app only once per spec by caching the initial render(<App />) call and reuse it on subsequent helper calls.
• Populate the report, report action, and personal detail fixtures in parallel with Promise.all to reduce Onyx churn.
• Reset the cached render flag in afterEach to keep tests isolated.

Updated helper code:

let hasRenderedApp = false;

function renderAppOnce() {
    if (hasRenderedApp) {
        return;
    }
    render(<App />);
    hasRenderedApp = true;
}

async function fastSignInWithTestUser() {
    await Onyx.multiSet({
        [ONYXKEYS.CREDENTIALS]: {
            login: USER_A_EMAIL,
            autoGeneratedLogin: TEST_AUTO_GENERATED_LOGIN,
            autoGeneratedPassword: 'Password1',
        },
        [ONYXKEYS.ACCOUNT]: {
            validated: true,
            isUsingExpensifyCard: false,
        },
        [ONYXKEYS.SESSION]: {
            authToken: TEST_AUTH_TOKEN,
            accountID: USER_A_ACCOUNT_ID,
            email: USER_A_EMAIL,
            encryptedAuthToken: TEST_AUTH_TOKEN,
        },
        [ONYXKEYS.BETAS]: ['all'],
        [ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID]: 'randomID',
        [ONYXKEYS.PERSONAL_DETAILS_LIST]: {
            [USER_A_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_A_EMAIL, USER_A_ACCOUNT_ID, 'A'),
        },
    });
    await waitForBatchedUpdates();
}

async function signInAndGetApp(): Promise<void> {
    await fastSignInWithTestUser();

    renderAppOnce();
    await waitForBatchedUpdatesWithAct();

    subscribeToUserEvents();
    await waitForBatchedUpdates();

    await act(async () => {
        await Promise.all([
            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
                reportID: REPORT_ID,
                reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
                lastMessageText: 'Test',
                participants: {
                    [USER_B_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
                    [USER_A_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
                },
                lastActorAccountID: USER_B_ACCOUNT_ID,
                type: CONST.REPORT.TYPE.CHAT,
            }),
            Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
                [USER_B_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
            }),
            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${COMMENT_LINKING_REPORT_ID}`, {
                reportID: COMMENT_LINKING_REPORT_ID,
                reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
                lastMessageText: 'Test',
                participants: {[USER_A_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS}},
                lastActorAccountID: USER_A_ACCOUNT_ID,
                type: CONST.REPORT.TYPE.CHAT,
            }),
            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${COMMENT_LINKING_REPORT_ID}`, {
                '100': buildCreatedAction('100', format(TEN_MINUTES_AGO, CONST.DATE.FNS_DB_FORMAT_STRING)),
                '101': {
                    actionName: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
                    person: [{type: 'TEXT', style: 'strong', text: 'User B'}],
                    created: format(addSeconds(TEN_MINUTES_AGO, 10), CONST.DATE.FNS_DB_FORMAT_STRING),
                    message: [
                        {
                            type: 'COMMENT',
                            html: '<a href="https://dev.new.expensify.com:8082/r/1/5">Link 1</a>',
                            text: 'Link 1',
                        },
                    ],
                    reportActionID: '101',
                    actorAccountID: USER_A_ACCOUNT_ID,
                },
            }),
        ]);

        setSidebarLoaded();
    });

    await waitForBatchedUpdatesWithAct();
}

afterEach(async () => {
    await waitForIdle();
    await act(async () => {
        await Onyx.clear();
        PusherHelper.teardown();
    });
    await waitForBatchedUpdatesWithAct();
    jest.clearAllMocks();
    hasRenderedApp = false;
});

[abzokhattab]

Looks to be an urgent issue. Would you please be able to raise the PR soon, @ShridharGoel