dom-testing-library icon indicating copy to clipboard operation
dom-testing-library copied to clipboard

Can't use `fireEvent.drop` with `dataTransfer`

Open DEfusion opened this issue 1 year ago • 0 comments

  • @testing-library/dom version: 10.4.0
  • Testing Framework and version: @storybook/test@npm:8.4.7
  • DOM Environment:
    • Chrome: Error "Failed to construct 'DragEvent': Failed to read the 'dataTransfer' property from 'DragEventInit': Failed to convert value to 'DataTransfer'."
    • Firefox: Error "DragEvent constructor: 'dataTransfer' member of DragEventInit does not implement interface DataTransfer."
    • Safari: Error "TypeError: Type error"

Following the docs for fireEvent, I tried the following:

const dropzone = getByLabelText('File dropzone');
fireEvent.drop(dropzone), {
  dataTransfer: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})

Which gives me this error:

Failed to construct 'DragEvent': Failed to read the 'dataTransfer' property from 'DragEventInit': Failed to convert value to 'DataTransfer'.

If I create the event manually like so then this works:

const event = new Event('dragover');
event.dataTransfer = {
  files: [new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })],
};
await fireEvent(dropzone, event);

DEfusion avatar Feb 12 '25 14:02 DEfusion