From a1f26cda0d570e80652ccc6fd65f466f04a18a3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Tue, 3 Feb 2026 15:44:58 +0100 Subject: [PATCH] fix: increase findByText timeout for lazy-loaded DateTimePicker tests (#17672) ## Root Cause The `DateTimePicker` component lazy-loads `react-datepicker` using React's `lazy()` with a `Suspense` fallback that shows skeleton loaders: ```typescript const ReactDatePicker = lazy>(() => import('react-datepicker').then(...) ); // In render: }> ``` On slower CI runners (GitHub Actions vs depot.dev), the lazy load takes longer, causing tests to timeout while still showing skeletons instead of the actual date picker content. ## Fix Increased `findByText` timeout from the default 1000ms to 10000ms for tests that wait for the date picker to load: - `DateTimeFieldInput.stories.tsx` - 4 stories fixed - `InternalDatePicker.stories.tsx` - 2 stories fixed ## Why This Wasn't Flaky Before depot.dev runners have faster I/O and more consistent performance, so the lazy load completed quickly. GitHub Actions runners have more variable performance, causing the load to sometimes exceed the 1000ms default timeout. --- .../__stories__/DateTimeFieldInput.stories.tsx | 12 ++++++++---- .../__stories__/InternalDatePicker.stories.tsx | 10 ++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx index 84960e5c03..9bb129eba6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx @@ -135,7 +135,8 @@ type Story = StoryObj; export const Default: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const div = await canvas.findByText('January'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + const div = await canvas.findByText('January', {}, { timeout: 10000 }); await expect(div.innerText).toContain('January'); }, @@ -147,7 +148,8 @@ export const ClickOutside: Story = { await expect(handleClickoutsideMocked).toHaveBeenCalledTimes(0); - await canvas.findByText('January'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + await canvas.findByText('January', {}, { timeout: 10000 }); const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div'); await userEvent.click(emptyDiv); @@ -160,7 +162,8 @@ export const Escape: Story = { await expect(handleEscapeMocked).toHaveBeenCalledTimes(0); const canvas = within(canvasElement); - await canvas.findByText('January'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + await canvas.findByText('January', {}, { timeout: 10000 }); await userEvent.keyboard('{escape}'); await expect(handleEscapeMocked).toHaveBeenCalledTimes(1); @@ -172,7 +175,8 @@ export const Enter: Story = { await expect(handleEnterMocked).toHaveBeenCalledTimes(0); const canvas = within(canvasElement); - await canvas.findByText('January'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + await canvas.findByText('January', {}, { timeout: 10000 }); await userEvent.keyboard('{enter}'); await expect(handleEnterMocked).toHaveBeenCalledTimes(1); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx index 9be674195f..598702c012 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx @@ -38,7 +38,12 @@ export const WithOpenMonthSelect: Story = { const canvas = within(canvasElement); const body = within(canvasElement.ownerDocument.body); - const monthSelect = await canvas.findByText('January'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + const monthSelect = await canvas.findByText( + 'January', + {}, + { timeout: 10000 }, + ); await userEvent.click(monthSelect); @@ -69,7 +74,8 @@ export const WithOpenYearSelect: Story = { const canvas = within(canvasElement); const body = within(canvasElement.ownerDocument.body); - const yearSelect = await canvas.findByText('2023'); + // Increased timeout to account for lazy-loaded react-datepicker on slower CI runners + const yearSelect = await canvas.findByText('2023', {}, { timeout: 10000 }); await userEvent.click(yearSelect);