Angular单元测试报错：TypeError: 无法读取undefined的'then'属性

问题原因 #

你的onCancel方法中，this.router.navigate()调用后链式调用了.then()，但单元测试里的routerSpy.navigate默认返回undefined，并非Promise对象，因此触发了该报错。

解决方案 #

1. 让routerSpy的navigate方法返回已决议的Promise #

在测试初始化阶段，给routerSpy.navigate指定返回值为一个已完成的Promise：

// 假设你之前是这样创建routerSpy的
const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
// 添加此行，让navigate返回Promise
routerSpy.navigate.and.returnValue(Promise.resolve(true));

2. 完善测试用例（推荐） #

修改测试用例，不仅验证方法被调用，还验证调用参数是否符合预期：

it("should navigate to hello", () => {
  component.onCancel();
  expect(routerSpy.navigate).toHaveBeenCalledWith(['hello']);
});

3. 处理window.router.reload()的潜在报错（可选） #

如果测试运行时还会因window.router.reload()报错，需要mock该对象：

// 在测试前添加mock
window.router = { reload: jasmine.createSpy('reload') };

完成以上调整后，onCancel方法执行时所有依赖都会被正确模拟，测试即可正常通过。

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