You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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

火山引擎 最新活动