Angular单元测试中注入服务未被Mock的原因及解决疑问

Angular测试框架默认不会自动Mock注入的服务——它会创建真实的UserService实例，这就是你遇到报错的核心原因：真实服务的init方法被执行了，而它依赖的下游服务没在测试模块中正确配置。

下面是两种可行的解决方式：

方式一：用Spy阻止真实方法执行 #

如果你只需要验证init方法的调用情况，不需要模拟返回值，可以在spyOn后追加.and.stub()（或者你提到的.and.callFake(() => {})，效果类似，但stub更简洁），这样就能阻止真实方法的执行，同时保留调用记录：

it('should create the app and initialize the user service', () => {
  // 用stub拦截真实方法，仅记录调用
  spyOn(injectedUserSvc, 'init').and.stub();
  fixture.detectChanges(); // 触发ngOnInit

  expect(app).toBeTruthy();
  expect(injectedUserSvc.init).toHaveBeenCalledOnceWith();
});

方式二：提前注入Mock服务 #

如果需要在多个测试用例中复用Mock，或者服务有多个方法需要模拟，更推荐在TestBed中直接替换真实服务为Mock对象，从根源避免真实服务被实例化：

describe('AppComponent', () => {
  let app: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  // 声明为SpyObj类型，方便后续断言
  let injectedUserSvc: jasmine.SpyObj<UserService>;

  beforeEach(() => {
    // 创建包含init方法的Mock服务
    const mockUserService = jasmine.createSpyObj('UserService', ['init']);

    TestBed.configureTestingModule({
      imports: [AppComponent, ToastrModule.forRoot()],
      providers: [
        provideHttpClient(), 
        provideHttpClientTesting(), 
        provideRouter([]),
        // 用Mock替换真实服务
        { provide: UserService, useValue: mockUserService }
      ],
    });

    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
    injectedUserSvc = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
  });

  it('should create the app and initialize the user service', () => {
    fixture.detectChanges();

    expect(app).toBeTruthy();
    expect(injectedUserSvc.init).toHaveBeenCalledOnceWith();
  });
});

两种方式的区别：

• 方式一适合快速验证单个方法调用，改动小；
• 方式二更适合复杂测试场景，Mock更彻底，避免重复Spy操作。

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