UIRouter 2+ Karma/Jasmine测试二级组件报Cannot read property 'fqn' of undefined

我刚踩过类似的UI Router ui-view测试坑，给你梳理下问题根源和可行的解决办法：

问题根源 #

从uiView.js的源码来看，二级ui-view组件的ngOnInit方法里直接依赖了注入的父级ui-view实例的fqn属性，但你的测试环境中只Mock了父级实例的存在，却没有提供fqn这个必填属性——这就是报错的核心原因。

解决方案 #

这里有几种靠谱的解决思路，你可以根据自己的测试场景选择：

1. 手动Mock父级ui-view的必要属性

直接给测试组件的父级依赖提供包含fqn属性的Mock对象：

import { YourSecondaryUiViewComponent } from './your-component';
import { UiViewComponent } from '@uirouter/angular';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourSecondaryUiViewComponent],
      providers: [
        // 模拟父级ui-view的核心属性
        { 
          provide: UiViewComponent, 
          useValue: { fqn: 'mock-parent-fqn' } 
        }
      ]
    }).compileComponents();
  });

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

2. 嵌套父级ui-view作为测试上下文

如果想更贴近真实场景，可以在测试模板里嵌套一个父级ui-view：

// 声明Mock的父级ui-view组件（或者直接使用真实的UiViewComponent）
@Component({ selector: 'ui-view', template: '<ng-content></ng-content>' })
class MockUiViewComponent {
  fqn = 'mock-parent-fqn';
}

describe('YourSecondaryUiViewComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourSecondaryUiViewComponent, MockUiViewComponent],
      // 用Mock组件替代真实的UiViewComponent
      providers: [{ provide: UiViewComponent, useClass: MockUiViewComponent }]
    }).compileComponents();
  });

  it('should create', () => {
    // 渲染嵌套的模板
    const fixture = TestBed.createComponent(YourSecondaryUiViewComponent, {
      template: `<ui-view><app-your-secondary-component></app-your-secondary-component></ui-view>`
    });
    fixture.detectChanges();
    expect(fixture.componentInstance).toBeTruthy();
  });
});

3. 使用UI Router官方测试模块

如果你的组件是通过UI Router路由加载的，直接导入UIRouterTestingModule能自动处理父级上下文：

import { UIRouterTestingModule } from '@uirouter/angular/testing';

describe('YourSecondaryUiViewComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourSecondaryUiViewComponent],
      imports: [UIRouterTestingModule] // 自动提供ui-view的测试上下文
    }).compileComponents();
  });

  it('should create', () => {
    const fixture = TestBed.createComponent(YourSecondaryUiViewComponent);
    fixture.detectChanges();
    expect(fixture.componentInstance).toBeTruthy();
  });
});

为啥之前的Mock失败？ #

你之前的Mock应该只创建了一个空对象或者不完整的父级实例，但ui-view的初始化逻辑硬依赖parent.fqn，所以必须确保这个属性存在——哪怕是个模拟的字符串值就行。

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