DEV Community

Formik & React Testing Library and Screaming at a Computer for an Hour

charlie⚡ on December 16, 2019

I have loved using both Formik and React Testing Library. At this point in the React community, I consider these tools to be nice sensible defaults...
Collapse
 
maximecote57 profile image
Maxime Côté •

Hi Charles ! I'm having kind of the same issue, but I'm not sure this really works. Since you don't await your wait call, I think your test will end before the expects in your wait argument succeed. I'm still trying to figure out how to fix this :(.

Collapse
 
pighqs profile image
Peggy •

Hi Maxime,
did you find a way to fix it ?

Collapse
 
rangeoshun profile image
Abel Varga •

Yeah, this will give you a false positive.

Collapse
 
charliewilco profile image
charlie⚡ •

how so?

Collapse
 
rangeoshun profile image
Abel Varga •

If you do not await the wait in an async function, the test is over before the expectation could be evaluated.

Collapse
 
rangeoshun profile image
Abel Varga •

In my case, I needed not just await the expect, but the problem also was the Formik did not call the handleSubmit callback. I had to fire a submit event on the form element itself.

Thread Thread
 
xap5xap profile image
XAVIER PEREZ •

Hello. How do you submit an event on the form in the test?

Thread Thread
 
rangeoshun profile image
Abel Varga • • Edited

Basically like this:

fireEvent.submit(container.querySelector('form'))

container is the value returned in the object by the render method.

Collapse
 
dannypule profile image
Danny Pule •

wait() was recently deprecated and replaced with waitFor() testing-library.com/docs/dom-testi...

Collapse
 
niubo profile image
Rolando Niubo •

Amen

Collapse
 
kellyrmilligan profile image
kellyrmilligan •

Thanks! this worked like a charm for me.

Collapse
 
stuj1 profile image
Stuart Jennings • • Edited

Thanks. This held me up for more than an hour. Never thought to wait on the assertions!

Collapse
 
vinyoliver profile image
Viny Machado •

Thanks man!