houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: increase findByText timeout for lazy-loaded DateTimePicker tests (#17672)

Browse Source 
## 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<ComponentType<DatePickerPropsType>>(() =>
  import('react-datepicker').then(...)
);

// In render:
<Suspense fallback={<SkeletonLoader />}>
  <ReactDatePicker ... />
</Suspense>
```

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.
This commit is contained in:
Félix Malfait
2026-02-03 15:44:58 +01:00
committed by GitHub
parent f2284579f0
commit a1f26cda0d
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
+8 -4
View File
@@ -135,7 +135,8 @@ type Story = StoryObj<typeof DateFieldInputWithContext>;
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);
packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
+8 -2
View File
@@ -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);