I've been working on developing a drag-and-drop feature for a specific use case and attempted to write unit tests to cover potential scenarios. However, I encountered an issue where the events available within @dnd-kit/core (onDragStart, onDragMove, onDragOver, onDragEnd) were not being triggered while executing drag events in the unit tests.

I experimented with various approaches to simulate dragging one element and dropping it onto another. I tried using fireEvents available from @testing-library/react. None of those methods proved effective for me.

Method 1:

fireEvent.dragStart(firstItem)
fireEvent.dragEnter(lastItem);
fireEvent.dragOver(lastItem);
fireEvent.drop(lastItem);
fireEvent.dragEnd(firstItem);

Method 2:

fireEvent.pointerDown(firstItem);
fireEvent.pointerMove(firstItem, { clientX: 100, clientY: 100 });
fireEvent.pointerUp(firstItem);

I'm seeking a solution or guidance on how to effectively test drag-and-drop features using react-testing-library.

Any suggestions or help are greatly welcomed and appreciated. Thank you!

0

There are 0 best solutions below