Angular 17 Jasmine测试中出现Cannot access 'Component' before initialization循环依赖问题

你遇到的问题很典型：当单独运行ng test --include my-component.component.spec.ts时，抛出了以下错误：

An error was thrown in afterAll Uncaught ReferenceError: Cannot access
'MyComponentComponent' before initialization

而全局运行ng test或者启动应用时完全正常，这确实是组件和路由文件的循环依赖导致的——my-component.component.ts导入了my-routes.ts，而my-routes.ts又导入了MyComponentComponent，单独测试时的模块加载顺序触发了ES模块的初始化限制。

既然你不能修改组件和路由文件，这里有两种不需要改动这两个文件的解决方案：

方案1：通过动态导入调整加载顺序 #

把测试文件顶部的组件静态导入改为在beforeEach中动态导入，这样可以调整模块初始化的顺序，避开循环引用的冲突：

import {ComponentFixture, TestBed} from '@angular/core/testing';

// 移除顶部的MyComponentComponent静态导入

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

  beforeEach(async () => {
    // 动态导入组件，延迟初始化
    const { MyComponentComponent } = await import('./my-component.component');
    
    await TestBed.configureTestingModule({
      declarations: [MyComponentComponent],
      imports: [],
      providers: [],
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('El componente deberia estar creado correctamente', () => {
    expect(component).toBeTruthy();
  });
});

动态导入会让路由模块先完成初始化，再加载组件，从而解决"Cannot access before initialization"的错误。

方案2：Mock路由模块来切断循环依赖 #

我们可以在测试中替换掉真实的my-routes模块，用一个模拟的对象来代替，这样组件就不会再引用包含自身的路由文件了：

如果你的项目使用Jest，可以直接使用jest.mock：

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MyComponentComponent} from './my-component.component';

// Mock my-routes模块，提供一个无循环依赖的假路由对象
jest.mock('./my-routes', () => ({
  myRoutes: [{ path: '', component: class MockComponent {} }]
}));

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponentComponent],
      imports: [],
      providers: [],
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('El componente deberia estar creado correctamente', () => {
    expect(component).toBeTruthy();
  });
});

如果是Karma+Jasmine环境，可以通过手动覆盖模块导出的方式实现类似效果——用模拟对象替代真实的路由模块，切断循环链。

为什么全局测试没问题？ #

全局运行测试时，测试运行器会一次性加载所有测试文件，模块初始化的顺序会被自动调整，循环引用的两个模块会被正确初始化；而单独运行单个测试时，只有相关的几个文件被加载，初始化顺序刚好触发了ES模块的循环引用限制，导致了错误。

备注：内容来源于stack exchange，提问作者Darío Ojeda Jurado