导入特定库模块时Angular Jest测试无法编译问题排查

问题场景 #

我需要为Angular组件编写测试，使用Jest作为测试框架。待测试组件的模板中使用了第三方库的UI组件，示例代码如下：

<!-- my.component.html -->
<mylib-tab-group>
    <mylib-tab>
        <h1>Hello</h1>
    </mylib-tab>
</mylib-tab-group>

为定位问题，我编写了仅初始化TestBed并导入对应库模块的最简测试代码：

import { TestBed } from "@angular/core/testing"
import { MyLibTabsModule } from "MyLib"

describe('LoginProcedure-Feature', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        MyLibTabsModule,
      ],
      declarations: [],
      providers: [],
    }).compileComponents()
  })

  it('placeholder', () => {
    expect(true).toBeTruthy()
  })
})

运行测试时命令行报错：

ReferenceError: Cannot access 'MyLibTabGroupComponent' before initialization

      1 | import { TestBed } from "@angular/core/testing"
    > 2 | import { MyLibTabsModule } from "MyLib"
        | ^
      3 |

查看堆栈跟踪，问题出在编译后的MyLibTabsModule模块代码中：

MyLibTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ 
  minVersion: "12.0.0", 
  version: "15.2.0", 
  ngImport: i0, 
  type: MyLibTabComponent, 
  deps: [{ token: MyLibTabGroupComponent }, { token: i0.ChangeDetectorRef }], 
  target: i0.ɵɵFactoryTarget.Component 
});

由于无法修改该库代码，请问此问题的原因是什么？

原因分析 #

这个报错是第三方库内部循环依赖+Jest模块解析机制差异共同导致的：

• 第三方库的MyLibTabComponent在工厂函数声明中，将MyLibTabGroupComponent作为依赖注入令牌，但两个组件的初始化顺序不符合预期——MyLibTabComponent的代码先被执行，此时MyLibTabGroupComponent还未完成初始化，因此触发了"Cannot access before initialization"的引用错误。
• Angular官方编译工具（如ngc）在处理这类内部组件依赖时，会调整输出代码的执行顺序来规避此类问题，但Jest基于Node.js的模块加载机制，其解析顺序和Angular编译后的代码预期不匹配，最终暴露了这个隐藏的循环依赖问题。

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