-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
@viveleroi
Description
From my understanding, user actions do not need to be wrapped in act yet I'm still getting an error that state updates are happening outside of react for a datepicker component. When the user.tab() code is called below, that triggers a react-datepicker component to close and form state to update with validation.
Yet if I try to wrap the code inside act like it recommends, it says
Warning: The current testing environment is not configured to support act. All of our other act calls work fine so I think it's because it's "nesting" them since user events are already wrapped in act.
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s Manager
at Manager (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/@blueprintjs_core.js?v=19bc5f46:16758:24)
at Popover (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/@blueprintjs_core.js?v=19bc5f46:18798:5)
at div
at div
at InputOverlay (http://localhost:63315/app/components/overlays/overlays.tsx:165:32)
at SelectInput (http://localhost:63315/app/components/forms/inputs/selects/selects.tsx:285:3)
at div
at header
at CalendarHeader (http://localhost:63315/app/components/forms/inputs/date/date.tsx:118:3)
at div
at div
at div
at CalendarContainer (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:7267:16)
at Wrap (http://localhost:63315/app/components/forms/inputs/date/date.tsx:64:19)
at div
at ClickOutsideWrapper (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:7292:22)
at Calendar2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:9862:26)
at div
at div
at TabLoop2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10477:26)
at Portal2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10440:26)
at PopperComponent2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10532:40)
at WithFloating (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10515:35)
at DatePicker2 (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/react-datepicker.js?v=19bc5f46:10590:26)
at DateInput (http://localhost:63315/app/components/forms/inputs/date/date.tsx:222:3)
at div
at DateTimeInput (http://localhost:63315/app/components/forms/inputs/date-time/date-time.tsx:26:3)
at form
at FormProvider (http://localhost:63315/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps/chunk-OEVTHLDK.js?v=19bc5f46:114:11)
at Form (http://localhost:63315/app/components/forms/forms.tsx:59:3)
at DateTimeInputForm (http://localhost:63315/redacted/app/components/forms/inputs/date-time/tests/date-time.spec.tsx?import&browserv=1758221332900:19:3)
const DateTimeInputForm = ({ name, onSubmit, required, ...props }: DateTimeInputTestProps): React.JSX.Element => { const schema = z.object({ [name]: zodDateTimeSchema({ required }) }) const methods = useForm(schema) return ( <Form methods={methods} onSubmit={onSubmit} schema={schema}> <DateTimeInput name={name} required={required} {...props} /> </Form> ) } describe('inputs - date-time', () => { it('does not error when valid', async () => { const user = userEvent.setup() render(<DateTimeInputForm includeSeconds label='Test' name='test' required />) const inputs = document.querySelectorAll('input') expect(inputs).toHaveLength(4) await user.click(inputs[0]) await user.keyboard('2001-01-01') await user.tab() // < removing this line avoids the error (but we have further logic after this we want to test) expect(document.querySelector('input[class*="error"]')).toBeFalsy() }) })
Metadata
Metadata
Assignees
Labels
No labels