Angular单元测试获取子组件实例返回父实例的解决方法

你的app-source-roll-history-form组件写在<ng-template>标签内部，这类模板内容默认不会被渲染到视图中，只有当模板被主动实例化、插入DOM后，Angular才会创建对应的子组件实例。
你当前查询时，模板还未完成渲染，CSS选择器匹配到的只是未绑定组件实例的空宿主标签，此时访问componentInstance属性会拿到当前视图上下文对应的父组件实例，和标签名匹配的预期不符。

• 先触发模板渲染逻辑
  从你模板里的(cancel)="newAssignmentForm = false"逻辑可以判断，父组件是通过newAssignmentForm变量控制该ng-template的显示（一般是搭配*ngTemplateOutlet或者弹窗内容渲染逻辑使用）。查询子组件前，先把该变量设为true，再执行变更检测让视图更新：

  component.newAssignmentForm = true;
  fixture.detectChanges(); // 必须调用，否则视图不会刷新
  

• 用组件指令选择器替代CSS选择器查询
  直接通过CSS标签选择器容易匹配到未实例化的空节点，改用By.directive传入子组件类查询，能精准定位到已经完成实例化的子组件节点：

  // 先引入子组件类，替换成你项目里的实际路径
  import { SourceRollHistoryFormComponent } from './source-roll-history-form.component';
  
  // 查询已实例化的子组件
  const formDebugElement = fixture.debugElement.query(By.directive(SourceRollHistoryFormComponent));
  const formInstance = formDebugElement.componentInstance as SourceRollHistoryFormComponent;
  

• 验证cancel事件逻辑
  拿到子组件实例后，直接触发cancel事件发射器，再断言父组件状态即可：

  formInstance.cancel.emit();
  fixture.detectChanges();
  expect(component.newAssignmentForm).toBe(false);
  

• 如果该ng-template是通过MatDialog等弹窗服务渲染在全局overlay层，不是嵌在当前组件宿主内部，直接在当前fixture下查询不到内容，需要先获取弹窗容器的引用，再在弹窗容器内查询子组件。
• 所有修改组件属性、触发事件的操作之后，都需要调用fixture.detectChanges()才能让视图同步更新，否则查询到的始终是旧DOM节点。

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