Angular单元测试报错：Cannot read property 'subscribe' of undefined 求助

问题根源 #

你遇到的TypeError: Cannot read property 'subscribe' of undefined错误，核心原因是测试中模拟的ActivatedRoute不符合组件的预期：
组件里订阅的是this.route.data，这是一个Observable，但你定义的fakeActivatedRoute里的data只是一个空对象，不是Observable类型，所以调用.subscribe()时就会报错。另外，你不需要在测试模块里提供ElectionResultsResolver，因为组件本身不直接依赖这个解析器——它只依赖ActivatedRoute传递过来的数据。

修复步骤与代码示例 #

下面是修改后的测试代码，我会标注关键改动点：

import { of } from 'rxjs';
// 记得导入你需要的类型，比如Party、ElectionResultResponse
describe('ElectionResultsChartsComponent', () => {
  let component: ElectionResultsChartsComponent;
  let fixture: ComponentFixture<ElectionResultsChartsComponent>;

  // 1. 模拟符合预期的ActivatedRoute：data是返回假数据的Observable
  const fakeActivatedRoute = {
    data: of({
      data: {
        parties: [
          { name: 'Party A', voteCount: 100 },
          { name: 'Party B', voteCount: 200 }
        ] as Party[]
      } as ElectionResultResponse
    })
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ChartsModule],
      declarations: [ElectionResultsChartsComponent],
      providers: [
        { provide: ActivatedRoute, useValue: fakeActivatedRoute }
        // 2. 移除ElectionResultsResolver的provider，组件不直接依赖它
      ]
    }).compileComponents();
  }));

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

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

关键改动说明 #

• 修正ActivatedRoute的data属性：用rxjs的of()方法把假的ElectionResultResponse数据包装成Observable，这样组件里的this.route.data.subscribe()就能正常调用了。
• 移除不必要的Resolver依赖：组件的数据源是ActivatedRoute的data，而解析器是路由层面的逻辑，单元测试组件时只需要模拟路由传递的数据即可，不需要引入Resolver。
• 提供完整的假数据：模拟了两个政党的投票数据，确保组件的initElectionResultsData方法能正常处理数据，避免后续可能出现的其他错误。

另外，你还可以考虑在测试后添加一个销毁组件的测试，验证ngOnDestroy里的unsubscribe()是否正常执行，不过这是额外的优化点，当前问题的核心已经解决。

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