使用@testing-library/react 库的 react-beautiful-dnd 测试用例

问题描述

我正在尝试编写一个测试用例，用于将一个节点从一个列表中拖放到另一个列表中。拖拽结束后，onDragEnd 函数会收到一个 source & destination 的结果。现在我得到，目的地 null & 原因 CANCEL。预期的结果也是得到目的地和理由 DROP。

{
  draggableId: '6001e75c6475cb6add2a8c74-new 4',type: 'DEFAULT',source: { droppableId: 'droppable-main',index: 0 },mode: 'FLUID',combine: null,destination: null,reason: 'CANCEL'
}

测试用例代码：

export const elementToBePresent = async (id,getByTestId,toAwait = false) => {
  const element = toAwait
    ? await waitForElement(() => getByTestId(id))
    : getByTestId(id)
  expect(element).toBeInTheDOM()
}

const mockGetBoundingClientRect = (el,bound = null) =>
  jest.spyOn(el,'getBoundingClientRect').mockImplementation(() =>
    !bound
      ? {
          top: 0,right: 0,bottom: 0,left: 0,width: 0,height: 0,x: space,y: space,center: { x: 0,y: 0 }
        }
      : bound
  )

describe('Alternate Hierarchy Tree',() => {
  it('copy node',async () => {
    // just to clean up the console
    console.warn = jest.fn()
    console.error = jest.fn()

    await setUpDataAlternate()

    const { getByTestId,debug } = render(
      <AlternateHierarchyPage
        rootId={'root'}
        location={alternateHierarchyLocation}
      />
    )


    /* 
       This node draggable id & source is this
       draggableId: 6001e75c6475cb6add2a8c74-new 4
       source: { droppableId: 'droppable-main',index: 0 } 
    */
    const masterListNode = await waitForElement(() =>
      getByTestId('master-list-node-0-0')
    )

    mockGetBoundingClientRect(masterListNode,{
      bottom: 170.7291717529297,height: 48.99305725097656,left: 245.62501525878906,right: 490.6250305175781,top: 121.73611450195312,width: 245.00001525878906,x: 245.62501525878906,y: 121.73611450195312
    })

    // Drop the node in this this list
    const listElement = await waitForElement(() =>
      getByTestId('list-0')
    )


    mockGetBoundingClientRect(listElement,{
      bottom: 430.26043701171875,height: 285.6944580078125,left: 589.7222290039062,right: 851.7361450195312,top: 144.56597900390625,width: 262.013916015625,x: 589.7222290039062,y: 144.56597900390625
    })


    // Press mouse button
    fireEvent.mouseDown(masterListNode,{clientX: 245.62501525878906,clientY: 121.73611450195312})

    // move mouse
    fireEvent.mouseMove(masterListNode,{clientX: 589.7222290039062,clientY: 144.56597900390625})

    // release mouse button
    fireEvent.mouseUp(masterListNode,clientY: 144.56597900390625})

  })
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）