[Due for payment 2025-11-26] [Due for payment 2025-11-26] [$250] Investigate flaky PaymentCardFormTest

[github-actions]

Investigate Flaky test

🚨 Failure Summary 🚨:

• 📋 Job Name: test / test (job 3)
• 🔧 Failure in Workflow: Process new code merged to main
• 🔗 Triggered by PR: PR Link
• 👤 PR Author: @OlimpiaZurek
• 🤝 Merged by: @mountiny
• 🐛 Error Message:
  failure: Process completed with exit code 1.
  warning: Cache not found for keys: Linux-node-modules-3f1a5412b534de5d6bd9c416298ed7e246eefc05bab85e51cdb9b96768e2c25b

Summary of all failing tests
FAIL tests/unit/PaymentCardFormTest.tsx (37.178 s)
  ● Subscription/AddPaymentCard › AddPaymentCardPage Expiration Date Formatting › formats "0" as "0"

⚠️ Action Required ⚠️:

🛠️ A recent merge appears to have caused a failure in the job named test / test (job 3).
This issue has been automatically created and labeled with Workflow Failure for investigation.

👀 Please look into the following:

1. Why the PR caused the job to fail?
2. Address any underlying issues.

🐛 We appreciate your help in squashing this bug!

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021985780285119427050
• Upwork Job ID: 1985780285119427050
• Last Price Increase: 2025-11-04

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @ShridharGoel

[mountiny]

Restarted

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021985780285119427050

[melvin-bot]

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

[nkdengineer]

Proposal

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

Investigate flaky PaymentCardFormTest

What is the root cause of that problem?

findBy* queries are designed to wait for an element to appear asynchronously. The fact that it fails suggests the element might already be in the DOM before the findBy query starts waiting, but perhaps in a state that is not yet ready or fully rendered.

App/tests/unit/PaymentCardFormTest.tsx

Line 71 in b93cdce

const expirationDateField = await screen.findByTestId('addPaymentCardPage.expiration');

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

We can use getByTestId and waitFor like the same here

await waitFor(() => {
                expect(screen.getByTestId('addPaymentCardPage.expiration')).toBeOnTheScreen();
            })
            const expirationDateField = screen.getByTestId('addPaymentCardPage.expiration');

App/tests/unit/PaymentCardFormTest.tsx

Line 71 in b93cdce

const expirationDateField = await screen.findByTestId('addPaymentCardPage.expiration');

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.

[ShridharGoel]

Proposal

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

The Subscription/AddPaymentCard › AddPaymentCardPage Expiration Date Formatting is flaky.

What is the root cause of that problem?

The helper runFormatTest renders the page multiple times, but it never uses the queries returned by that specific render. Instead, it relies on the global screen.findByTestId, which can point at a stale render container when the previous test has not unmounted yet. In practice, that means the query sometimes runs against an empty tree and the input cannot be found. The current code is here:

App/tests/unit/PaymentCardFormTest.tsx

Lines 69 to 75 in 42937a5

	const runFormatTest = async (input: string, formattedAs: string) => {
	renderAddPaymentCardPage(SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD);
	const expirationDateField = await screen.findByTestId('addPaymentCardPage.expiration');
	fireEvent.changeText(expirationDateField, input);
	expect(expirationDateField.props.value).toBe(formattedAs);
	};

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

Switch the helper to grab findByTestId from the render result so every test query is scoped to the container that was just rendered.

Updated helper:

const runFormatTest = async (input: string, formattedAs: string) => {
    const {findByTestId} = renderAddPaymentCardPage(SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD);
    const expirationDateField = await findByTestId('addPaymentCardPage.expiration');
    fireEvent.changeText(expirationDateField, input);
    expect(expirationDateField.props.value).toBe(formattedAs);
};