Angular项目image-map-resizer插件测试用例编译报错求助

问题原因 #

• imageMapResize是你通过declare声明的全局函数，不属于当前Angular组件的实例成员。spyOn方法只能监听挂载在第一个入参对象上的方法，你的组件实例上根本不存在imageMapResize这个属性，因此TS类型校验直接抛出了参数不匹配的错误。

解决方法 #

方案一：直接Mock全局函数（无需修改业务代码） #

直接对挂载在window上的全局函数打桩即可，测试用例修改如下：

it('should call imageMapResize() on imageResized method', () => {
  // 给全局方法打spy，类型不兼容可加as any临时兼容
  const resizeSpy = spyOn(window as any, 'imageMapResize');
  component.imageResized();
  expect(resizeSpy).toHaveBeenCalled();
});

如果不想用as any，可以在测试文件顶部补充全局类型声明：

declare global {
  interface Window {
    imageMapResize: () => void;
  }
}

之后可直接写spyOn(window, 'imageMapResize')。

方案二：封装全局依赖为组件成员（更符合单测规范） #

建议把全局依赖显式声明为组件成员，后续维护和测试都更方便，先修改组件TS代码：

declare function imageMapResize(): void;

@Component({...})
export class 你的组件类名 {
  // 显式把全局方法挂载为组件的只读成员
  readonly imageMapResize = imageMapResize;

  imageResized() {
    this.imageMapResize();
  }
}

修改完成后你原来的测试用例就可以正常运行，无需额外调整。

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