TypeError：无法读取单元测试中未定义的属性“订阅”答案

【问题标题】：TypeError: Cannot read property 'subscribe' of undefined in unit testTypeError：无法读取单元测试中未定义的属性“订阅”
【发布时间】：2018-11-11 15:10:17
【问题描述】：

我正在尝试修复组件的“应该创建”单元测试。我得到以下信息：

TypeError: Cannot read property 'subscribe' of undefined
    at ElectionResultsChartsComponent.webpackJsonp../src/app/pages/user/election-results/election-results-charts/election-results-charts.component.ts.ElectionResultsChartsComponent.initElectionResultsData (http://localhost:9876/_karma_webpack_/webpack:/src/app/pages/user/election-results/election-results-charts/election-results-charts.component.ts:28:36)
    at new ElectionResultsChartsComponent (http://localhost:9876/_karma_webpack_/webpack:/src/app/pages/user/election-results/election-results-charts/election-results-charts.component.ts:24:10)
    at createClass (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:12481:1)
    at createDirectiveInstance (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:12326:22)
    at createViewNodes (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:13784:38)
    at createRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:13673:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:15098:26)
    at Object.debugCreateRootView [as createRootView] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:14381:1)
    at ComponentFactory_.webpackJsonp../node_modules/@angular/core/esm5/core.js.ComponentFactory_.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/core.js:11278:26)
    at initComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/esm5/testing.js:1150:1)

选举结果图表.component.spec：

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

  const fakeActivatedRoute = {
    snapshot: { data: {} }
}

let mockSomeService = {
  getData: () => {}
}
const mockResultResolver = {
  initElectionResultsData: () => new EmptyObservable()
};

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ChartsModule
      ],
      declarations: [ ElectionResultsChartsComponent ],
      providers: [
        { provide: ActivatedRoute, useValue: fakeActivatedRoute }, 
        { provide: ElectionResultsResolver, useValue: mockResultResolver },
      ]
    })
    .compileComponents();
  }));

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

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

选举结果图表组件：

export class ElectionResultsChartsComponent implements OnDestroy {

  private pieChartLabels:string[] = [];
  private pieChartData:number[] = [];
  private pieChartType:string = 'pie';

  private parties: Party[] = [];

  private subData: any;

  constructor(private route: ActivatedRoute) { 
    this.initElectionResultsData();
  }

  initElectionResultsData() {
    this.subData = this.route.data.subscribe(({ data }) => {
      let electionResultResponse: ElectionResultResponse = data;
      for(let party of electionResultResponse.parties) {
        this.pieChartLabels.push(party.name);
        this.pieChartData.push(party.voteCount)
      }
    });   
  }

  ngOnDestroy() {
    this.subData.unsubscribe();
  }

}

election-results-resolver.service：

@Injectable()
export class ElectionResultsResolver implements Resolve<any> {

  constructor(private adminService: ElectionService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    let electionRequest: ElectionRequest = {id: +route.paramMap.get('id')}
    return this.adminService.getElectionResults(electionRequest);
  }
}

该组件在页面加载之前使用路由解析器。解析器获取数据，组件将数据推送到数组中。

知道如何解决这个问题吗？我已经尝试谷歌它，但找不到这个问题的正确答案。

【问题讨论】：

试试这个：this.route.snapshot.data.subscribe()
@FatehMohamed 到底在哪里？抱歉问了。
您的代码在不运行单元测试的情况下是否可以正常工作？
@AmitChigadani 是的！

标签： angular unit-testing typescript karma-runner karma-jasmine

【解决方案1】：

您将路由与ActivatedRoute 一起使用，因此您应该将测试模块导入您的应用程序。

试试这个：

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
      imports: [
        ChartsModule, RouterTestingModule
      ],
....

您的错误来自于您的模拟没有返回 Observable。这是因为您在配置中使用了模拟。使用RouterTestingModule 可以让您摆脱提供者。

所以删除这个：

{ provide: ActivatedRoute, useValue: fakeActivatedRoute },

在您以后的测试中，您将不得不重写路由的data 部分。你没有要求它，但这里是如何。

代码：

Object.defineProperty(component.route, 'data', {
  writable: true,
   value: Observable.of({/* everything your data will return must be mocked here */});
});

【讨论】：