如何为使用@ContentChildren的TabsContainer组件编写单元测试

我之前也遇到过类似的场景，核心问题是Angular测试环境不会自动帮你处理ng-content的内容投影，需要我们手动模拟子组件并正确配置测试模块。下面是两种可靠的解决方法，你可以根据自己的测试场景选择：

方法1：手动构造QueryList并赋值 #

这种方法适合不需要渲染真实模板，只想测试onTabChange逻辑的场景：

步骤1：创建匹配的模拟组件 #

首先要确保模拟组件的选择器和真实组件完全一致，并且包含onTabChange会用到的属性/方法：

import { Component, Input } from '@angular/core';
import { QueryList } from '@angular/core';

// 模拟TabsContentComponent，选择器必须和真实组件一致
@Component({
  selector: 'app-tabs-content', // 真实组件的选择器是这个就用这个
  template: ''
})
class MockTabsContentComponent {
  @Input() id: string;
  active = false;
  // 如果真实组件有activate/deactivate之类的方法，也可以在这里模拟
  activate = jasmine.createSpy('activate');
}

步骤2：配置测试模块并手动赋值QueryList #

在测试配置中声明模拟组件和目标组件，然后手动创建QueryList并赋值给组件实例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TabsContainerComponent } from './tabs-container.component';

describe('TabsContainerComponent', () => {
  let component: TabsContainerComponent;
  let fixture: ComponentFixture<TabsContainerComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(TabsContainerComponent);
    component = fixture.componentInstance;
  });

  it('should activate the correct tab when onTabChange is called', () => {
    // 1. 创建模拟的tab实例
    const tab1 = new MockTabsContentComponent();
    tab1.id = 'tab1';
    const tab2 = new MockTabsContentComponent();
    tab2.id = 'tab2';

    // 2. 构造QueryList并赋值给组件的tabContent属性
    component.tabContent = new QueryList<MockTabsContentComponent>();
    component.tabContent.reset([tab1, tab2]);
    // 如果组件依赖QueryList的变化通知，可以手动触发
    // component.tabContent.notifyOnChanges();

    // 3. 调用测试方法
    component.onTabChange('tab1');

    // 4. 断言结果
    expect(tab1.active).toBeTrue();
    expect(tab2.active).toBeFalse();
    expect(tab1.activate).toHaveBeenCalled();
  });
});

方法2：通过宿主组件渲染内容投影 #

如果需要测试组件的真实渲染逻辑（比如ng-content是否正确投影），可以创建一个测试宿主组件来嵌套TabsContainer和子组件：

it('should handle tab change with real content projection', () => {
  // 创建临时宿主组件，用来模拟真实使用场景
  @Component({
    template: `
      <app-tabs-container>
        <app-tabs-content id="tab1"></app-tabs-content>
        <app-tabs-content id="tab2"></app-tabs-content>
      </app-tabs-container>
    `
  })
  class TestHostComponent {}

  // 配置测试模块，加入宿主组件和模拟组件
  const hostFixture = TestBed.overrideComponent(TestHostComponent, {
    add: { declarations: [MockTabsContentComponent, TabsContainerComponent] }
  }).createComponent(TestHostComponent);
  
  // 触发变更检测，让Angular处理内容投影
  hostFixture.detectChanges();

  // 获取TabsContainer实例
  const tabsContainer = hostFixture.debugElement
    .query(By.directive(TabsContainerComponent))
    .componentInstance;

  // 调用测试方法
  tabsContainer.onTabChange('tab2');

  // 断言结果
  const tabContents = tabsContainer.tabContent.toArray();
  expect(tabContents[0].active).toBeFalse();
  expect(tabContents[1].active).toBeTrue();
});

常见坑点排查 #

1. 模拟组件选择器不匹配：一定要确保模拟组件的selector和真实组件完全一致，否则Angular无法识别并填充QueryList。
2. 忘记触发变更检测：使用宿主组件方法时，必须调用detectChanges()让Angular处理内容投影，否则tabContent会是空的。
3. QueryList未初始化：手动赋值时，要通过reset()方法初始化QueryList，而不是直接赋值数组。

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