Angular 5中Jasmine测试无法覆盖ngOnInit()的问题排查

哈哈，这种新手小失误真的太常见了！我刚学Angular测试的时候也踩过一模一样的坑😅

核心问题原因 #

你一开始看到ngOnInit()未被覆盖，根本不是因为当前测试代码的写法问题，而是你在其他测试用例中使用了fdescribe。Jasmine里的fdescribe（以及fit）是「焦点测试」语法——一旦用了它，Jasmine只会执行被fdescribe包裹的测试代码，其他所有测试都会被直接跳过。你的这个组件测试根本没被执行，自然ngOnInit()从来没跑过，覆盖率报告肯定显示未覆盖了。

顺便优化你的测试代码（避免后续踩坑） #

虽然你已经找到根源，但你的测试代码还有几个可以修正的地方，帮你调整得更规范：

• 不要手动new组件实例：应该用TestBed创建的实例，这样依赖的ServerBindingService才会被正确注入，测试更贴近真实运行环境
• 无需手动调用ngOnInit()：调用fixture.detectChanges()时，Angular会自动触发组件的初始化生命周期（包括ngOnInit）
• 修正变量拼写错误：你组件里的变量是isNetworkCallFinished，测试里写成了isNetworkCallFinsihed（少了个h）

调整后的规范spec代码：

import { of } from 'rxjs';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginPageHeaderComponent } from './login-page-header.component';
import { ServerBindingService } from '../server-binding.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';

describe('LoginPageHeaderComponent', () => {
  let component: LoginPageHeaderComponent;
  let fixture: ComponentFixture<LoginPageHeaderComponent>;
  let serverBindingService: jasmine.SpyObj<ServerBindingService>;

  beforeEach(async(() => {
    // 创建服务的Spy对象，避免依赖真实服务的实现逻辑
    const serviceSpy = jasmine.createSpyObj('ServerBindingService', [], {
      leftHeaderLinks$: of([]),
      rightHeaderLinks$: of([]),
      isNetworkCallFinished$: of(true)
    });

    await TestBed.configureTestingModule({
      declarations: [LoginPageHeaderComponent],
      providers: [{ provide: ServerBindingService, useValue: serviceSpy }],
      imports: [HttpClientTestingModule]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginPageHeaderComponent);
    component = fixture.componentInstance;
    serverBindingService = TestBed.inject(ServerBindingService) as jasmine.SpyObj<ServerBindingService>;
  });

  it('should initialize observables from ServerBindingService on ngOnInit', () => {
    fixture.detectChanges(); // 自动触发ngOnInit

    expect(component.allLeftHeaderOptions$).toBe(serverBindingService.leftHeaderLinks$);
    expect(component.allRightHeaderOptions$).toBe(serverBindingService.rightHeaderLinks$);
    expect(component.isNetworkCallFinished).toBe(serverBindingService.isNetworkCallFinished$);
  });
});

小提醒 #

调试测试时用fdescribe/fit确实很方便，但调试完成后一定要记得改回普通的describe/it，不然会导致大量测试被跳过，不仅覆盖率统计不准，还可能漏掉潜在的bug。

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