Angular 5路由守卫单元测试问题：导航/class时canActivate未触发

看起来你遇到的核心问题是：你测试里Spy的守卫实例，和Angular路由导航时实际创建的守卫实例不是同一个，所以你的断言永远不会通过。下面给你具体的修复思路和方案：

问题根源 #

当你通过inject([StudentGuard])获取守卫实例并Spy它时，这个实例是测试注入器单独创建的；但Angular的路由系统在处理导航时，会从自己的注入器中请求一个全新的StudentGuard实例来执行canActivate逻辑。两个实例完全独立，所以你Spy的那个根本没被调用过。

修复方案 #

1. Spy守卫的原型方法（最可靠的方式） #

直接对StudentGuard类的原型进行Spy，这样所有新创建的守卫实例都会应用这个Spy：

it('should trigger guard when a student tries to access /class', fakeAsync(() => {
  // 对类原型的canActivate方法进行Spy，保留原逻辑
  const canActivateSpy = spyOn(StudentGuard.prototype, 'canActivate').and.callThrough();

  store.dispatch(StoreActions.User.setCurrentUser(TestObjects.User.Student));
  const router = TestBed.inject(Router);
  router.navigate(['/class/1']);
  tick();

  expect(canActivateSpy).toHaveBeenCalled();
  discardPeriodicTasks();
}));

2. 确保测试路由配置正确 #

另外，你的测试模块需要正确加载包含/class路由的配置，尤其是原路由用了懒加载loadChildren，测试中直接用懒加载可能会有问题，建议用Mock组件替代：

// 先定义一个Mock组件，避免加载真实的懒加载模块
@Component({ template: '' })
class MockClassComponent {}

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes([
        { 
          path: '', 
          children: [
            { 
              path: 'class', 
              component: MockClassComponent,
              canActivate: [StudentGuard] 
            }
          ]
        }
      ])
    ],
    declarations: [MockClassComponent],
    providers: [StudentGuard, Store]
  }).compileComponents();
}));

3. 修正路由配置的语法错误 #

注意你原路由配置里的children应该是数组，不是对象，这可能也是潜在问题：

// 错误写法
{ path: '', children: { path: 'class', ... } }

// 正确写法
{ path: '', children: [{ path: 'class', ... }] }

为什么原来的测试不生效？ #

简单来说：你Spy的是测试注入器创建的守卫实例，而路由导航用的是路由系统自己创建的另一个实例。只有Spy类的原型，才能覆盖所有实例的方法调用，这样才能捕获到路由触发的守卫逻辑。

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