如何在Jest中模拟jQuery timepicker的onClose事件完成AngularJS测试？

问题根因 #

你编写的$.fn.timepicker mock逻辑不符合该插件的实际调用规则：
jQuery timepicker 初始化时接收配置对象作为入参，你写的onClose是配置对象的属性，而非timepicker实例返回的方法。你之前的mock没有调用传入配置里的onClose回调，自然不会触发$scope.varA的赋值逻辑。

可行解决方案 #

根据你的测试场景可以选择以下两种写法：

场景1：初始化timepicker时直接触发onClose验证 #

如果你的测试只需要验证onClose触发后的逻辑，直接在mock中调用传入配置的onClose即可：

describe('when scope.someMethod() is called ', function(){
  test('Should check varA is 1 when scope.someMethod() is called' , function(){
    // 正确mock：接收配置参数，调用其中的onClose回调
    $.fn.timepicker = jest.fn((config) => {
      config.onClose();
      // 若回调内修改$scope后未触发脏检查，可补充一行 scope.$apply();
    });
    scope.someMethod();
    expect(scope.varA).toEqual(1);
  });
});

场景2：模拟后续手动触发timepicker关闭 #

如果需要区分初始化和关闭两个阶段的状态，可先把onClose回调存下来再手动触发：

describe('when timepicker is closed', function(){
  test('Should set varA to 1 after timepicker close' , function(){
    let onCloseCallback;
    $.fn.timepicker = jest.fn((config) => {
      onCloseCallback = config.onClose;
    });
    // 执行初始化逻辑
    scope.someMethod();
    // 初始化完成时varA还未赋值
    expect(scope.varA).toBeUndefined();
    // 模拟触发关闭事件
    onCloseCallback();
    expect(scope.varA).toEqual(1);
  });
});

内容的提问来源于stack exchange，提问作者prem30488