如何使用酶/笑话

Question

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

模拟单击“ .placeholder”后，如何测试悬停是否被更改？

Answer 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，而不是测试“悬停”。