Test warns that I need to use `act` for user actions, then warns act is not configured if I do

[viveleroi]

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()
  })
})

[caviroski]

Which versions of React, testing-libray are you using?

[viveleroi]

react is 19.1.1, testing-library/react is 16.3.0, but this has been issue for some time so we also saw this on react 18.3.1 and testing-library/react 16.2.0