如何解决在功能组件中测试 react-dnd drop
我正在使用 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)触发一个事件,以及其他一些事情。但我不能让任何事情发生。模拟功能组件中“删除”的东西的最佳方法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。