javascript - Testing the Drag and Drop event listeners using Jest/Enzyme

Question

I am looking to test this component, I have written the test but it doesn't seem to have simulated the different drag events.

I also tried to pass in the handle functions as a prop and check if they were called when simulating events, but They weren't being called. Is this the way to simulate the drag and drop?

export default function DragAndDrop(props) {
  const classes = useStyles();
  const [drag, setDrag] = React.useState(false);
  const dropRef = useRef(null);

  const handleDrag = function (e) {
    e.preventDefault()
    e.stopPropagation()
  }

  const handleDragIn = function (e) {
    e.preventDefault()
    e.stopPropagation()
    dragCounter++
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setDrag(true);
    }
  }

  const handleDragOut = function (e) {
    e.preventDefault()
    e.stopPropagation()
    dragCounter--;
    if (dragCounter === 0) {
      setDrag(false);
    }
  }

  const handleDrop = function (e) {
    e.preventDefault()
    e.stopPropagation()
    setDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      props.handleDrop(e.dataTransfer.files)
      e.dataTransfer.clearData()
      dragCounter = 0    
    }
  }

  useEffect(() => {
    let div = dropRef.current;

    // initiate the event handler
    div.addEventListener('dragenter', handleDragIn);
    div.addEventListener('dragleave', handleDragOut);
    div.addEventListener('dragover', handleDrag);
    div.addEventListener('drop', handleDrop); 

    // this will clean up the event every time the component is re-rendered
    return function cleanup() {
      div.removeEventListener('dragenter', handleDragIn);
      div.removeEventListener('dragleave', handleDragOut);
      div.removeEventListener('dragover', handleDrag);
      div.removeEventListener('drop', handleDrop);
    };
  });

  return (
    <div data-test="dropRef" className={classes.root} ref={dropRef}>
      {drag && 
        <div className={classes.sub1}>
          <div className={classes.sub2}>
            <div data-test="upload-component">Upload</div>
          </div>
        </div>
      }
      {props.children}
    </div>
  )
}

Here is the test File I have so far:

import { render, shallow, mount } from 'enzyme';
import React from 'react';
import DragAndDrop from './DragAndDrop';
import { findByTestAttr } from '../../utils/TestUtils';

const mockProps = { handleDrop: jest.fn() };

let mockSetDrag = jest.fn();

const mockEvent = {
    dataTransfer: {items: ["file1", "file2"]},
    preventDefault: () => jest.fn(),
    stopPropagation: () => jest.fn()
}

it('renders the drop reference', () => {
    const wrapper = shallow(<DragAndDrop { ...mockProps }/>);
    console.log(wrapper.debug())
    const dropRef = findByTestAttr(wrapper, 'dropRef');
    expect(dropRef.length).toBe(1);
})


it('allows the user to drag over a file', () => {
    const component = mount(<DragAndDrop { ...mockProps }/>);
    const dropRef = findByTestAttr(component, 'dropRef');
    dropRef.simulate('dragover', mockEvent)
    const uploadComponent = findByTestAttr(component, 'upload-component');
    expect(uploadComponent.length).toBe(1);
})

question from:https://stackoverflow.com/questions/65598326/testing-the-drag-and-drop-event-listeners-using-jest-enzyme

Answer 1

Waitting for answers