Question

我正在使用 react-dnd 实现“拖放”。这涉及从一个组件拖动项目并将其放入另一个组件。从功能上讲，它工作得很好，但我在测试“下降”以触发该功能时遇到了麻烦。当我测试时，我根本无法让它注册我正在下降。

一些相关信息：

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

“拖放”组件代码

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）触发一个事件，以及其他一些事情。但我不能让任何事情发生。模拟功能组件中“删除”的东西的最佳方法是什么？

在功能组件中测试 react-dnd drop

0 个答案: