时间戳

首页 > 解决方案 > 使用 react-dnd 和 useDrag 和 useDrop 进行测试

reactjs - 使用 react-dnd 和 useDrag 和 useDrop 进行测试

问题描述

有没有人能够使用带有 useDrag 和 useDrop 钩子的功能组件从https://github.com/react-dnd/react-dnd测试拖放功能？

根据http://react-dnd.github.io/react-dnd/docs/testing此处找到的示例，它们使用 DragSource 或 DropTarget HOC 装饰原始组件。例如：

// ...

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)

示例取自https://github.com/react-dnd/react-dnd/blob/master/packages/documentation/examples-decorators/src/01-dustbin/single-target/Box.tsx

不过，我找不到任何使用他们的钩子进行测试的例子。他们确实有使用装饰器和钩子的代码示例（https://github.com/react-dnd/react-dnd/tree/master/packages/documentation），但也有仅使用装饰器的测试示例。

标签： reactjsreact-dnd

解决方案

我从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);
});

推荐阅读