Karma测试中如何获取自定义组件实例的文本内容？

下面是几种可行的验证思路，根据你的组件实际实现选合适的：

• 直接查找组件内部的原生文本元素
  自定义组件本质是封装了原生DOM元素，你可以先定位到<cc-button>的DebugElement，再查询它内部负责显示文本的元素（比如内部的<button>、<span>或者带特定类名的元素）：

const ccButtonDe = fixture.debugElement.query(By.css('cc-button'));
// 假设组件内部用原生button显示文本，根据实际结构调整选择器
const innerTextElement = ccButtonDe.query(By.css('button'));
expect(innerTextElement.nativeElement.innerText.trim()).toBe('SUBMIT');

• 改用textContent获取文本
  innerText会受元素的可见性样式影响，而textContent直接读取元素的所有文本内容，试试这个：

const ccButtonEl = fixture.debugElement.query(By.css('cc-button')).nativeElement;
expect(ccButtonEl.textContent.trim()).toBe('SUBMIT');

• 等待组件异步渲染完成
  如果你的自定义组件内部有异步逻辑（比如依赖接口数据、ngIf/ngFor动态渲染），必须等待组件稳定后再获取内容：

it('should show SUBMIT on cc-button', async () => {
  fixture.detectChanges();
  await fixture.whenStable(); // 等待所有异步操作完成
  const ccButtonText = fixture.debugElement.query(By.css('cc-button')).nativeElement.textContent.trim();
  expect(ccButtonText).toBe('SUBMIT');
});

• 通过组件类定位（替代css选择器）
  如果css选择器定位有问题，直接用组件类来获取DebugElement：

import { CcButtonComponent } from './path-to-your-cc-button.component';

// ...

const ccButtonDe = fixture.debugElement.query(By.directive(CcButtonComponent));
expect(ccButtonDe.nativeElement.textContent.trim()).toBe('SUBMIT');

• 验证组件输入属性（如果文本是传入的）
  如果<cc-button>的文本是通过@Input传入的（比如<cc-button label="SUBMIT"></cc-button>），直接断言组件实例的属性即可：

const ccButtonComp = fixture.debugElement.query(By.css('cc-button')).componentInstance;
expect(ccButtonComp.label).toBe('SUBMIT');

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