React hooks - 如何测试多个 useState hooks

Posted 2023-03-08

【中文标题】React hooks - 如何测试多个 useState hooks

【英文标题】：React hooks - how to test multiple useState hooks

【发布时间】：2020-12-28 17:06:02

【问题描述】：

我有一个很少有 useState 钩子的组件：

const [resizing, setResizing] = React.useState(false);
const [x, setX] = React.useState(0);
const [y, setY] = React.useState(0);

在某些地方我一次调用多个钩子，例如在onResize，我同时调用setResizing 和setX 或setY 钩子：

<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);
);

但是，我不确定在这个例子中如何测试钩子？

【问题讨论】：

***.com/questions/57692521/…

你使用什么反应测试库？

开个玩笑和 react-test-renderer

您可以使用 Enzyme 等库来执行此操作，但它的反模式，通常您希望根据新状态检查 UI 组件的状态。

这是我认为对您有帮助的解决方案：***.com/a/70709100/11769900

【参考方案1】：

您正在测试该组件的实现细节，这不是一个好主意（您基本上是将测试与该实现耦合，而不是使用测试来确定该组件是否完成了它应该做的事情）。

相反，我会尝试找到一种方法来像用户一样测试组件并确定输出是否正确。

首先集成testing-library，然后遵循here 和here 描述的一些模式。

问题是，您要测试什么？该测试的预期结果是什么？它将涵盖哪些行为？

LE：在您的情况下，我看到您正在尝试测试 React-Resizable，您可以尝试在调整大小句柄上使用 mouseDown，然后发出 mouseMove 和 mouseUp 看看是否发生了正确的事情（我没有从代码中看到你对状态值做了什么，你用它们做什么）