使用Jasmine和Karma对Angular中的嵌套组件UI元素进行单元测试

my parentComponent html的伪代码：

<mat-tab-group class="mat-elevation-z4">
<mat-tab label="OneBox">
<host-configuration [hostTemplate]="shareNodes"> 
</host-configuration>
</mat-tab>
</mat-tab-group>

现在我想在父组件规范文件中测试子组件（主机配置）的这个特定UI表单元素

---

是否有办法做到这一点，如果是，请您帮助我了解如何做到这一点？

您是否可以尝试将

ChildComponent

添加到父级规范的

声明

数组中？然后子组件将实际在DOM中绘制。我已经在父规范的声明数组中添加了，但是如何访问子组件的表单控件？是否需要创建子组件的存根类？我在移动设备上，但请尝试“const child=fixture.debugElement.query（By.directive（ChildComponent））.componentInstance:”console.log（child.form）；每当我试图从父组件规范访问第二级（childComponent）时，它都返回null，我不确定，抱歉。

 @Input()
  set hostTemplate(value: HostTemplate) {
    this.loadedTemplate = value ?? new HostTemplate();

    this.templateNameConfigItem.formControl.setValue(value.TemplateName);
    this.vmStubNameConfigItem.formControl.setValue(value.VMStubName);
    this.virtualApplianceConfigItem.formControl.setValue(value.VirtualAppliance);

    this.cpuCountConfigItem.formControl.setValue(value.Sizing.cpu_count);
    this.numOfCoresPerSocketConfigItem.formControl.setValue(value.Sizing.num_cores_per_socket);
    this.ramInMBConfigItem.formControl.setValue(value.Sizing.ram_mb);

    if (value.VMs.length > 0) {
      this.hostNameConfigItem.formControl.setValue(value.VMs[0]?.ComputerName);
      this.ipAddressConfigItem.formControl.setValue(value.VMs[0]?.Ip);
      this.macAddressConfigItem.formControl.setValue(value.VMs[0]?.Mac);
    }
    this.diskConfigurationItems.length = 0;
    for (const d of value.Disks) {
      this.diskConfigurationItems.push(new DiskConfigurationItems(d));
    }
  }