添加@ContentChildren(组件类型)后所有Angular单元测试初始化失败

我在一个全应用复用的组件中添加了@ContentChildren后，所有单元测试均在初始化阶段失败，报错信息如下：

An error was thrown in afterAll
Uncaught TypeError: Cannot read properties of undefined (reading 'ContextualMenuComponent')
TypeError: Cannot read properties of undefined (reading 'ContextualMenuComponent')
    at Module.ContextualMenuComponent

当前组件核心代码：

@Component({
  selector: 'app-table-wrapper',
  templateUrl: 'table-wrapper.component.html',
  styleUrls: ['table-wrapper.component.scss'],
})
export class TableWrapperComponent {
  @ContentChildren(ContextualMenuComponent, { descendants: true }) contextMenus: QueryList<ContextualMenuComponent>;
}

有意思的是，若将@ContentChildren(ContextualMenuComponent)改为@ContentChildren('templateRef')，单元测试可以通过，但无法获取组件实例引用。问题明显出在@ContentChildren使用组件类型的场景，求解决办法。

• 测试模块中显式引入目标组件
  单元测试的TestBed环境是完全孤立的，不会自动识别应用全局注册的组件。你需要在测试配置里把ContextualMenuComponent加入声明列表，或者导入它所属的模块：

  import { TestBed } from '@angular/core/testing';
  import { TableWrapperComponent } from './table-wrapper.component';
  import { ContextualMenuComponent } from '../path/to/contextual-menu.component';
  
  describe('TableWrapperComponent', () => {
    beforeEach(async () => {
      await TestBed.configureTestingModule({
        declarations: [TableWrapperComponent, ContextualMenuComponent],
        // 若ContextualMenuComponent属于某个共享模块，替换成导入该模块：
        // imports: [ContextualMenuModule]
      }).compileComponents();
    });
  
    // ... 测试用例
  });
  

• 排查并解除循环导入
  检查TableWrapperComponent和ContextualMenuComponent的导入关系，如果存在循环导入（比如A导入B，B又导入A），会导致组件类型在测试初始化时未被正确解析。解决方式：

  • 改用模块导入组件，而非直接导入组件类
  • 重构代码拆分依赖，解除循环引用

• 用forwardRef处理类型引用时机问题
  如果是组件定义顺序导致的类型未声明问题，可以用forwardRef包装组件类型，延迟引用解析：

  import { Component, ContentChildren, QueryList, forwardRef } from '@angular/core';
  import { ContextualMenuComponent } from '../path/to/contextual-menu.component';
  
  @Component({
    selector: 'app-table-wrapper',
    templateUrl: 'table-wrapper.component.html',
    styleUrls: ['table-wrapper.component.scss'],
  })
  export class TableWrapperComponent {
    @ContentChildren(forwardRef(() => ContextualMenuComponent), { descendants: true }) 
    contextMenus: QueryList<ContextualMenuComponent>;
  }
  

• 确认延迟加载模块的测试处理
  若ContextualMenuComponent属于延迟加载模块，测试时需要确保该模块被显式导入到TestBed中，或者单独声明组件类，避免因延迟加载导致组件未被初始化。

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