如何使用酶/Jest 测试 useState答案

【问题标题】：How to test useState using enzyme/Jest如何使用酶/Jest 测试 useState
【发布时间】：2019-11-15 13:13:34
【问题描述】：

const Avatar = (props) => {
  const [hovered, setHovered] = useState('');
  return (
    <div className="user-avatar-wrapper">
      <div
        className="placeholder"
        onClick={() => {
          setHovered(true);
        }}
      />
    </div>
  )
}

如何测试模拟点击“.placeholder”后悬停是否发生变化？

【问题讨论】：

这通常是不鼓励的，这里有一个很好的解释为什么：stackoverflow.com/questions/55342181/… 一旦你使用hovered 的值来呈现不同的东西（例如不同的文本/应用不同的类），你可以验证那...
另外，在@forrert 评论中，Enzyme 还不支持钩子。根据this issue 部分支持已合并但尚未发布。
是的。这是有道理。就我而言，我使用 hovered 在另一个地方添加一个类。所以根据你们的说法，我现在应该验证课程是否在那里，对吧？

标签： reactjs jestjs enzyme

【解决方案1】：

根据@forret 和@colinux，我不应该测试状态变化，而是该状态变化的反应。

这是完整的代码：

const Avatar = (props) => {
  const [hovered, setHovered] = useState('');
  return (
    <div className="user-avatar-wrapper">
      <div
        className="placeholder"
        onClick={() => {
          setHovered(true);
        }}
      />
     {hovered &&
      <div className="my-hidden-element">
        ...something
      </div>
     }
    </div>
  )
}

那么我应该测试 .my-hidden-element 现在是否正在呈现，而不是测试“悬停”。

【讨论】：

我的元素在 <TransitionGroup /> 和 <CSSTransition /> 中，我认为检查状态会更容易 xD