javascript - 如何在 Jest 中模拟/监视 useState 钩子(Hook)？

Question

我试图监视 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

Answer 1

您需要使用 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 库本身