Formik + Yup can't test form errors with Enzyme

[giulioambrogi]

🐛 Not able to test the error state of the form using Formik, Yup and Enzyme

TLDR: code sandbox provided, see below.

I've seen some issues vaguely similar but they seem to be outdated and a few potentially useful links are broken.

Current Behavior

Given my simple form built with Formik and Yup, I'm trying to test with Jest/Enzyme the scenario where I:

1. type a wrong email
2. press tab (blur)
3. check that the error is displyed and the new email value is displayed

Expected behavior

At a high level: after the events above I expect the form to receive the expected errors (i.e. errors.email) so that it triggers the rendering of my error msg. (this works in the browser)

In the unit tests: after I run a myfield.simulate('change', {target: ..etc}'); myfield.blur() I should be able to test that the error message has appeared and the email value is displayed.

Reproducible example

It works on a browser but it doesn't seem to work in the unit tests, using Enzyme. (Or maybe I'm just doing it wrong).

Please have a look at the 2 tests in this Code Sandbox demo

Environment

Software	Version(s)
Formik	1.3.2
React	16.4.2
npm	6.4.1
Operating System	Mac OS

[cagmz]

The field value can be checked with prop: https://codesandbox.io/s/ly35w82q1l

[giulioambrogi]

The field value can be checked with prop: https://codesandbox.io/s/ly35w82q1l

Hi @cagmz thanks, how about the other test? That was the key problem actually, maybe I'll open a separate ticket for that.

@jaredpalmer I has asked two questions (see 2 broken tests in the code sandbox) so I don't think this should be closed as @cagmz answered only 1 of them.

[thompk2]

I solved this by manually calling ui.update() after a tick. It looks like the issue is with how formik validates asynchronously. See passing tests here: https://codesandbox.io/s/y2vqqwr0yv