测试Angular Router的navigate.then代码报undefined错如何解决

你出现该报错是因为单元测试中mock的Router.navigate方法未返回Promise对象，Angular原生Router.navigate方法返回值为Promise<boolean>，若mock实现没有对应返回值，调用then方法时就会触发空指针异常。

• 第一步：先正确配置Router的mock实现，确保navigate方法返回Promise
  示例代码（基于Angular Jasmine测试框架）：

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      // 替换为你要测试的组件/服务
      YourTargetComponent,
      {
        provide: Router,
        useValue: {
          // mock navigate方法返回成功状态的Promise
          navigate: jasmine.createSpy('navigate').and.returnValue(Promise.resolve(true))
        }
      }
    ]
  });
  // 提前mock window.location.reload避免测试页面真的刷新
  spyOn(window.location, 'reload').and.stub();
});

• 第二步：异步测试用例编写，处理Promise时序
  推荐用fakeAsync + tick处理异步逻辑，示例：

it('should jump to home page and reload after navigate success', fakeAsync(() => {
  const router = TestBed.inject(Router);
  // 触发包含navigate逻辑的业务方法
  component.yourBusinessMethod();

  // 验证navigate调用参数正确
  expect(router.navigate).toHaveBeenCalledWith(['/home']);
  // 执行所有微任务，触发then内的回调逻辑
  tick();
  // 验证刷新方法被调用
  expect(window.location.reload).toHaveBeenCalled();
}));

如果偏好async/await写法，也可以替换为如下实现：

it('should jump to home page and reload after navigate success', async () => {
  const router = TestBed.inject(Router);
  component.yourBusinessMethod();

  expect(router.navigate).toHaveBeenCalledWith(['/home']);
  // 等待Promise状态变更完成
  await router.navigate(['/home']);
  expect(window.location.reload).toHaveBeenCalled();
});

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