Angular TypeError:无法读取属性'；订阅'；单元测试中未定义的

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

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();
  }

}

@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);
  }
}

选举结果解析程序服务：

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();
  }

}

@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);
  }
}

@Injectable（）
导出类SelectionResultsResolver实现解析{
构造函数（私有adminService:ElectionService）{}
解析（路由：ActivatedRouteSnapshot）：可观察{
let-electionRequest:electionRequest={id:+route.paramMap.get（'id'）}
返回此.adminService.getElectionResults（electionRequest）；
}
}

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

你知道我如何解决这个问题吗？我试着用谷歌搜索它，但找不到这个问题的正确答案

您将路由与

ActivatedRoute

一起使用，因此您应该将测试模块导入到应用程序中 试试这个：

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

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

你的错误来自于你的模拟没有返回一个可观察的结果。这是因为您在配置中使用了模拟。使用

RouterTestingModule

可以摆脱提供者 因此，请删除以下内容：

{ provide: ActivatedRoute, useValue: fakeActivatedRoute },

在将来的测试中，您必须重写路由的

数据部分。你不是自找的，但这是方法
代码：

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

试试这个：this.route.snapshot.data.subscribe（）@fatehamed确切位置在哪里？很抱歉问你。你的代码在没有运行单元测试的情况下工作正常吗？@AmitChigadani是的！