Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,418 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
frontend, testing

Línea de trabajo

Empieza con app/components/forms/inputs/date-time/tests/date-time.spec.tsx y reproduce la advertencia relacionada con await user.tab(). Lee app/components/forms/inputs/date-time/date-time.tsx y app/components/forms/inputs/date/date.tsx para seguir el flujo del selector de fecha y las actualizaciones del formulario. Se considera terminado cuando el test de entrada válida puede ejecutar tab y la validación sin ninguna de las dos advertencias de act.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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()
  })
})
Lenguaje dominante
JavaScript
Estrellas
19.7k
Forks
1.2k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de testing-library/react-testing-library

Todos los issues de testing-library/react-testing-library

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.