Reactjs 使用react dnd与useDrag和useDrop进行测试

有没有人能够通过使用带有useDrag和useDrop挂钩的功能组件来测试拖放功能

根据这里的示例，它们要么用DragSource或DropTarget装饰原始组件。 例如：

// ...

export interface BoxProps {
    name: string

    // Collected Props
    isDragging: boolean
    connectDragSource: ConnectDragSource
}
const Box: React.FC<BoxProps> = ({ name, isDragging, connectDragSource }) => {
    const opacity = isDragging ? 0.4 : 1
    return (
        <div ref={connectDragSource} style={{ ...style, opacity }}>
            {name}
        </div>
    )
}

export default DragSource(
    ItemTypes.BOX,
    {
        beginDrag: (props: BoxProps) => ({ name: props.name }),
        endDrag(props: BoxProps, monitor: DragSourceMonitor) {
            const item = monitor.getItem()
            const dropResult = monitor.getDropResult()

            if (dropResult) {
                alert(`You dropped ${item.name} into ${dropResult.name}!`)
            }
        },
    },
    (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging(),
    }),
)(Box)

/。。。
导出接口BoxProps{
名称：string
//收集道具
isDraging:布尔型
connectDragSource:connectDragSource
}
常量框：React.FC=（{name，isDraging，connectDragSource}）=>{
常数不透明度=IsDraging？0.4:1
返回(
{name}
)
}
导出默认DragSource(
ItemTypes.BOX，
{
beginDrag:（props:BoxProps）=>（{name:props.name}），
endDrag（道具：BoxProps，监视器：DragSourceMonitor）{
const item=monitor.getItem（）
const dropResult=monitor.getDropResult（）
if（dropResult）{
警报（`您已将${item.name}放入${dropResult.name}！`）
}
},
},
（连接：DragSourceConnector，监视器：DragSourceMonitor）=>({
connectDragSource:connect.dragSource（），
IsDraging:monitor.IsDraging（），
}),
)（方框）

从

---

不过，我找不到任何使用钩子的测试示例。他们确实有使用decorator和hook（）的代码示例，但也有只使用decorator的测试示例。

我从github票据中复制了这一示例，并为我工作：

const dragAndDrop = (src: Element, dst: Element) => {
  fireEvent.dragStart(src);
  fireEvent.dragEnter(dst);
  fireEvent.drop(dst);
  fireEvent.dragLeave(dst);
  fireEvent.dragEnd(src);
 };
const allSections = rendered.getAllByRole('dropzone');

const marketSection = allSections[0];
const marketExpandedSection = allSections[1];

const basisIdDrag = within(marketSection).getByRole('draggable');

act(() => {
  dragAndDrop(basisIdDrag, marketExpandedSection);
});

---

你找到解决办法了吗？我正试图用这种方法解决排序问题。他们承认他们的API需要在以下方面开展工作：