Angular多签名Rest服务Mock类型不匹配问题求助

问题场景 #

我的Angular项目中，所有REST服务都定义了4个重载签名，以commandsGet方法为例：

public commandsGet(oem: string, countryCode?: string, observe?: 'body', reportProgress?: boolean): Observable<CommandGetResponse>;
public commandsGet(oem: string, countryCode?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<CommandGetResponse>>;
public commandsGet(oem: string, countryCode?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<CommandGetResponse>>;
public commandsGet(oem: string, countryCode?: string, observe: any = 'body', reportProgress = false): Observable<any> {
    return this.httpClient.get<CommandGetResponse>(`${this.basePath}/${oem}/commands/`, params);
}

编写测试Mock该服务时，遇到以下类型不匹配错误：

• 返回of(mockResponse) as Observable<CommandGetResponse>时，提示：Argument of type 'Observable' is not assignable to parameter of type 'Observable<HttpEvent<CommandGetResponse>>'
• 直接返回of(mockResponse)时，同样出现上述类型不匹配错误
• 返回of(new HttpResponse({ body: mockResponse }))时无语法错误，但测试因返回对象类型非CommandGetResponse而失败

解决方法 #

1. 明确指定Mock方法的重载签名 #

TypeScript会根据调用时的参数推断匹配的重载，Mock时可以通过显式指定observe参数的预期值，让TypeScript匹配到对应的重载：

// 针对默认observe='body'的调用场景
const mockService = jasmine.createSpyObj('YourService', ['commandsGet']);
mockService.commandsGet.and.returnValue(of(mockResponse) as Observable<CommandGetResponse>);

// 针对observe='response'的调用场景
mockService.commandsGet.withArgs('testOem', undefined, 'response').and.returnValue(of(new HttpResponse({ body: mockResponse })));

2. 用类型断言兼容所有重载 #

如果不需要区分不同的observe场景，可以用类型断言把返回值统一为所有重载的联合类型，避免类型检查报错：

mockService.commandsGet.and.returnValue(
  of(mockResponse) as Observable<CommandGetResponse | HttpResponse<CommandGetResponse> | HttpEvent<CommandGetResponse>>
);

3. 复刻原服务的逻辑（推荐） #

直接模拟原服务的实现逻辑，根据传入的observe参数返回对应类型的Observable，完美匹配所有重载：

import { HttpEventType } from '@angular/common/http';

const mockService = {
  commandsGet: (oem: string, countryCode?: string, observe: any = 'body', reportProgress = false) => {
    switch (observe) {
      case 'body':
        return of(mockResponse) as Observable<CommandGetResponse>;
      case 'response':
        return of(new HttpResponse({ body: mockResponse })) as Observable<HttpResponse<CommandGetResponse>>;
      case 'events':
        // 按需模拟HttpEvent，这里返回一个响应事件示例
        return of({ type: HttpEventType.Response, body: mockResponse }) as Observable<HttpEvent<CommandGetResponse>>;
      default:
        return of(mockResponse);
    }
  }
} as YourService;

4. 调整测试断言逻辑 #

如果选择返回HttpResponse类型的Mock数据，需要同步调整测试中的断言逻辑，从断言返回值本身改为断言返回值的body属性：

// 原错误断言
// expect(result).toEqual(mockResponse);

// 修改后的正确断言
expect(result.body).toEqual(mockResponse);

内容的提问来源于stack exchange，提问作者Christèle Legeard