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

Open
#1,418 2 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.