gpt4 book ai didi

reactjs - React hooks - 如何测试多个 useState hooks

转载 作者:行者123 更新时间:2023-12-03 13:37:35 25 4
gpt4 key购买 nike

我有一个很少有 useState 钩子(Hook)的组件:

const [resizing, setResizing] = React.useState(false);
const [x, setX] = React.useState(0);
const [y, setY] = React.useState(0);
在某些地方,我一次调用多个钩子(Hook),例如 onResize ,我都调用 setResizingsetXsetY钩:
<ResizableBox
height={520}
width={370}
minConstraints={[370, 520]}
maxConstraints={[Infinity, Infinity]}
className={classes.resizable}
onResize={(e) => {
if (e.movementX !== 0) {
setResizing(true);
setX((prev) => prev + e.movementX);
} else if (e.movementY !== 0) {
setResizing(true);
setY((prev) => prev + e.movementY / 2);
}
}}
onResizeStop={() => {
setResizing(false);
}}
>
我习惯于测试易于测试状态变化的类组件。
我想用这样的东西来测试它:
const setXSpy = jest.spyOn(React, 'setX');
const setYSpy = jest.spyOn(React, 'setY');
const setResizeSpy = jest.spyOn(React, 'setResize');


it('calls useState hooks correctly', () => {
resizableBox.props.onResize({movementX: 1});

expect(setXSpy).toHaveBeenCalledWith(1);
expect(setYSpy).not.toHaveBeenCalled();
expect(setResizeSpy).toHaveBeenCalledWith(true);
});
但是,我不确定在这个例子中如何测试钩子(Hook)?

最佳答案

您正在测试该组件的实现细节,这不是一个好主意(您基本上是将测试与该实现耦合,而不是使用测试来确定该组件是否完成了它应该做的事情)。
相反,我会尝试找到一种方法来像用户一样测试组件并确定输出是否正确。
从整合 testing-library 开始然后遵循一些描述的模式herehere .
问题是,你想测试什么?该测试的预期结果是什么,它将涵盖哪些行为?
LE:在你的情况下,我看到你正在尝试测试 React-Resizable,你可以尝试 mouseDown在调整大小 handle 上,然后发出 mouseMovemouseUp看看是否发生了正确的事情(我没有从代码中看到你对状态值做了什么,你用它们做什么)

关于reactjs - React hooks - 如何测试多个 useState hooks,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63825638/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com