[Solved] DateInput throws errors in Jest tests

[IT Dept]

I'm using the Kendo React Grid and Kendo React DateInput in an application and both, upon replacing the wrapped grid/DateInput components began causing my Jest tests to fail, not even rendering the mounted component.

Every test suite that mounts a component with a DateInput or Grid in the component tree fails with this error:

TypeError: _this.element.setCustomValidity is not a function

      124 |     ...passedProps,
      125 |   } as any;
    > 126 |   wrapper = Enzyme.mount(
          |                    ^
      127 |     <Provider store={store}>
      128 |       <MyComponent {...props} />
      129 |     </Provider>

      at DateInput._this.setValidity (node_modules/@progress/kendo-react-dateinputs/src/dateinput/DateInput.tsx:387:26)
      at DateInput.Object.<anonymous>.DateInput.componentDidMount (node_modules/@progress/kendo-react-dateinputs/src/dateinput/DateInput.tsx:150:14)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:14685:22)
      at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:15905:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:145: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:195:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:248:31)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:16075:7)
      at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:17463:3)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:17391:9)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:17295:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:17267:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:17155:5)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:16949:5)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:17637:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:17664:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:17691:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17957:3)
      at node_modules/react-dom/cjs/react-dom.development.js:18097:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:17518:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:18093:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:18152:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:314:114)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:119:16)
      at Object.mount (node_modules/enzyme/build/mount.js:21:10)
      at generateMountedWrapper (ts/apps/myApp/components/MyComponent.test.tsx:126:20)
      at Object.<anonymous> (ts/apps/myApp/components/MyComponent.test.tsx:330:5)

[Stefan]

Hello, Eric,

Thank you for the details.

The error occurs because enzyme does not have access to native methods such as setCustomValidity and others.

The following issue was opened in their repository describing why it occurs and possible approaches to resolve it.

https://github.com/airbnb/enzyme/issues/374

I hope the suggestions on the issue will help to resolve the error.

Regards,
Stefan
Progress Telerik

[IT Dept]

Thanks, I was able to implement one of the workarounds shown there.