Angular单元测试：如何测试ng-content内容渲染正确性？

针对你的expansion-panel组件（基于ng-content实现内容投影），正确的单元测试方式是创建测试宿主组件，通过它来包裹目标组件并传入测试内容，而非直接修改原生元素的innerHTML。具体实现步骤如下：

1. 定义测试宿主组件 #

在测试文件中创建一个临时的宿主组件，用来承载expansion-panel并传入需要测试的内容：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExpansionPanelComponent } from './expansion-panel.component';

// 测试宿主组件：模拟真实场景中使用expansion-panel的方式
@Component({
  template: `
    <expansion-panel>
      <span class="test-content">{{ testText }}</span>
    </expansion-panel>
  `
})
class TestHostComponent {
  testText = '验证内容投影'; // 可自定义测试内容
}

2. 编写测试用例 #

配置TestBed环境，声明目标组件和测试宿主组件，然后编写验证逻辑：

describe('ExpansionPanelComponent', () => {
  let fixture: ComponentFixture<TestHostComponent>;
  let hostElement: HTMLElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ExpansionPanelComponent, TestHostComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    hostElement = fixture.nativeElement;
    fixture.detectChanges(); // 触发Angular变更检测，完成内容渲染
  });

  it('应该正确渲染投影的内容', () => {
    const panelContent = hostElement.querySelector('.expansion-panel .test-content');
    expect(panelContent?.textContent).toContain('验证内容投影');
  });

  it('支持动态更新投影内容', () => {
    // 修改宿主组件的内容，触发变更检测
    fixture.componentInstance.testText = '动态更新后的内容';
    fixture.detectChanges();
    
    const panelContent = hostElement.querySelector('.expansion-panel .test-content');
    expect(panelContent?.textContent).toContain('动态更新后的内容');
  });
});

为什么不推荐直接修改innerHTML？ #

• 直接修改fixture.nativeElement.innerHTML绕开了Angular的变更检测机制，无法模拟真实的组件使用流程（内容投影是由Angular框架负责处理的）。
• 这种方式无法覆盖动态内容更新的测试场景，不符合Angular组件测试的最佳实践。

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