使用 Jest、useRef 测试多个 useState 钩子 onClick？答案

【问题标题】：Testing Multiple useState hooks onClick With Jest, useRef?使用 Jest、useRef 测试多个 useState 钩子 onClick？
【发布时间】：2020-07-10 06:29:08
【问题描述】：

如何使用 Jest & Enzyme 测试以下功能？

const TheComponent = () => {
  const [setActive, setActiveState] = useState('');
  const [setHeight, setHeightState] = useState('0px');

  const content = useRef(null);

  const toggleExpand = () => {
    setActiveState(setActive === '' ? 'active' : '');
    setHeighState(setActive === 'active' ? '0px' : `${content.current.scrollHeight}px`);
  };

  return (
    <div>
      <div ref={content} style={{maxHeight: `${setHeight}`}}>
      </div>
      <button onClick={toggleExpand}>
        <span className={`text ${setActive === 'active' ? 'active' : 'disabled'} `}>Collapse</span>
        <span className={`text ${setActive === '' ? 'active' : 'disabled'} `}>Expand</span>
      </button>
    </div>
  );
}

让我失望的是在 toggleExpand onClick 上同时调用 setActiveState 和 setHeightState，我也不知道如何传入或模拟 content.current.scrollHeight

【问题讨论】：

标签： javascript reactjs jestjs react-hooks

【解决方案1】：

测试块内部

React.useState = jest.fn()

让mock返回一个可以被解构的数组，就像解构useState返回值一样，

React.useState
.mockReturnValueOnce([true, () => console.log("setState")])
.mockReturnValueOnce(["5ft", () => console.log("setHeight")]);

链接 mockReturnValueOnce 将在第一次调用 useState 时返回第一个，第二次和第二次调用 useState 时返回。

【讨论】：