Angular单元测试中如何获取子元素并检查其文本内容？

核心原因是你组件最外层的div受*ngIf="showTooltip"指令控制，默认情况下组件实例的showTooltip属性值应该是false，导致整个容器（包括内部的.label元素）根本没有被渲染到DOM中，所以所有查询方法都会返回null。

解决步骤如下：

1. 在测试中启用tooltip显示并触发变更检测
   在查询元素前，先将组件的showTooltip设为true，然后调用fixture.detectChanges()通知Angular更新视图：

   it('should have a label with max 255 chars', () => {
     // 开启tooltip显示
     component.showTooltip = true;
     // 触发变更检测，让Angular渲染视图
     fixture.detectChanges();
   
     // 现在可以正常获取label元素
     const labelElement = fixture.nativeElement.querySelector('.label');
     expect(labelElement).not.toBeNull();
     // 验证文本内容（trim去掉插值表达式的空格）
     expect(labelElement.textContent.trim()).toBe(component.label);
   });
   

2. 提前设置动态label内容（如果需要）
   如果你的label属性也是动态赋值的，要确保在触发变更检测前设置好：

   it('should have a label with max 255 chars', () => {
     // 设置测试用的label文本
     component.label = '这是测试标签内容';
     // 开启tooltip显示
     component.showTooltip = true;
     // 更新视图
     fixture.detectChanges();
   
     const labelElement = fixture.nativeElement.querySelector('.label');
     expect(labelElement.textContent.trim()).toBe('这是测试标签内容');
     // 验证长度不超过255
     expect(labelElement.textContent.trim().length).toBeLessThanOrEqual(255);
   });
   

3. 额外排查点（如果上述方法无效）

   • 检查containerClasses是否包含会隐藏元素的样式（比如display: none），如果有需要调整测试中的类配置
   • 确认测试代码是否在组件初始化后修改属性，比如如果beforeEach中已经调用过fixture.detectChanges()，需要在测试用例中再次调用以更新视图
   • 如果label内容是通过异步服务获取的，需要用fakeAsync+tick或者waitForAsync处理异步逻辑

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