我试图监视 useState React 钩子(Hook),但我总是让测试失败
这是我的 react 组件:
const Counter= () => {
const[counter, setCounter] = useState(0);
const handleClick=() => {
setCounter(counter + 1);
}
return (
<div>
<h2>{counter}</h2>
<button onClick={handleClick} id="button">increment</button>
</div>
)
}
counter.test.js :it('increment counter correctlry', () => {
let wrapper = shallow(<Counter/>);
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementation((init) => [init, setState]);
const button = wrapper.find("button")
button.simulate('click');
expect(setState).toHaveBeenCalledWith(1);
})
不幸的是,这不起作用,我得到测试失败并显示该消息:expected 1
Number of calls: 0
最佳答案
您需要使用 React.useState
而不是单个导入 useState
.
我认为是关于代码如何获取 transpiled ,正如您在 babel repl 中看到的 useState
从单个导入最终与模块导入之一不同
_react.useState // useState
_react.default.useState // React.useState;
所以你监视_react.default.useState
但是您的组件使用 _react.useState
.似乎不可能监视单个导入,因为您需要该函数属于一个对象,这是一个非常广泛的指南,解释了模拟/监视模块的方式https://github.com/HugoDF/mock-spy-module-import
正如@Alex Mackay 提到的,你可能想改变你对测试 react 组件的心态,建议转向 react 测试库,但如果你真的需要坚持使用 enzyme ,你不需要那么远去模拟 react 库本身
关于javascript - 如何在 Jest 中模拟/监视 useState 钩子(Hook)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64165138/