Problem with Jest and validationSchema

[kpyorala]

Bug, Feature, or Question?

Question

Current Behavior

I have simple CRA app and after I added validationSchema to my form Jest started to throw this error:

/Users/kalle/Projects/training/formik-yup/node_modules/react-scripts/scripts/test.js:20
  throw err;
  ^

TypeError: Cannot read property 'createEvent' of undefined
    at Object.invokeGuardedCallbackDev (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:579:25)
    at invokeGuardedCallback (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:438:27)
    at renderRoot (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:10366:7)
    at performWorkOnRoot (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:11014:24)
    at performWork (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:10967:7)
    at requestWork (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:10878:7)
    at scheduleWorkImpl (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:10732:11)
    at scheduleWork (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:10689:12)
    at Object.enqueueSetState (/Users/kalle/Projects/training/formik-yup/node_modules/react-dom/cjs/react-dom.development.js:6212:7)
    at Formik.Object.<anonymous>.Component.setState (/Users/kalle/Projects/training/formik-yup/node_modules/react/cjs/react.development.js:237:16)
    at /Users/kalle/Projects/training/formik-yup/node_modules/formik/dist/formik.js:5932:23
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Minimal project to reproduce problem: https://github.com/kpyorala/formik-yup

I just started to learning Jest so probably I'm doing something stupid but I don't understand what it is...

Desired Behavior

Passing test

Suggested Solutions

Additional Information

---

• Formik Version: 0.11.11
• React Version: 16.2.0
• TypeScript Version:
• CodeSandbox Link:
• OS: macOS 10.13.3
• Node Version: v8.6.0
• Package Manager and Version: Yarn

[prichodko]

Probably related: facebook/create-react-app#3482

However, do you really need to render the whole App using mount? What you probably want to do, is to write some unit tests - where you should rather use shallow, because it creates an isolated environment - I was able to to fix your problem using shallow.

It all comes to the last thing, what do you want to test? Do you really need to test handleChange, when it's already tested in formik?

[kpyorala]

If I change it to shallow I get error Method “simulate” is only meant to be run on a single node. 0 found instead. because it renders only first children and input is third. In my real app form is not directly under App component but the input is always deeper than one level.

And I'm not trying to test handleChange, I'm trying to test that form cannot be submitted without valid values. Reason to test that is that maybe some developer changes name of the input but forgets to change related validation.

[prichodko]

You have two options then:

1. Extract form to separate component and test it.
2. Use .dive()(http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html) so wrapper renders another level.

If you are unsure what is in your wrapper, you can have a look by console.log(wrapper.debug()).

[kpyorala]

1. You still need to use mount or dive because input is deeper, I think; ComponentYouTest > Formik > input

2. With dive the test is not crashing but it's not submitting the form either. If validationSchema is removed, form is submitting with given values. I updated changes to https://github.com/kpyorala/formik-yup

[kpyorala]

This is how I got it finally working:

it("submits when email is correct", done => {
  const onSubmit = jest.fn();
  const wrapper = mount(<App onSubmit={onSubmit} />);

  wrapper.find('input[name="email"]').simulate("change", {
    persist: jest.fn(),
    target: { name: "email", value: "john.doe@test.com" }
  });
  wrapper.find("button").simulate("submit");

  setTimeout(() => {
    expect(onSubmit).toBeCalled();
    done();
  }, 0);
});
it("doesn't submit when email is incorrect", done => {
  const onSubmit = jest.fn();
  const wrapper = mount(<App onSubmit={onSubmit} />);

  wrapper.find('input[name="email"]').simulate("change", {
    persist: jest.fn(),
    target: { name: "email", value: "john.doe.test.com" }
  });
  wrapper.find("button").simulate("submit");

  setTimeout(() => {
    expect(onSubmit).not.toBeCalled();
    done();
  }, 0);
});

For some reason I still don't understand the shallow>dive combination didn't work when using validationSchema; no validationSchema => shallow>dive>submit works, with validationSchema => shallow>dive>submit doesn't work.

Thank you for you help @prichodko !

[prichodko]

Glad to hear that 👍