Warning: An update to Formik inside a test was not wrapped in act(...)

Question

When I run my test it sends me a warning even if the test works. With some research it seems that I have to put it in an act but it is the same thing

console.error
    Warning: An update to Formik inside a test was not 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
       )

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatch (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/formik/src/Formik.tsx:327:11

  console.error
    Warning: An update to Formik inside a test was not 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

<div className={classes.root}>
            <Grid container alignItems="center" className={classes.h__full}>
                <Grid item sm={12} md={12} className={classes.w__full}>
                    <Alert
                        severity={message.status}
                        className={classes.alert}
                        style={{ visibility: message.message ? "visible" : "hidden" }}
                    >
                        {message.message}
                    </Alert>
                    <CreateSecretForm
                        onSubmit={handleSubmit}
                        initialValues={initialValues}
                        validationSchema={CreateSecretSchema}
                    />
                </Grid>
            </Grid>
        </div>

test code snippet

Why does this happen ?

Answer 1

https://github.com/formium/formik/issues/1543

Formik bug. In my case, this happened when running a jest test and it was related to validateOnMount property in Formik. I fixed this by putting in a waitFor on my assertion:

    await waitFor(() =>
      expect(getByText('Component header')).toBeInTheDocument()
    )

Note that wrapping the jest render in act does not work, as this is a rerender