React-testing-library: Don't work fireEvent.paste (ClipboardEvent)

[Toxblh]

ENV:

• react-testing-library version: 9.3.0
• @testing-library/jest-dom@latest
• @testing-library/dom@latest
• react version: 16.10.2
• node version: 10.16.3 / 12.11.1
• npm (or yarn) version: npm 6.11.3 / yarn 1.17.3

Relevant code or config:

1. Standard from Create React App (my app)
2. Template Codesandbox (I'll show it here)

setupTest.js

1.My:

import 'jest-styled-components'
import '@testing-library/jest-dom/extend-expect'

1. Codesandbox

What you did:

// Test
  test('from clipboard', () => {
    const component = render(<PasscodeInput />)
    const input = component.container.querySelector('input')

//  Any try
    fireEvent.paste(input, { target: { value: '4321' }})
//  fireEvent.paste(input, { dataType: 'text/plain', data: '4321' })
//  fireEvent.paste(input, { target: { getData: () => { return '4321' }}})

    expect(input.value).toBe('4321')
  })

// Code which I test
const handlePaste = (event: React.ClipboardEvent) => {
    const code: string = event.clipboardData.getData('text')
 // ...
    setCode(code)
  }

What happened:

src/__tests__/index.test.js
  ✕ from clipboard (69ms)

  ● from clipboard

    TypeError: Cannot read property 'getData' of undefined

       8 |   const handlePaste = event => {
       9 |     console.log(event);
    > 10 |     const value = event.clipboardData.getData("text");
         |                                       ^
      11 |     const code = value
      12 |       .split("")
      13 |       .map(char => {

      at getData (src/index.js:10:39)      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:362:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:411:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:466:31)
      at invokeGuardedCallbackAndCatchFirstError (node_modules/react-dom/cjs/react-dom.development.js:480:25)
      at executeDispatch (node_modules/react-dom/cjs/react-dom.development.js:612:3)
      at executeDispatchesInOrder (node_modules/react-dom/cjs/react-dom.development.js:637:5)
      at executeDispatchesAndRelease (node_modules/react-dom/cjs/react-dom.development.js:743:5)
      at executeDispatchesAndReleaseTopLevel (node_modules/react-dom/cjs/react-dom.development.js:752:10)
      at forEachAccumulated (node_modules/react-dom/cjs/react-dom.development.js:724:8)
      at runEventsInBatch (node_modules/react-dom/cjs/react-dom.development.js:769:3)
      at runExtractedPluginEventsInBatch (node_modules/react-dom/cjs/react-dom.development.js:914:3)
      at handleTopLevel (node_modules/react-dom/cjs/react-dom.development.js:5848:5)
      at batchedEventUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24343:12)
      at batchedEventUpdates (node_modules/react-dom/cjs/react-dom.development.js:1463:12)
      at dispatchEventForPluginEventSystem (node_modules/react-dom/cjs/react-dom.development.js:5943:5)
      at attemptToDispatchEvent (node_modules/react-dom/cjs/react-dom.development.js:6059:5)
      at dispatchEvent (node_modules/react-dom/cjs/react-dom.development.js:5963:19)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:815:12)
      at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:12188:10)
      at discreteUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24359:12)
      at discreteUpdates (node_modules/react-dom/cjs/react-dom.development.js:1486:12)
      at dispatchDiscreteEvent (node_modules/react-dom/cjs/react-dom.development.js:5926:3)
      at fireEvent (node_modules/@testing-library/dom/dist/events.js:620:18)
      at Function.fireEvent.(anonymous function) [as paste] (node_modules/@testing-library/dom/dist/events.js:668:36)
      at node_modules/@testing-library/react/dist/pure.js:149:40
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24328:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1120:14)
      at Function.fireEvent.(anonymous function).args [as paste] (node_modules/@testing-library/react/dist/pure.js:148:28)
      at Object.paste (src/__tests__/index.test.js:9:13)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mu
