Angular测试：ngOnInit内Service方法未调用问题排查

问题场景 #

测试Angular组件时出现异常：ngOnInit已执行，但未触发SampleService.getAll()方法调用。测试用例执行失败，提示Expected 'A' to equal [ 1, 2, 3 ]；手动调用component.ngOnInit()后测试通过，且getAll()的调用次数验证（toHaveBeenCalledTimes(1)）也显示调用成功。

组件代码 #

import { Component } from '@angular/core';
import { SampleService } from './sample.service';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {
  todos: any;

  constructor(private service: SampleService){}

  ngOnInit(){
    this.todos = 'A';
    this.service.getAll().subscribe(
      res => {
        this.todos = res;
      }
    );
  }
}

测试代码 #

describe('SampleComponent', () => {
  let component: SampleComponent;
  let fixture: ComponentFixture<SampleComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ HttpClientModule ],
      declarations: [ SampleComponent ],
      providers: [ SampleService ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should load todos from the server', () => {
    let todos = [1,2,3];
    let service = TestBed.inject(SampleService);
    spyOn(service,'getAll').and.returnValue(of(todos));
    
    fixture.detectChanges();
    //component.ngOnInit();
    
    expect(component.todos).toEqual(todos);
  });
  
});

问题原因 #

核心矛盾在于间谍（spy）的创建时机晚于ngOnInit的执行时机：

• 在beforeEach流程中，调用fixture.detectChanges()时，Angular会触发组件的初始化生命周期钩子，包括ngOnInit。此时SampleService实例已创建，getAll()方法也已被调用，但间谍尚未创建，无法拦截这次调用。
• 进入测试用例it块后才创建spyOn(service,'getAll')，但此时ngOnInit已经执行完毕，新创建的间谍无法回溯拦截之前的方法调用。
• 手动调用component.ngOnInit()时，间谍已经存在，所以能正常拦截getAll()调用并返回预设值，测试因此通过。

解决方案 #

调整间谍创建时机，确保在组件初始化前完成间谍设置：

describe('SampleComponent', () => {
  let component: SampleComponent;
  let fixture: ComponentFixture<SampleComponent>;
  let service: SampleService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ HttpClientModule ],
      declarations: [ SampleComponent ],
      providers: [ SampleService ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    // 在触发组件初始化前，获取Service并创建间谍
    service = TestBed.inject(SampleService);
    spyOn(service,'getAll').and.returnValue(of([1,2,3]));
    
    fixture.detectChanges(); // 此时ngOnInit执行，会调用已被拦截的getAll()
  });

  it('should load todos from the server', () => {
    expect(component.todos).toEqual([1,2,3]);
    expect(service.getAll).toHaveBeenCalledTimes(1);
  });
  
});

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