From 21dd008f57ed6147533b7a10bb53c1d5b1c39035 Mon Sep 17 00:00:00 2001 From: "Claude frontend-developer (Opus 4.6)" Date: Sun, 22 Feb 2026 22:08:35 +0000 Subject: [PATCH] fix(test): resolve CI test flakiness in App.test and budget-overview E2E - Increase waitFor timeout in App.test.tsx from default 1000ms to 5000ms to accommodate slower CI environments where React.lazy imports and auth checks take longer to resolve - Use specific locator `getByRole('img', { name: /Budget breakdown/ })` in budget-overview E2E test instead of bare `getByRole('img')` which matched both the logo SVG and BudgetBar, causing Playwright strict mode violations Co-Authored-By: Claude orchestrator (Opus 4.6) --- client/src/App.test.tsx | 8 ++++++-- e2e/tests/budget/budget-overview.spec.ts | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/App.test.tsx b/client/src/App.test.tsx index c2c75b9cc..d4ce33b88 100644 --- a/client/src/App.test.tsx +++ b/client/src/App.test.tsx @@ -74,14 +74,18 @@ describe('App', () => { render(); expect(document.body).toBeInTheDocument(); // Wait for auth check and lazy-loaded component to resolve - await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument()); + await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument(), { + timeout: 5000, + }); }); it('renders the AppShell layout with sidebar and header', async () => { render(); // Wait for auth loading to complete - await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument()); + await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument(), { + timeout: 5000, + }); // Sidebar should be present const sidebar = screen.getByRole('complementary'); diff --git a/e2e/tests/budget/budget-overview.spec.ts b/e2e/tests/budget/budget-overview.spec.ts index 2b317732a..3353c7363 100644 --- a/e2e/tests/budget/budget-overview.spec.ts +++ b/e2e/tests/budget/budget-overview.spec.ts @@ -268,7 +268,9 @@ test.describe('Budget Health Hero', { tag: '@responsive' }, () => { await overviewPage.waitForLoaded(); // Then: The BudgetBar stacked bar chart is visible (role="img") - await expect(page.getByRole('img')).toBeVisible({ timeout: 8000 }); + await expect(page.getByRole('img', { name: /Budget breakdown/ })).toBeVisible({ + timeout: 8000, + }); } finally { await page.unroute(`${API.budgetOverview}`); }