Angular单元测试spyOn找不到监听对象 无法监听子组件nuevaTarea方法求助

核心报错原因 #

could not find an object to spy upon for nuevaTarea() 报错的本质是你执行spyOn时，父组件中@ViewChild绑定的ListaTareasContenidoComponent子组件实例为undefined，没有找到要监听的目标对象。

具体问题点和修复步骤 #

1. 修正测试模块配置 #

你当前把子组件错误放到了providers数组中，Angular中所有非standalone组件都需要放到declarations数组才会被正确编译渲染，同时要给子组件依赖的服务添加mock避免注入失败：

await TestBed.configureTestingModule({
  declarations: [
    ListaTareasComponent,
    ListaTareasContenidoComponent // 子组件移到declarations数组
  ],
  providers: [
    // 模拟子组件依赖的TareasService
    {
      provide: TareasService,
      useValue: { getTareas: () => of({ data: [] }) }
    },
    // 模拟子组件依赖的Router
    {
      provide: Router,
      useValue: jasmine.createSpyObj('Router', ['navigate'])
    }
  ]
}).compileComponents();

同时要确认父组件模板中已经写入了子组件的对应选择器标签（例如<app-lista-tareas-contenido></app-lista-tareas-contenido>），否则@ViewChild无法查询到子组件实例。

2. 确保子组件实例已初始化 #

@ViewChild绑定的实例会在第一次变更检测完成后才赋值，如果你的子组件是通过*ngIf条件渲染的，需要先把对应的条件值设为true再触发变更检测，测试用例修正如下：

it('should call to anadirTarea', () => {
  // 若子组件有*ngIf="crear"的渲染条件，先打开条件再触发变更检测
  // component.crear = true;
  fixture.detectChanges();

  // 先校验子组件实例存在，再执行spy
  expect(component.ListaTareasContenidoComponent).toBeTruthy();
  const nuevaTareaSpy = spyOn(component.ListaTareasContenidoComponent, 'nuevaTarea').and.callThrough();

  const mockTarea = {} as ITareas; // 补充符合ITareas类型的模拟数据
  component.anadirTarea(mockTarea);

  expect(nuevaTareaSpy).toHaveBeenCalledOnceWith(mockTarea);
});

内容的提问来源于stack exchange，提问作者Ivan Martin Blanco