Angular函数式Auth Guard单元测试未使用Mock AuthService问题

问题分析 #

你遇到的核心问题是函数式守卫的依赖注入上下文配置错误，同时Mock服务的返回值与真实服务不匹配，导致Angular没有正确使用Mock的AuthService，反而调用了真实服务：

• 函数式守卫本身不是可注入的Angular服务，不需要将authGuard添加到TestBed的providers数组中，这会导致依赖解析逻辑混乱。
• 你的Mock服务中isLoggedIn返回of(true)（Observable），但真实守卫代码里直接用authService.isLoggedIn()做布尔判断，说明真实服务的isLoggedIn是同步返回布尔值，类型不匹配会引发额外问题。

解决方案 #

步骤1：修正TestBed配置，移除不必要的Provider #

不需要将authGuard注册为Provider，只需要在注入上下文中直接调用它，确保TestBed只提供Mock的AuthService。

步骤2：对齐Mock服务的返回值类型 #

确保Mock的isLoggedIn方法返回值与真实服务完全一致（同步布尔值或Observable）。

步骤3：正确使用注入上下文调用守卫 #

通过TestBed.runInInjectionContext包裹守卫调用，让inject(AuthService)能正确获取到Mock实例。

修正后的代码示例 #

情况1：真实AuthService的isLoggedIn返回同步布尔值 #

auth.guard.spec.ts

describe('AuthGuard', () => {
  let data = {
    url: [
      {
        path: 'testpath',
        parameters: {
          src: 'testsrcparam',
        },
      },
    ],
  };

  const setup = (authServiceMock: Partial<AuthService>) => {
    TestBed.configureTestingModule({
      providers: [
        // 仅提供Mock的AuthService，无需添加authGuard
        { provide: AuthService, useValue: authServiceMock },
      ],
    });

    return TestBed.runInInjectionContext(() => authGuard(data));
  };

  it('should return true if user is authenticated', () => {
    // Mock方法返回与真实服务一致的布尔值
    const mockAuthService = {
      isLoggedIn: () => true,
    };

    const guardResult = setup(mockAuthService);

    expect(guardResult).toBe(true);
  });
});

情况2：真实AuthService的isLoggedIn返回Observable #

如果真实服务的方法是异步的，先修正守卫代码：
auth.guard.ts

import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';

export const authGuard = (data: any) => {
  const authService = inject(AuthService);

  return authService.isLoggedIn().pipe(
    map(isLoggedIn => {
      if (isLoggedIn) {
        return true;
      }
      // 处理data参数逻辑
      if (data?.url?.[0]?.parameters?.src === 'testsrcparam') {
        return true;
      }
      return false;
    })
  );
};

对应的测试代码需要处理Observable：
auth.guard.spec.ts

import { fakeAsync, tick } from '@angular/core/testing';
import { of } from 'rxjs';

describe('AuthGuard', () => {
  let data = {
    url: [
      {
        path: 'testpath',
        parameters: {
          src: 'testsrcparam',
        },
      },
    ],
  };

  const setup = (authServiceMock: Partial<AuthService>) => {
    TestBed.configureTestingModule({
      providers: [
        { provide: AuthService, useValue: authServiceMock },
      ],
    });

    return TestBed.runInInjectionContext(() => authGuard(data));
  };

  it('should return true if user is authenticated', fakeAsync(() => {
    const mockAuthService = {
      isLoggedIn: () => of(true),
    };

    const guardResult$ = setup(mockAuthService);
    let result: boolean | undefined;
    
    guardResult$.subscribe(res => result = res);
    tick(); // 触发Observable的异步流

    expect(result).toBe(true);
  }));
});

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