Angular 17中Mock子组件后ViewChild引用为何始终为undefined？

问题原因 #

你在测试中用MockChildComponent替换了原ChildComponent，但AppComponent里的@ViewChild(ChildComponent)是按组件类查询实例的。由于MockChildComponent和ChildComponent是完全独立的类，Angular无法将Mock实例与原类的查询条件匹配，导致child始终为undefined。

解决方案 #

方法一：让Mock组件继承原ChildComponent #

修改测试中的Mock组件，使其继承原ChildComponent，保持类型匹配，@ViewChild就能正确找到实例：

// app.component.spec.ts 中的Mock组件
@Component({
  selector: 'child',
  template: `Mocked child`,
  standalone: true,
})
class MockChildComponent extends ChildComponent {} // 新增继承关系

无需修改AppComponent的代码，保持原@ViewChild(ChildComponent)不变，重新运行测试即可获取到Mock组件实例。

方法二：改用模板引用变量查询ViewChild #

如果不想让Mock组件继承原类，可以修改AppComponent，改用模板引用变量查询：

// app.component.ts
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: '<child #childRef></child>' // 新增模板引用变量
})
export class AppComponent implements AfterViewInit {
  @ViewChild('childRef') child!: ChildComponent; // 改用引用变量查询

  ngAfterViewInit(): void {
    console.log(this.child);
  }
}

这种方式按模板引用名称查询，只要模板里的#childRef存在，就能获取到对应组件实例，不受组件类变化影响。

验证修改 #

修改后重新运行测试：

• should have the rendered mocked child element 依然通过
• should have the mocked child component 会成功获取到Mock组件实例，测试通过

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