[Due for payment]$125 Flaky Tests - GroupChatNameTests

[dangrous]

Problem

Multiple tests/ui/GroupChatNameTests.tsx tests are flakey on main. Here's a run that failed and then passed the next time: https://github.com/Expensify/App/actions/runs/15983163235/job/45081956645 . There were three fails:

• ● Tests for group chat name › Should show exact name in header when report name is available with 4 participants
• ● Tests for group chat name › Should show exact name in header when report name is available with 8 participants
• ● Tests for group chat name › Should show last message preview in LHN

Solution

Fix the flakiness.

These have been flaky for a while and have been worked on before, but we're still having issues. Let's figure it out!

Previous Issues:

• [Due for payment 2025-02-26] [$50] Flaky tests/ui/GroupChatNameTests.tsx test #56057
• [Due for payment 2025-05-14] [$50] Flaky tests/ui/GroupChatNameTests.tsx test #59729

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[nkdengineer]

Proposal

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

What is the root cause of that problem?

The problem is our mock SignInUser API returns an error fetch is not defined so the app doesn't render the sidebar

App/src/libs/HttpUtils.ts

Line 57 in 5b2b9c6

return fetch(url, {

The reason is that the mock was reverted before SignInUser API is called.

App/tests/utils/TestHelper.ts

Lines 90 to 180 in 4a5b141

	function signInWithTestUser(accountID = 1, login = 'test@user.com', password = 'Password1', authToken = 'asdfqwerty', firstName = 'Test') {
	const originalXhr = HttpUtils.xhr;
	HttpUtils.xhr = jest.fn().mockImplementation(() => {
	const mockedResponse: OnyxResponse = {
	onyxData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.CREDENTIALS,
	value: {
	login,
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	validated: true,
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.PERSONAL_DETAILS_LIST,
	value: {
	[accountID]: buildPersonalDetails(login, accountID, firstName),
	},
	},
	],
	jsonCode: 200,
	};
	// Return a Promise that resolves with the mocked response
	return Promise.resolve(mockedResponse);
	});
	// Simulate user entering their login and populating the credentials.login
	Session.beginSignIn(login);
	return waitForBatchedUpdates()
	.then(() => {
	HttpUtils.xhr = jest.fn().mockImplementation(() => {
	const mockedResponse: OnyxResponse = {
	onyxData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.SESSION,
	value: {
	authToken,
	accountID,
	email: login,
	encryptedAuthToken: authToken,
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.CREDENTIALS,
	value: {
	autoGeneratedLogin: Str.guid('expensify.cash-'),
	autoGeneratedPassword: Str.guid(),
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	isUsingExpensifyCard: false,
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.BETAS,
	value: ['all'],
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID,
	value: 'randomID',
	},
	],
	jsonCode: 200,
	};
	// Return a Promise that resolves with the mocked response
	return Promise.resolve(mockedResponse);
	});
	Session.signIn(password);
	return waitForBatchedUpdates();
	})
	.then(() => {
	HttpUtils.xhr = originalXhr;
	});
	}

The problem comes from the previous test. We revert the mock after calling SignInUser API, which causes other APIs on the render App to fail because fetch is not defined. And the retry logic will call the API a few times. Then, when we go to the next test, the SignInUser is added to the queue and it can be called after the mock is reverted since it's the last API in the queue.

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

We should set the fetch with our mock fetch to ensure this is always available. Use the fetch mock to ensure all APIs are success, then we don't have the problem SignInUser is called after we revert the mock.

beforeEach(() => {
    jest.clearAllMocks();

    global.fetch = TestHelper.getGlobalFetchMock();
    // Unsubscribe to pusher channels
    PusherHelper.teardown();

    return Onyx.clear().then(waitForBatchedUpdates);
});

App/tests/ui/GroupChatNameTests.tsx

Line 127 in 5b2b9c6

beforeEach(() => {

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[QichenZhu]

I think the root cause of #59729 isn't clear, and the test is still flaky. So we need to dig deeper to find the real root cause and explore other solutions.

[nkdengineer]

@QichenZhu How can you reproduce it locally?

[QichenZhu]

@nkdengineer I ran the command below repeatedly, and it failed on the 4th run:

TZ=utc NODE_OPTIONS=--experimental-vm-modules npx jest tests/ui/GroupChatNameTests.tsx --no-clear

[nkdengineer]

@QichenZhu Thanks, I can reproduce it locally now. Updated proposal