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!