How do I simulate drag and drop in enzyme testcase?

Question

I am trying to create a test for simulating a dragging of an image into a div. I am clueless on how to achieve this. Any help is much appreciated.

it('test drag and drop', () => {
    const app = mount(<App />);
    const loco = app.find('.app img');
    const dropTarget = app.find('.drop-target');
    let mockEvent = { dataTransfer: { type: 'test' } };
    loco.simulate('drag', mockEvent);
    //loco.simulate('dragover', dropTarget, mockEvent);
    //loco.simulate('drop', dropTarget, mockEvent);
});

I am trying to simulate the drop event, not sure how to do as 2 elements are involved in it.

Thanks, Saud

Answer 1

What DnD Component do you use? React-Dnd? Maybe this issue on Github can help you. Or maybe this article about testing Drag&Drop via Jest.