如何统计void类型函数ngAfterViewInit()的调用次数？

这个问题的核心是你直接访问了指令原始的ngAfterViewInit方法——它本身只是一个普通函数（类型为() => void），并没有calls属性。这个属性是Jasmine spy对象特有的，专门用来跟踪方法的调用情况。要统计这个生命周期钩子的调用次数，你需要先给这个方法创建一个spy包装，再进行断言。

下面是具体的解决步骤和完整测试示例：

1. 先创建Spy跟踪方法调用 #

在测试的beforeEach或者测试用例内部，使用spyOn来包装指令的ngAfterViewInit方法：

// 保留原始方法的执行逻辑，同时跟踪调用
spyOn(myDirective, 'ngAfterViewInit').and.callThrough();

// 如果不需要执行原始逻辑，仅跟踪调用次数，可以用：
// spyOn(myDirective, 'ngAfterViewInit').and.stub();

2. 触发生命周期钩子 #

ngAfterViewInit是Angular的视图初始化钩子，需要通过变更检测来触发。一般调用fixture.detectChanges()就能触发首次的视图初始化；如果需要让它被调用多次，你需要做一些会触发视图更新的操作后再次调用变更检测。

3. 正确断言调用次数 #

现在你可以通过被spy包装后的方法来访问calls属性了：

expect(myDirective.ngAfterViewInit.calls.count()).toEqual(2);

完整测试代码示例 #

import { ComponentFixture, TestBed, By } from '@angular/core/testing';
import { Directive, Component } from '@angular/core';

// 你的指令
@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  ngAfterViewInit(): void {
    // 你的指令逻辑
  }
}

// 用于测试的宿主组件
@Component({
  template: '<div appMyDirective></div>'
})
class TestComponent {
  // 可以添加属性用于触发视图更新
  viewTrigger: boolean = false;
}

describe('MyDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let myDirective: MyDirective;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent, MyDirective]
    });

    fixture = TestBed.createComponent(TestComponent);
    // 获取指令实例
    myDirective = fixture.debugElement.query(By.directive(MyDirective)).injector.get(MyDirective);
    
    // 创建spy跟踪ngAfterViewInit
    spyOn(myDirective, 'ngAfterViewInit').and.callThrough();
  });

  it('should call ngAfterViewInit twice', () => {
    // 第一次变更检测，触发首次ngAfterViewInit
    fixture.detectChanges();

    // 修改组件属性，触发视图更新，进而再次调用ngAfterViewInit
    fixture.componentInstance.viewTrigger = true;
    fixture.detectChanges();

    // 断言调用次数
    expect(myDirective.ngAfterViewInit.calls.count()).toEqual(2);
  });
});

关键说明 #

• spyOn是Jasmine提供的工具，它会替换原始方法为一个spy对象，这个对象自带calls、mostRecent()等属性/方法来跟踪调用信息。
• 如果你直接访问原始的ngAfterViewInit，它只是一个普通的函数，自然没有calls属性，这就是你报错的原因。

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