Angular如何正确Mock带重载的生成API服务解决单元测试报错

错误原因 #

你当前的报错来自两个问题：

1. 语法书写错误：你写的getCurrentConnection: ('body') => of(CONNECTION_MOCK)会被TypeScript解析为给getCurrentConnection属性赋值为字符串'body'，而非声明入参为observe的函数，因此触发了「string类型不能分配给函数类型」的类型报错。
2. 自动生成的API服务包含多个方法重载，TypeScript对重载方法的类型推断精度不足，手动写mock函数时容易出现重载不匹配的问题。

修复方案 #

有两种常用的修复方式，都可以解决类型报错同时保证mock功能正常：

方式1：匹配实际调用的重载签名写mock函数 #

你实际业务代码中调用getCurrentConnection时传的是'body'参数，只需要让mock函数匹配对应重载的签名即可：

MockProvider(ConnectionControllerService, {
  getCurrentConnection: (observe?: 'body', reportProgress?: boolean, options?: { httpHeaderAccept?: '*/*' }) => {
    return of(CONNECTION_MOCK);
  }
}),

方式2：用类型断言简化写法 #

如果不想写全所有参数，可以直接把mock函数断言为原服务的对应方法类型，省略冗余的参数声明：

MockProvider(ConnectionControllerService, {
  getCurrentConnection: jest.fn(() => of(CONNECTION_MOCK)) as unknown as ConnectionControllerService['getCurrentConnection']
}),

如果没有用Jest的fn，也可以用普通箭头函数加断言：

MockProvider(ConnectionControllerService, {
  getCurrentConnection: (() => of(CONNECTION_MOCK)) as unknown as ConnectionControllerService['getCurrentConnection']
}),

两种方式都可以正常触发mock返回，不会再出现pipe调用undefined的运行时报错，同时消除TypeScript的类型校验错误。

内容的提问来源于stack exchange，提问作者mat.hudak