Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with Jest and validationSchema

See original GitHub issue

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

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

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

1reaction

kpyoralacommented, Mar 3, 2018

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 !

0reactions

prichodkocommented, Mar 5, 2018

Glad to hear that 👍

Top Results From Across the Web

How to write test case using Jest for Yup.isValid function?

Even if I am changing the minimum timeout of jasmine same error showing. My function to validate the Yup schema is: export const...

Testing ValidationSchema Formik Forms - Duncan Leung

I needed to test a form PersonalInfoForm.tsx that included a validation schema for field validation, but was running into a warning when I...

Testing yup with jest : r/learnjavascript - Reddit

Does anyone have an example on how to test individual schema fields? Currently trying to error out a field with yup's validateAt and...

How to show Form error summary using Formik with yup ...

[Solved]-How to show Form error summary using Formik with yup validationSchema-Reactjs. Search. score:7. Accepted answer. You've got an errors prop passed ...

React Form Validation With Formik And Yup

Dependencies. @testing-library/jest-dom^4.2.4. @testing-library/react^9.3.2 ... Validation and error messages; Handling form submission.