如何根据 useState 的值测试结果

Question

我有一个这样的组件：

const Component = ({callback}) => {
const [selected, setSelected] = useState(false);

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

如何测试该回调是否正在使用反应测试库和开玩笑调用？ 我在网上读到的所有内容都说你应该测试 DOM 来测试状态，但我并不是真的在测试状态，我是根据状态的值进行测试的。

Answer 1

您可以将回调作为 prop 传递：

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

同样，您可以测试何时falseselected未调用callback。