Formik: Can't perform a React state update on an unmounted component.

[samuelcastro]

🐛 Bug report

Current Behavior

When component is unmounted for any reason and a pending formik workflow is still pending an error message shows up:

index.js:2178 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Formik (created by WithFormik(class_1))
    in WithFormik(class_1) (created by Connect(WithFormik(class_1)))

Expected behavior

No error

Reproducible steps

1 - Create a simple formik form.
2 - Make a submit event and change view right after. In my case I'm just redirecting the user to another route due to a non-authorized request.

Versions

| Software | Version(s) |
| ---------------- | ---------- |
| Formik |1.4.1
| React | 16.7.0
| TypeScript | 3.2.2
| Browser | Chrome (71.0.3578.98)
| npm/Yarn | 1.9.4
| Operating System | OSX

This is might be related:
https://github.com/jaredpalmer/formik/issues/772

[paul-sachs]

Also just ran into this. Except: react 16.6.3 and yarn 1.12.3.

[jaredpalmer]

Can you create a sandbox with your example?

[ZHamburglar]

Also just ran into this after previously not having issue.

[tu4mo]

Getting the same error with react-testing-library:

Form.js

const Form = () => (
  <Formik initialValues={{ name: 'test' }}>
    {({ handleChange, values }) => (
      <input
        data-testid="name"
        name="name"
        onChange={handleChange}
        value={values.name}
      />
    )}
  </Formik>
)

Form.test.js

test('test', async () => {
  const { getByTestId } = render(<Form />)
  fireEvent.change(getByTestId('name'), { target: { value: 'asdf' } })
})

[samuelcastro]

@jaredpalmer I'll create sandbox example asap, just not having the time now. :(

[rearmitage]

@tu4mo or anyone else have you had any luck? I'm running into the same issue right now.

[rearmitage]

I found the solution here

[tu4mo]

wait:ing for expect solved my problem also. Thanks @rearmitage!

[samuelcastro]

I'm not using this in a test context, wondering where the async/await should stand in a regular workflow.

[lourenci]

I have this problem too. The wait is not a good solution, I could have tests that assert for a mock to not be called.

For example, I have a specific test that when I click on submit button and there are some error in the form, I want to be sure that the backend is not called. I just expect for the fetchMock for it doesn't be called.

[rearmitage]

You just run that assertion after the wait

await wait()
expect(mockSubmit).not().toHaveBeenCalled()

or if you don't have async/await

return wait().then(() => {
   expect(mockSubmit).not().toHaveBeenCalled()
}

[lourenci]

wait is not a good solution. This seems a problem with the component itself. I can't workaround my test because of it. I like formik, but it is being not so good for testing it. Could be a problem with my implementation, I don't know, but I don't have this problem when using it in the browser.

[lourenci]

Here the basic codesandbox with the Formik site's example. You can realize the error on the console after running the tests.

[jaredpalmer]

@lourenci have you tried with 1.4.3?

[jaredpalmer]

Related #719 #937

The issue is due to how Formik's submit is async but the browser's submit event is sync. This makes it very challenging if not impossible to test directly.

See https://github.com/airbnb/enzyme/issues/1054