Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#1,418 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react
Bereich
frontend, testing

Rechercherichtung

Beginne mit app/components/forms/inputs/date-time/tests/date-time.spec.tsx und reproduziere die Warnung rund um await user.tab(). Lies app/components/forms/inputs/date-time/date-time.tsx und app/components/forms/inputs/date/date.tsx, um den Date-Picker und die Formularaktualisierungen nachzuverfolgen. Erledigt ist die Aufgabe, wenn der Test für gültige Eingaben tab und die Validierung ausführen kann, ohne dass eine der beiden act-Warnungen auftritt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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()
  })
})
Vorherrschende Sprache
JavaScript
Sterne
19.7k
Forks
1.2k
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus testing-library/react-testing-library

Alle Issues in testing-library/react-testing-library

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.