Basic Jest tests not working because of form

Describe the bug Currently when bootstrapping a React app with create-react-app and running “npm run test” even the basic app.test.js included with the create-react-app setup fails by a jsdom issue. This seems to be caused by react-hook-form.

Currently the test I have is quite basic and passes if I don’t have any react-hook-form reference in my code, but if the form is implemented it always fails and gives this error:

 FAIL  src/App.test.js
  × renders without crashing (87ms)

  ● renders without crashing

    ReferenceError: MutationObserver is not defined

       5 | it('renders without crashing', () => {
       6 |   const div = document.createElement('div');
    >  7 |   ReactDOM.render(<App />, div);
         |            ^
       8 |   ReactDOM.unmountComponentAtNode(div);
       9 | });
      10 | 

      at onDomRemove (node_modules/react-hook-form/dist/react-hook-form.js:464:22)
      at __registerIntoFieldsRef (node_modules/react-hook-form/dist/react-hook-form.js:771:86)
      at register (node_modules/react-hook-form/dist/react-hook-form.js:804:13)
      at commitAttachRef (node_modules/react-dom/cjs/react-dom.development.js:20219:7)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22818:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:347:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:397:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:454:31)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:22585:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:643:12)
      at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:11305:10)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:22414:3)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21421:20)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:24319:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:24347:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24436:10)
      at node_modules/react-dom/cjs/react-dom.development.js:24963:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21687:12)      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24962:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:25042:12)
      at Object.render (src/App.test.js:7:12)

I’ve done some research on the missing MutationObserver and it seems like create-react-app has it included in their version of JSDom, so it leads me to believe maybe there’s a version mismatch with react-hook-form’s version of JSDom and create-react-app’s

To Reproduce Steps to reproduce the behavior:

1. Create a fresh react app using “npx create-react-app test_app”
2. Install react-hook-form (npm install react-hook-form)
3. Run “npm run test” and see that tests pass w/o react-hook-form implementation
4. Copy the quickstart from the react-hook-form README into your App.js
5. Run “npm run test” and see that test fails

Expected behavior The test passes

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 76.0.3809.100

[franciscocobas]

I’m using create-react-app and I solved the issue by installing the mutationobserver-shim package in dev environment. npm i -D mutationobserver-shim

And then adding to the file src/setupTest.js the following line: import 'mutationobserver-shim'

[stramel]

You need to provide a MutationObserver mock. You can do similar to what I have done here in your setupTests.js file. https://github.com/react-hook-form/react-hook-form/blob/master/setup.ts