Question

我正在寻找正确测试的好解决方案，我想实现的目标是将拖动的元素（组件1）拖放到dropzone（组件2）上，我希望可以用另一个文件中的两个组件来实现。我曾经对单元测试：

酶
开玩笑
react-dnd
react-dnd-test-utils
react-dnd-test-backend

function setupTargetElement(props) {
    const TargetContext = wrapInTestContext(TargetComponent)
    return mount(<TargetContext {...props}/>)
}

function setupDragElement(props) {
    const DragContext = wrapInTestContext(DragComponent)
    return mount(<DragContext {...props}/>)
}

describe("Shoud drop element", () => {
let targetElement
let dragElement
const mockDragElement = () => {
        return (
            <li key={drag.id} className="item" >
                Drag Elemnt
            </li>
        )
    }

beforeEach(() => {
        targetElement = setupTargetElement({         
            canDrop: true
        })
        dragElement = setupDragElement({
            connectDragSource: mockDragElement()
        })
    })

it('Should drop employee block', () => {
        const dragManager = dragElement.instance().getManager()
        const dragBackend = createBackend(dragManager)
        const targetManager = targetElement.instance().getManager()
        const targetBackend = createBackend(targetManager)

        let dragModule = dragElement.find(DragComponent)
        let targetModule = targetElement.find(TargetComponent)
        const dragSourceId = dragModule.instance().getHandlerId()
        const targetId = targetModule.instance().getHandlerId()

        dragBackend.simulateBeginDrag([dragSourceId], {})

        dragBackend.simulateHover([targetId], {})
        targetElement.update()
        targetModule = targetElement.find(TargetComponent)
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我在此dragBackend.simulateHover([targetId], {})行上出错：

预期要注册的targetIds。

有什么想法吗？

如何使用酶测试拖放反应

0 个答案: