如何使用酶测试拖放反应

时间:2019-05-23 06:24:34

标签: typescript jestjs enzyme react-dnd

我正在寻找正确测试的好解决方案,我想实现的目标是将拖动的元素(组件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 个答案:

没有答案