Jasmine单元测试mock带路径参数的GET接口报无匹配请求如何解决

报错根因 #

当前测试代码中硬编码了期望请求URL为${environment.baseUrl1}/api/details/10/0，但业务代码中该接口的路径参数id是从localStorage存储的ids字段读取解析得到的，测试执行时未提前写入对应测试值，同时测试代码中注入的HttpTestingController形参名和实际调用的变量名不匹配，两个问题共同导致实际发起请求的URL和期望URL不匹配，触发请求找不到的报错。

带路径参数的GET接口测试处理 #

方案1：提前Mock依赖数据源 #

在调用测试接口前，先给路径参数依赖的localStorage写入测试用的固定值，同时修正参数变量名，保证业务代码拼接出的URL和期望URL一致：

it('GET call for store details API', waitForAsync(inject([HttpTestingController, AuthService],
  // 修正形参名和后续调用的变量名一致
  (httpTestingController: HttpTestingController, authService: AuthService) => {
    const obj = {
      "IsSuccess": true,
      "Result": [
        {
          "Details": "Test"
        }
      ]
    }
    // 新增：mock localStorage的ids值，保证路径参数为10
    localStorage.setItem('ids', JSON.stringify(10));

    authService.getStoreDetails()
      .subscribe((res: any) => {
        // 对象值比较用toEqual，toBe为严格引用相等
        expect(res).toEqual(obj);
      });

    const successRequest = httpTestingController.expectOne(environment.baseUrl1 + '/api/details/10/0');
    expect(successRequest.request.method).toEqual('GET');
    successRequest.flush(obj);
    httpTestingController.verify();
  })));

方案2：模糊匹配URL+参数校验 #

如果不想硬编码完整URL，也可以通过匹配URL前缀+请求方法的方式做模糊匹配，后续单独校验路径参数是否符合预期：

// 替换原有的expectOne硬匹配写法
const successRequest = httpTestingController.expectOne(req => 
  req.method === 'GET' && req.url.startsWith(`${environment.baseUrl1}/api/details/`)
);
// 校验路径参数是否正确
const urlSegments = successRequest.request.url.split('/');
const actualId = Number(urlSegments[urlSegments.length - 2]);
expect(actualId).toBe(10);

带查询参数的GET接口测试处理 #

针对带查询参数的GET请求（例如/api/goods?category=1&sort=price），可以使用以下两种方式处理：

硬匹配完整URL #

直接写全包含查询参数的完整URL即可匹配：

const req = httpTestingController.expectOne(`${environment.baseUrl1}/api/goods?category=1&sort=price`);

模糊匹配+独立校验查询参数 #

如果查询参数较多或者顺序不固定，可以先匹配URL前缀，再单独校验查询参数：

const req = httpTestingController.expectOne(req => 
  req.method === 'GET' && req.url.startsWith(`${environment.baseUrl1}/api/goods`)
);
// 校验查询参数值
expect(req.request.params.get('category')).toBe('1');
expect(req.request.params.get('sort')).toBe('price');

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