Test dnd-kit with Jest and React Testing Library

[Thebarda]

Hello there !

I'm trying to drag and drop element with Jest and React Testing Library. I'm using @dnd-kit/sortable.
I configure my sensors to listen to pointer events and keyboard events. When I testing on a browser both sensore works perfectly but within a Jest / React Testing Library these sensors does'nt work anymore.

For the keyboard way:

• I press "Enter" on drag handle
• I press "ArrowDown" (vertical list)
• I press "Enter" to finish drag and drop process

For the pointer way. I use the dragStart, dragOver and drop function from React Testing Library.

My question Is : Is there a way to test drag and drop in Jest + React Testing Library environment ? Or should I use Cypress ?

[clauderic]

Your best bet if you want to test real user-like drag and drop interactions would be Cypress yes. With Jest your tests should focus on the api surface exposed by <DndContext> and how your app re-renders as a result.

[mgolawski]

@clauderic How would you proceed with triggering handlers on DnDContext?. Firing RTL events does not trigger anything. It basically closes the way to unit test any behavior until extracting the logic outside of components.