testing-library / testing-library/react-testing-library
Test warns that I need to use `act` for user actions, then warns act is not configured if I do
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 19.7k
- Forks
- 1.2k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 1
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()
})
})
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with app/components/forms/inputs/date-time/tests/date-time.spec.tsx and reproduce the warning around await user.tab(). Read app/components/forms/inputs/date-time/date-time.tsx and app/components/forms/inputs/date/date.tsx to trace the date picker and form updates. Done means the valid-input test can exercise tab and validation without either act warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100