Tengo un formulario simple que estoy tratando de probar:

Forma:

 <Formik enableReinitialize onSubmit={(values, actions) => { console.log('---DEBUG---'); onSubmit(values, actions); }} validationSchema={ValidationSchema} > {(formik) => { const { errors } = formik; return ( <Form noValidate autoComplete="off"> {/* USER PICKER */} <FastField id="name" name="name" type="text" onChange={({ event, value }) => { handleChange(event); setUserIdOrName(value); }} value={values.name} errorMessage={ !!errors.name && !!touched.name ? errors.name : '' } as={TextField} /> {/* SUBMIT BUTTON */} <Button color="red" type="submit" onClick={() => { console.log('-----CLICKED----'); }} /> </Form> ); }} </Formik>

Prueba:

 it.only('shows required error messages', async () => { render(<MyForm />); const button = screen.getByRole('button'); userEvent.click(button); // Formik and Yup validation are async methods const required = await screen.findByText(/required/i); expect(required).toBeInTheDocument(); });

Error:

console.error Advertencia: Parece que tiene llamadas act() superpuestas, esto no es compatible. Asegúrese de esperar las llamadas act() anteriores antes de hacer una nueva.

 TestingLibraryElementError: Unable to find an element with the text: /required/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.