InputMask: cannot test component with @testing-library/user-event >= 14.0.0

[Vloeck]

Describe the bug

When using @testing-library/user-event >= 14.0.0 with type(), the InputMask throws:
TypeError: Cannot read properties of undefined (reading 'end')
because caret() apparently returns undefined

Full StackTrace:

     TypeError: Cannot read properties of undefined (reading 'end')

      at onKeyPress (node_modules/primereact/inputmask/inputmask.cjs.js:276:15)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:4164:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:4213:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4277:31)
      at invokeGuardedCallbackAndCatchFirstError (node_modules/react-dom/cjs/react-dom.development.js:4291:25)
      at executeDispatch (node_modules/react-dom/cjs/react-dom.development.js:9041:3)
      at processDispatchQueueItemsInOrder (node_modules/react-dom/cjs/react-dom.development.js:9073:7)
      at processDispatchQueue (node_modules/react-dom/cjs/react-dom.development.js:9086:5)
      at dispatchEventsForPlugins (node_modules/react-dom/cjs/react-dom.development.js:9097:3)
      at node_modules/react-dom/cjs/react-dom.development.js:9288:12
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:26140:12)
      at batchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:3991:12)
      at dispatchEventForPluginEventSystem (node_modules/react-dom/cjs/react-dom.development.js:9287:3)
      at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (node_modules/react-dom/cjs/react-dom.development.js:6465:5)
      at dispatchEvent (node_modules/react-dom/cjs/react-dom.development.js:6457:5)
      at dispatchDiscreteEvent (node_modules/react-dom/cjs/react-dom.development.js:6430:5)
      at HTMLDivElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
      at HTMLInputElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
      at HTMLInputElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLInputElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:39:40
      at node_modules/@testing-library/react/dist/pure.js:93:16
      at node_modules/@testing-library/react/dist/act-compat.js:47:24
      at act (node_modules/react/cjs/react.development.js:2512:16)
      at node_modules/@testing-library/react/dist/act-compat.js:46:25
      at Object.eventWrapper (node_modules/@testing-library/react/dist/pure.js:92:28)
      at Object.wrapEvent (node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:6:28)
      at Object.dispatchEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:39:19)
      at Object.dispatchUIEvent (node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:22:26)
      at KeyboardHost.keydown (node_modules/@testing-library/user-event/dist/cjs/system/keyboard.js:86:22)
      at keyboardAction (node_modules/@testing-library/user-event/dist/cjs/keyboard/index.js:28:35)
      at Object.keyboard (node_modules/@testing-library/user-event/dist/cjs/keyboard/index.js:17:15)
      at Object.type (node_modules/@testing-library/user-event/dist/cjs/utility/type.js:23:5)
      at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:73:22)

Reproducer

https://codesandbox.io/p/devbox/zj64yy

PrimeReact version

10.3.1

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

• create Jest Test with a new InputMask
• create new userEvent.type on the input element
• run test

or

• download sandbox, run npm install and npm run test

Expected behavior

test does not fail with Exception
was working well with @testing-library/user-event 13.5.0

[melloware]

PR is welcome if you want to debug it.

[Vloeck]

I did some debugging and found the following:

• version 13 creates a input event, which calls onInput and handleInputChange
• version 14 creates a keypress event which calls onKeyPress
• both functions call caret(), but only in onKeyPress the result is used
• the caret() function return early if inputEl.offsetParent is undefined
• offsetParent is never defined if run in jsdom, as seen in Bug Report for jsdom and explaining comment

Is there any way to get around using offsetParent?

[melloware]

I don't like changing working code to fix JSDOM or Jest issues....

[Vloeck]

I understand that.
But just looking at the code I can clearly see some problems:

• in InputMask.js:30 in the caret() function, undefined is returned in lines 35 or 63.
• in InputMask.js:232 in the onKeyPress() function, caret() is called in line 238 and in line 248 the result is accessed without checking if the result is undefined.

There should probably be some codepath here that does not result in an exception.

If you do not want to change the code, is it possible to add something to the documentation then?

[melloware]

Well if you create stackblitz reproducer showing the bug we can fix. I wasn't going to fix if it's just a JSDOM issue.

[melloware]

@Vloeck PR submitted I found anyplace caret() was called and its return value used without checking for NULL/undefined. Let me know how that looks?

[melloware]

@Vloeck 10.3.2 is out can you try again and let me know?

[Vloeck]

I tested it and my tests work now.
Thank you for your help

[melloware]

Thanks for the help!