reactjs - 如何使用 react-testing-library 和 framer-motion 测试 mousemove 拖放
问题描述
我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion,并且代码处于响应状态。据我了解,它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能:
export const Draggable: FC<DraggableInterface> = ({
isDragging,
setIsDragging,
width,
height,
x,
y,
radius,
children,
}) => {
return (
<motion.div
{...{ isDragging }}
{...{ setIsDragging }}
drag
dragConstraints={{
left: Number(`${0 - x}`),
right: Number(
`${width - x}`,
),
top: Number(`${0 - y}`),
bottom: Number(
`${height - y}`,
),
}}
dragElastic={0}
dragMomentum={false}
data-test-id='dragabble-element'
>
{children}
</motion.div>
);
};
我有一个测试片段如下:
it('should drag the node to the new position', async () => {
const DraggableItem = () => {
const [isDragging, setIsDragging] = useState<boolean>(true);
return (
<Draggable
isDragging={isDragging}
setIsDragging={() => setIsDragging}
x={0}
y={0}
onUpdateNodePosition={() => undefined}
width={500}
height={200}
>
<div
style={{
height: '32px',
width: '32px'
}}
/>
</Draggable>
);
};
const { rerender, getByTestId } = render(<DraggableItem />);
rerender(<DraggableItem />);
const draggableElement = getByTestId('dragabble-element');
const { getByTestId, container } = render(
<DraggableItem />
);
fireEvent.mouseDown(draggableElement);
fireEvent.mouseMove(container, {
clientX: 16,
clientY: 16,
})
fireEvent.mouseUp(draggableElement)
await waitFor(() =>
expect(draggableElement).toHaveStyle(
'transform: translateX(16px) translateY(16px) translateZ(0)',
),
);
但是,我无法让测试成功通过,因为transform
我测试的值设置为none
. 它不会使用更新的 CSS 更新它的值。我认为存在某种异步问题或动画延迟,因此未检测到 mousemove 并且转换的值不会改变。有人知道如何让测试工作或测试 mousemove 更改的方法吗?
任何有关如何解决此问题的建议或指导将不胜感激!
解决方案
在 react-testing-library 文档中找到此部分
https://testing-library.com/docs/dom-testing-library/api-events/#fireeventeventname
向下滚动到dataTransfer
属性部分 - 显然这是我们应该用来测试拖放交互的内容
推荐阅读
- django - 为什么我会得到不同的结果?
- jenkins - 如何在 DSL 脚本中嵌入 jenkins 管道
- reactjs - 在 React 中动画显示/隐藏表格行
- java - 单击时更改视图高度
- python - Karger 在 python 2.7 中的最小切割实现没有给出正确的切割
- c# - 仅将选定的列更改为自定义格式,而所有列在 WPF DataGrid 中保持不变?
- sql-server - 将数据插入另一个表时数据类型格式发生变化 (MICROSOFT SQL Server Management Studio)
- css - 如何检查网络字体是否免费且在浏览器中可用
- python - ValueError:发现样本数量不一致的输入变量:[12600, 4200]
- android - React Native Navigation v2 (wix) 禁用 TopBar