Jasmine框架下Angular测试带then的router spy参数不符报错如何解决？

错误原因 #

你的测试用例存在两个核心问题：

1. 路由调用逻辑匹配错误：业务代码中navigateByUrl的实际入参是根路径'/'和{ skipLocationChange: true }配置项，跳转到'/test'用的是router.navigate方法而非navigateByUrl，之前的断言把两个方法的调用逻辑搞混了。
2. 异步逻辑未触发：navigateByUrl返回Promise，你使用了fakeAsync但没有调用tick()触发Promise回调，导致router.navigate的调用不会执行。

修正后的测试用例 #

it('test search text for provider and work post', fakeAsync(() => {
  // 分别监听两个路由方法
  const navigateByUrlSpy = spyOn(router,'navigateByUrl').and.returnValue(Promise.resolve(true));
  const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));

  component.onSearch("Web");
  tick(); // 触发Promise回调，执行then内的逻辑
  fixture.detectChanges();

  // 校验navigateByUrl调用参数
  expect(navigateByUrlSpy).toHaveBeenCalled();
  expect(navigateByUrlSpy).toHaveBeenCalledWith('/', { skipLocationChange: true });
  // 校验navigate调用参数
  expect(navigateSpy).toHaveBeenCalled();
  expect(navigateSpy).toHaveBeenCalledWith(['/test'], { queryParams: { searchValue: "Web" } });
}));

修改说明 #

• 新增router.navigate方法的监听，分别校验两个路由方法的调用参数
• 调用tick()触发Promise异步回调，保证then内的路由跳转逻辑被执行
• 修正两个路由方法的断言参数，和业务代码的实际调用逻辑对齐

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