如何在Jest中Mock组件Props的reset函数?解决TypeError报错
正确Mock Jest中props的reset函数的方法
你遇到的这个报错,是因为对jest.fn()的用法理解有点偏差啦。先看你原来的错误写法:reset=jest.fn({},()=>{}),这里你把调用reset时的两个参数直接传给了jest.fn(),但实际上jest.fn()只接受一个模拟实现函数作为参数(或者不传,默认是空函数),所以才会抛出specificMockImpl.apply is not a function的错误。
下面给你两种正确的Mock方式,按需选择:
- 基础验证型Mock(不需要触发回调)
如果你的测试只需要验证reset函数是否被正确调用,不需要执行它的回调逻辑,直接创建一个空的mock函数即可:
// 创建mock函数 const resetMock = jest.fn(); // 把mock传入组件props const component = shallow(<YourComponent reset={resetMock} />);
之后你可以用这句断言来验证调用是否符合预期:
expect(resetMock).toHaveBeenCalledWith({}, expect.any(Function));
- 触发回调型Mock(需要更新组件状态)
如果你的测试需要触发reset的回调(比如验证userError被清空的逻辑),就要给jest.fn()传入一个模拟实现,在里面手动调用传入的回调函数:
const resetMock = jest.fn((_, callback) => { // 检查回调存在的话就执行它 if (typeof callback === 'function') { callback(); } });
这样当组件执行this.props.reset({}, () => { this.setState({ userError: '' }); })时,mock函数会自动触发这个回调,进而执行setState更新组件状态,你就能测试对应的逻辑了。
内容的提问来源于stack exchange,提问作者bikky barnwal




