测试功能组件中的react-dnd下降

Question

我正在努力使用react-dnd. 这涉及将一项从一个组件拖放到另一组件中。从功能上讲，它工作得很好，但我在测试“drop”以便触发该功能时遇到了麻烦。当我测试时，我根本无法让它记录我正在掉落。

一些相关信息：

• 这是一个功能组件 - 大多数文档都以类组件为中心
• 我见过的大多数文档都涉及在同一组件内进行拖放 - 这是在两个单独的组件之间发生的
• 我尝试过使用酶（使用 mount）和 React 测试库（使用 render）进行测试

“删除”组件代码

const TableBody = React.forwardRef(({ <props> }: Props, ref) => {
    const [{ isOver }, drop] = useDrop({
        accept: 'TestItem',
        drop: (droppedItem: any) => dropFunction(droppedItem),
        collect: monitor => ({
            isOver: monitor.isOver(),
        }),
    });

    ...

    return (
        <MaterialTableBody ref={ref} role='rowgroup'>
            { <code to render rows }
        </MaterialTableBody>
    );
});

测试示例

test('Dropping on a table triggers the drop function', () => {
    const mockDropFunction = jest.fn();
    const NewContext = wrapInTestContext(TableBody);
    render(
        <NewContext <props> dropFunction={mockDropFunction} />
    );
    
    const tables = screen.getAllByRole('rowgroup');
    const table = tables[0];
    const mockDroppedItem = { id: 'test', type: 'TestItem' };

    fireEvent.drop(table, {
        dataTransfer: mockDroppedItem,
    });

    expect(mockDropFunction).toHaveBeenCalled();
});

我尝试了一些不同的迭代，例如为每个步骤触发一个事件（dragStart、dragEnter、dragOver、drop），以及其他一些事情。但我什至无法让任何事情发生。模拟功能组件中“删除”某些内容的最佳方法是什么？

Answer 1

问题出在放置事件的目标元素上：

fireEvent.dragStart(dragElem);
fireEvent.dragOver(dropElement);
fireEvent.drop(dropElement); // <-- element here should be the drop container
fireEvent.dragEnd(dragElem);