Basic events are not triggered in the unit tests written with react-testing-library for the drag-and-drop feature developed using @dnd-kit

[ThiwankaB]

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!

[ronny-lark]

I would very much want this too. This library is wonderful, but other dnd solutions are fairly easily testable with the above methods. Please consider providing an example test suite using react testing library in the docs.