如何根据 useState 的值测试结果答案

【问题标题】：How to test outcome based on the value of useState如何根据 useState 的值测试结果
【发布时间】：2019-09-25 10:37:17
【问题描述】：

我有一个这样的组件：

const Component = ({callback}) => {

  const [selected, setSelected] = useState(false);


  const increment = () => {
    if(selected) {
      callback()
    } else {
      do something else...
    }
  }

}

如何使用反应测试库和 jest 测试该回调是否被调用？我在网上阅读的所有内容都说您应该测试 DOM 以测试状态，但我并不是真的在测试状态，我是根据状态的值进行测试。

【问题讨论】：

标签： javascript react-hooks react-testing-library

【解决方案1】：

您可以将回调作为道具传递：

const callback = jest.fn()
const { getByText } = render(<Component callback={callback} />)
fireEvent.click(getByText('Submit'))
expect(callback).toHaveBeenCalledTimes(1)
expect(callback).toHaveBeenCalledWith()

同样，你可以测试selected 是false 时callback 没有被调用。

【讨论】：

感谢 Giorgio，我正在测试，但是我的测试覆盖率表明未涵盖的行是 if 块中的行。该回调可以在组件内调用 3 次，在像上面的示例一样提交时以及在其他两个函数（增量和减量）中调用，这取决于状态是否为真来调用它。（使用函数名称更新编辑原始问题以澄清此响应）
"同理，你可以测试当 selected 为 false 时不调用回调。"我如何才能将 selected 更改为 false 寿？或 true，如果它通过 useState 设置。这是我的问题
你如何在你的真实应用中改变它？
组件加载时初始状态为false，如上图，然后会像setSelected(!selected)一样切换为切换
是的，但是用户如何改变它？