Formik, jest, yup : how to test validation?

Question

i can't find a way to test form yup validation:

it('displays error on submit if name is empty', async () => {
    const wrapper = mount(<MyFormik/>)
    const getForm = () => wrapper.find('form')

    wrapper.find('input[name="name"]').simulate('change', {
      persist: () => {},
      target: {
        name: 'name',
        value: ''
      }
    })

    wrapper
      .find('MyInnerForm')
      .props()
      .submitForm()


    await wait(0) // await next tick or even 1s...
    wrapper.update()

    expect(
      wrapper
      .update()
      .find('.error')
      .exists()
    )
    .toBeTruthy() // FALSE!
  })

No matter if i wait after submit, update wrapper errors prop is always empty.

And the solution here are not working for me:

https://github.com/jaredpalmer/formik/issues/1146

https://github.com/jaredpalmer/formik/issues/110

Looks like wrapper won't update

Here's the log of formik props after submit:

{ errors: {},
         label: '',
         name: 'name',
         type: 'text',
         values: { name: '' },
         touched: { name: true },
         isValidating: false,
         status: undefined,
         initialValues: { name: '' },
         validateOnChange: true,
         validateOnBlur: true } }
         ...

         submitCount: 1,
         isValid: false,

Answer 1

You can validate the form values directly on your validation schema.

const yup = require('yup')

const contactSchema = yup.object({
  name: yup.string()
    .required(),
  age: yup.number()
    .required()
    .positive()
    .integer()
})

const errors = await contactSchema.validate({
  name: 'Kenneth',
  age: -35.5
}).catch(function(err) {
  return err
});

console.log("errors", errors);

https://runkit.com/kluplau/5defa8cd122cf6001a3034c7

Answer 2

Without seeing your component I'm not entirely sure what's going wrong. This is likely not to be working:

wrapper
      .find('MyInnerForm')
      .props()
      .submitForm()

If your component MyInnerForm contains a Formik form calling submitForm() there will not cause Formik's validation to run. I would instead do something like this:

wrapper.find("form").simulate("submit");

However if that isn't solving your issue I made a full example that you can have a look at here.