我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion 并且代码在 reacy 中。据我了解,它使用 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
属性部分 - 显然这是我们应该用来测试拖放交互
关于reactjs - 如何使用 react-testing-library 和 framer-motion 测试鼠标移动拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61755034/