table use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
        in input (at src/index.js:25)
        in PasscodeInput (at __tests__/index.test.js:6)

  console.log src/index.js:9
    Class {
      dispatchConfig:
       { phasedRegistrationNames: { bubbled: 'onPaste', captured: 'onPasteCapture' },
         dependencies: [ 'paste' ],
         eventPriority: 0 },
      _targetInst:
       FiberNode {
         tag: 5,
         key: null,
         elementType: 'input',
         type: 'input',
         stateNode:
          HTMLInputElement {
            '__reactInternalInstance$tfk3gmcozrk': [Circular],
            '__reactEventHandlers$tfk3gmcozrk': [Object],
            _wrapperState: [Object],
            value: [Getter/Setter],
            _valueTracker: [Object] },
         return:
          FiberNode {
            tag: 0,
            key: null,
            elementType: [Function: PasscodeInput],
            type: [Function: PasscodeInput],
            stateNode: null,
            return: [FiberNode],
            child: [Circular],
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: {},
            memoizedProps: {},
            updateQueue: null,
            memoizedState: [Object],
            dependencies: null,
            mode: 0,
            effectTag: 1,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 4,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: null,
            _debugNeedsRemount: false,
            _debugHookTypes: [Array] },
         child: null,
         sibling: null,
         index: 0,
         ref: null,
         pendingProps: { onPaste: [Function: handlePaste], value: '' },
         memoizedProps: { onPaste: [Function: handlePaste], value: '' },
         updateQueue: null,
         memoizedState: null,
         dependencies: null,
         mode: 0,
         effectTag: 0,
         nextEffect: null,
         firstEffect: null,
         lastEffect: null,
         expirationTime: 0,
         childExpirationTime: 0,
         alternate: null,
         actualDuration: 0,
         actualStartTime: -1,
         selfBaseDuration: 0,
         treeBaseDuration: 0,
         _debugID: 6,
         _debugIsCurrentlyTiming: false,
         _debugSource:
          { fileName:
             '/Users/toxblh/Downloads/dom-testing-library-template/src/index.js',
            lineNumber: 25 },
         _debugOwner:
          FiberNode {
            tag: 0,
            key: null,
            elementType: [Function: PasscodeInput],
            type: [Function: PasscodeInput],
            stateNode: null,
            return: [FiberNode],
            child: [Circular],
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: {},
            memoizedProps: {},
            updateQueue: null,
            memoizedState: [Object],
            dependencies: null,
            mode: 0,
            effectTag: 1,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 4,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: null,
            _debugNeedsRemount: false,
            _debugHookTypes: [Array] },
         _debugNeedsRemount: false,
         _debugHookTypes: null },
      nativeEvent: Event { isTrusted: [Getter] },
      type: 'paste',
      target:
       HTMLInputElement {
         '__reactInternalInstance$tfk3gmcozrk':
          FiberNode {
            tag: 5,
            key: null,
            elementType: 'input',
            type: 'input',
            stateNode: [Circular],
            return: [FiberNode],
            child: null,
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: [Object],
            memoizedProps: [Object],
            updateQueue: null,
            memoizedState: null,
            dependencies: null,
            mode: 0,
            effectTag: 0,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 6,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: [FiberNode],
            _debugNeedsRemount: false,
            _debugHookTypes: null },
         '__reactEventHandlers$tfk3gmcozrk': { onPaste: [Function: handlePaste], value: '' },
         _wrapperState:
          { initialChecked: undefined, initialValue: '', controlled: true },
         value: [Getter/Setter],
         _valueTracker:
          { getValue: [Function: getValue],
            setValue: [Function: setValue],
            stopTracking: [Function: stopTracking] } },
      currentTarget:
       HTMLInputElement {
         '__reactInternalInstance$tfk3gmcozrk':
          FiberNode {
            tag: 5,
            key: null,
            elementType: 'input',
            type: 'input',
            stateNode: [Circular],
            return: [FiberNode],
            child: null,
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: [Object],
            memoizedProps: [Object],
            updateQueue: null,
            memoizedState: null,
            dependencies: null,
            mode: 0,
            effectTag: 0,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 6,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: [FiberNode],
            _debugNeedsRemount: false,
            _debugHookTypes: null },
         '__reactEventHandlers$tfk3gmcozrk': { onPaste: [Function: handlePaste], value: '' },
         _wrapperState:
          { initialChecked: undefined, initialValue: '', controlled: true },
         value: [Getter/Setter],
         _valueTracker:
          { getValue: [Function: getValue],
            setValue: [Function: setValue],
            stopTracking: [Function: stopTracking] } },
      eventPhase: 3,
      bubbles: true,
      cancelable: true,
      timeStamp: 1570534781137,
      defaultPrevented: false,
      isTrusted: false,
      clipboardData: undefined,
      isDefaultPrevented: [Function: functionThatReturnsFalse],
      isPropagationStopped: [Function: functionThatReturnsFalse],
      _dispatchListeners: [Function: handlePaste],
      _dispatchInstances:
       FiberNode {
         tag: 5,
         key: null,
         elementType: 'input',
         type: 'input',
         stateNode:
          HTMLInputElement {
            '__reactInternalInstance$tfk3gmcozrk': [Circular],
            '__reactEventHandlers$tfk3gmcozrk': [Object],
            _wrapperState: [Object],
            value: [Getter/Setter],
            _valueTracker: [Object] },
         return:
          FiberNode {
            tag: 0,
            key: null,
            elementType: [Function: PasscodeInput],
            type: [Function: PasscodeInput],
            stateNode: null,
            return: [FiberNode],
            child: [Circular],
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: {},
            memoizedProps: {},
            updateQueue: null,
            memoizedState: [Object],
            dependencies: null,
            mode: 0,
            effectTag: 1,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 4,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: null,
            _debugNeedsRemount: false,
            _debugHookTypes: [Array] },
         child: null,
         sibling: null,
         index: 0,
         ref: null,
         pendingProps: { onPaste: [Function: handlePaste], value: '' },
         memoizedProps: { onPaste: [Function: handlePaste], value: '' },
         updateQueue: null,
         memoizedState: null,
         dependencies: null,
         mode: 0,
         effectTag: 0,
         nextEffect: null,
         firstEffect: null,
         lastEffect: null,
         expirationTime: 0,
         childExpirationTime: 0,
         alternate: null,
         actualDuration: 0,
         actualStartTime: -1,
         selfBaseDuration: 0,
         treeBaseDuration: 0,
         _debugID: 6,
         _debugIsCurrentlyTiming: false,
         _debugSource:
          { fileName:
             '/Users/toxblh/Downloads/dom-testing-library-template/src/index.js',
            lineNumber: 25 },
         _debugOwner:
          FiberNode {
            tag: 0,
            key: null,
            elementType: [Function: PasscodeInput],
            type: [Function: PasscodeInput],
            stateNode: null,
            return: [FiberNode],
            child: [Circular],
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: {},
            memoizedProps: {},
            updateQueue: null,
            memoizedState: [Object],
            dependencies: null,
            mode: 0,
            effectTag: 1,
            nextEffect: null,
            firstEffect: null,
            lastEffect: null,
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: null,
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 4,
            _debugIsCurrentlyTiming: false,
            _debugSource: [Object],
            _debugOwner: null,
            _debugNeedsRemount: false,
            _debugHookTypes: [Array] },
         _debugNeedsRemount: false,
         _debugHookTypes: null } }

  console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'getData' of undefined]
        at reportException (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:411:16)
        at invokeGuardedCallback (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:466:31)
        at invokeGuardedCallbackAndCatchFirstError (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:480:25)
        at executeDispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:612:3) TypeError: Cannot read property 'getData' of undefined
        at getData (/Users/toxblh/Downloads/dom-testing-library-template/src/index.js:10:39)
        at HTMLUnknownElement.callCallback (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:362:14)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:411:16)
        at invokeGuardedCallback (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:466:31)
        at invokeGuardedCallbackAndCatchFirstError (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:480:25)
        at executeDispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:612:3)
        at executeDispatchesInOrder (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:637:5)
        at executeDispatchesAndRelease (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:743:5)
        at executeDispatchesAndReleaseTopLevel (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:752:10)
        at forEachAccumulated (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:724:8)
        at runEventsInBatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:769:3)
        at runExtractedPluginEventsInBatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:914:3)
        at handleTopLevel (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5848:5)
        at batchedEventUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24343:12)
        at batchedEventUpdates (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:1463:12)
        at dispatchEventForPluginEventSystem (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5943:5)
        at attemptToDispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:6059:5)
        at dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5963:19)
        at unstable_runWithPriority (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/scheduler/cjs/scheduler.development.js:815:12)
        at runWithPriority$2 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:12188:10)
        at discreteUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24359:12)
        at discreteUpdates (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:1486:12)
        at dispatchDiscreteEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5926:3)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLInputElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:133:9)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLInputElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at fireEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:620:18)
        at Function.fireEvent.(anonymous function) [as paste] (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:668:36)
        at /Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/react/dist/pure.js:149:40
        at batchedUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24328:12)
        at act (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1120:14)
        at Function.fireEvent.(anonymous function).args [as paste] (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/react/dist/pure.js:148:28)
        at Object.paste (/Users/toxblh/Downloads/dom-testing-library-template/src/__tests__/index.test.js:9:13)
        at Object.asyncJestTest (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)

  console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'getData' of undefined]
        at reportException (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLInputElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:133:9)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLInputElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at fireEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:620:18)
        at Function.fireEvent.(anonymous function) [as paste] (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:668:36)
        at /Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/react/dist/pure.js:149:40
        at batchedUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24328:12) TypeError: Cannot read property 'getData' of undefined
        at getData (/Users/toxblh/Downloads/dom-testing-library-template/src/index.js:10:39)
        at HTMLUnknownElement.callCallback (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:362:14)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:411:16)
        at invokeGuardedCallback (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:466:31)
        at invokeGuardedCallbackAndCatchFirstError (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:480:25)
        at executeDispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:612:3)
        at executeDispatchesInOrder (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:637:5)
        at executeDispatchesAndRelease (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:743:5)
        at executeDispatchesAndReleaseTopLevel (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:752:10)
        at forEachAccumulated (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:724:8)
        at runEventsInBatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:769:3)
        at runExtractedPluginEventsInBatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:914:3)
        at handleTopLevel (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5848:5)
        at batchedEventUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24343:12)
        at batchedEventUpdates (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:1463:12)
        at dispatchEventForPluginEventSystem (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5943:5)
        at attemptToDispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:6059:5)
        at dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5963:19)
        at unstable_runWithPriority (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/scheduler/cjs/scheduler.development.js:815:12)
        at runWithPriority$2 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:12188:10)
        at discreteUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24359:12)
        at discreteUpdates (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:1486:12)
        at dispatchDiscreteEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:5926:3)
        at invokeEventListeners (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLInputElementImpl._dispatch (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:133:9)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLInputElementImpl.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLInputElement.dispatchEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at fireEvent (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:620:18)
        at Function.fireEvent.(anonymous function) [as paste] (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/dom/dist/events.js:668:36)
        at /Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/react/dist/pure.js:149:40
        at batchedUpdates$1 (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom.development.js:24328:12)
        at act (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1120:14)
        at Function.fireEvent.(anonymous function).args [as paste] (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/@testing-library/react/dist/pure.js:148:28)
        at Object.paste (/Users/toxblh/Downloads/dom-testing-library-template/src/__tests__/index.test.js:9:13)
        at Object.asyncJestTest (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/Users/toxblh/Downloads/dom-testing-library-template/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.882s
Ran all test suites.

Reproduction:

Download code from codesandbox to your machine -> cd inside -> yarn -> yarn test -> catch error
https://codesandbox.io/s/dom-testing-library-template-3c0hp

Problem description:

That work in sandbox, but doesn't work in real env

Suggested solution:

Provide how to fix. Or which different codesandbox which work and simple docwnload the same -> install deps -> doesn't work.
Maybe bug more and more depper. I found that ClipboardApi not implemented here https://github.com/jsdom/jsdom/issues/1568 but strage why it's work in codesandbox.

[kentcdodds]

Hi @Toxblh, I'm guessing the issues is the lack of ClibpoardAPI support. Not sure why it's working in codesandbox, but what really matters is running the tests locally. Unfortunately this means that there's nothing we can do in the library to help you. You'll need to either run your tests in an environment that supports the clipboard API or mock it somehow.

You might be able to construct the Clipboard event yourself. If you figure that out, then we might be able to do something in here to make that easier (or potentially add a paste method in @testing-library/user-event).

If anyone else has ideas here they are welcome, but unfortunately this is the most I have time for.

[alexanderchan]

If you have to support IE11 anyways one can easily temporarily mock the clipboardData

    // use the IE11 part to simulate clipboard get data since
    // it doesn't appear to be supported in jsdom
    window.clipboardData = {
      getData: jest.fn(() => 'text that was pasted')
    }

An example usage of this is as described on mdn

const pastedText = (window.clipboardData || event.clipboardData).getData('text')

[samwhale]

To get around the ClipboardApi being undefined in jsdom I'm doing the following hack in my test:

it('should handle paste', () => {
    const onPaste = jest.fn();
    const { getByDisplayValue } = render(<input value="" onPaste={onPaste} onChange={() => {}} />);

    const inputElement = getByDisplayValue('');

    // `ClipboardEvent` extends `Event`. Start with creating a new `Event`
    // with 'paste' as the`typearg`
    const clipboardEvent = new Event('paste', {
        bubbles: true,
        cancelable: true,
        composed: true
    });

    // set `clipboardData` and `getData` properties. Set your mocked properties here
    clipboardEvent['clipboardData'] = {
        getData: () => '123456'
    };

    // dispatch your event to trigger your event handlers
    inputElement.dispatchEvent(clipboardEvent);

    expect(onPaste).toHaveBeenCalled();
});

Typescript may get mad about clipboardData not existing on Event. I bypassed this by using bracket notation when setting clipboardData.

[gnapse]

TypeScript may have advanced or I may have a different setting in tsconfig because even with bracket notation it outsmarted me:

Had to use @ts-ignore but it works now.

[kekko1212]

Just to add more info to this, the mock does get actually called, but the inputElement does not get its value set with the content of the paste, differently from what would happen in a real browser.

it('should show an empty cell if value is incorrect', async () => {
    const onPaste = jest.fn();
    const { getByDisplayValue } = render(<Test onPaste={onPaste} />);

    const inputElement = getByDisplayValue('');

    fireEvent.paste(inputElement, {
        clipboardData: { getData: () => '4321' },
    });

    fireEvent.click(inputElement);

    expect(onPaste).toHaveBeenCalled();

    await waitFor(() => {
        expect(queryByText(inputElement, '4321')).not.toBeNull();
    });
});

So this example above will pass the toHaveBeenCalled expectation, but will fail on the queryByText one.

Anyone's got any clue about this?