Angular单元测试：如何测试@Input为undefined的else分支？

针对你遇到的无法测试else分支的问题，有两种直接的解决方式：

方式一：拆分测试用例，分别初始化不同的输入值 #

直接创建两个独立的测试用例，在组件初始化阶段传入不同的data值，分别覆盖if和else分支：

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  });

  // 测试data有值的分支
  it('should call fn1 when data is provided', () => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 传入测试数据
    component.data = { test: 'value' };
    spyOn(component, 'fn1');
    component.ngOnInit();
    expect(component.fn1).toHaveBeenCalled();
  });

  // 测试data为undefined的分支
  it('should call fn2 when data is undefined', () => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 不设置data，保持默认undefined
    spyOn(component, 'fn2');
    component.ngOnInit();
    expect(component.fn2).toHaveBeenCalled();
  });
});

方式二：在同一测试用例中修改输入并重新触发ngOnInit #

如果需要在单个测试用例中先后测试两个分支，可以修改组件的data属性后，手动调用ngOnInit()方法：

it('should call fn1 with data, then fn2 when data is cleared', () => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  
  // 先测试if分支
  component.data = { test: 'value' };
  spyOn(component, 'fn1');
  component.ngOnInit();
  expect(component.fn1).toHaveBeenCalled();

  // 再测试else分支
  component.data = undefined;
  spyOn(component, 'fn2');
  component.ngOnInit();
  expect(component.fn2).toHaveBeenCalled();
});

关键说明 #

• Angular组件的ngOnInit默认只在组件初始化时执行一次，所以修改@Input属性后，必须手动调用ngOnInit才能重新触发分支判断
• 使用spyOn可以轻松验证目标方法是否被调用，无需关注方法内部实现

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