Jasmine单元测试如何访问ng-template内的DOM元素？

ng-template是Angular的定义型模板容器，内部内容不会直接渲染到DOM树，只有当它被结构指令或者ngTemplateOutlet明确引用、且变更检测执行完成后，内部的DOM节点才会被插入到页面中。查询返回null基本都是渲染时机不对、模板语法错误、引用拼写错误这几类原因导致的。

• 查询元素前先执行变更检测
  这是最常见的问题：组件初始化完成后，Angular测试环境不会自动触发全量变更检测，ngTemplateOutlet还没来得及把模板内容渲染出来，这时候查询必然返回null。在查询逻辑前加一行变更检测调用即可：

  // 触发变更检测，等待模板渲染完成
  fixture.detectChanges();
  const testButton = fixture.debugElement.query(By.css('#testButton'));
  

  如果模板渲染依赖异步逻辑（比如异步数据返回、定时器控制显隐），需要搭配fakeAsync+tick()或者waitForAsync等异步测试工具，等异步任务执行完再做查询。
• 修复模板语法错误
  你贴的示例代码里ng-template的闭合标签写错了，错误的标签会导致Angular模板解析失败，ngTemplateOutlet无法正常渲染内容：

  <!-- 错误：结束标签缺少斜杠，写成了和开始标签一样的<ng-template> -->
  <ng-template #testTemplate>
    <button id="testButton" (click)="testMethod()"></button>
  <ng-template>
  
  <!-- 正确写法 -->
  <ng-template #testTemplate>
    <button id="testButton" (click)="testMethod()"></button>
  </ng-template>
  

• 检查模板引用名拼写
  确保[ngTemplateOutlet]绑定的属性名和ng-template上定义的#模板引用名完全一致，拼写错误、大小写错误都会导致模板无法被正确加载，内部节点自然不会出现在DOM中。
• 条件渲染场景先设置渲染条件
  如果你的ngTemplateOutlet外层包了*ngIf等条件控制逻辑，需要先在测试代码中把对应条件变量设为true，再触发变更检测后查询元素。

it('点击测试按钮应该调用testMethod', fakeAsync(() => {
  // 给组件的testMethod打桩，监听调用情况
  spyOn(component, 'testMethod');
  // 首次变更检测，完成组件初始化和模板渲染
  fixture.detectChanges();
  // 清空异步队列，等待所有渲染任务完成
  tick();
  // 查询目标按钮
  const testButton = fixture.debugElement.query(By.css('#testButton'));
  // 先断言按钮存在，避免后续操作报空指针
  expect(testButton).withContext('测试按钮应该被正常渲染').toBeTruthy();
  // 触发按钮点击事件
  testButton.triggerEventHandler('click', null);
  // 触发点击后的变更检测
  fixture.detectChanges();
  // 验证绑定方法被调用
  expect(component.testMethod).toHaveBeenCalledTimes(1);
}));

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