Angular Fixture.detectChanges（）未定义；角5单元测试

我试图在一个非常简单的组件上运行一个基本的单元测试

组件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { CmsService } from '../services/cms.service';

@Component({
  selector: 'app-balance',
  templateUrl: './balance.component.html',
  styleUrls: ['./balance.component.css']
})

export class BalanceComponent implements OnInit {
  data;
  balance;

  constructor(private router: Router, private service: CmsService) {
    this.data = this.service.getData();
    this.balance = this.data['balance'];
  }

  ngOnInit() {
  }
}

规范文件

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

import { BalanceComponent } from './balance.component';
import { RouterTestingModule } from '@angular/router/testing';
import { CmsService } from '../services/cms.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { HeaderComponent } from '../header/header.component';
import { FooterComponent } from '../footer/footer.component';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { MessagesComponent } from '../messages/messages.component';
import { KeysPipe } from '../../../paysign-angular-common/lib/src/pipes/keys.pipe';

fdescribe('BalanceComponent', () => {
  let component: BalanceComponent;
  let fixture: ComponentFixture<BalanceComponent>;
  let service: CmsService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BalanceComponent, HeaderComponent, FooterComponent, SidebarComponent, MessagesComponent, KeysPipe ],
      providers: [ CmsService ],
      imports: [ RouterTestingModule, HttpClientTestingModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BalanceComponent);
    component = fixture.componentInstance;
    service = TestBed.get(CmsService);
    spyOn(service, 'getData').and.returnValue({balance: 50.00});

  });

  // it('should make a call to getData on load', async(() => {

  // }));

  it('should create with a balance avaliable in the session', () => {
    fixture.detectChanges();
    sessionStorage.setItem('data', JSON.stringify({balance: 50.00}));
    spyOn(service, 'getData').and.callFake(() => {
      return sessionStorage.getItem('data');
    });
    component.data = service.getData();
    expect(component.balance).toEqual(50.00);
    expect(component).toBeTruthy();
    sessionStorage.clear();
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed，fakeAsync}；
从“./balance.component”导入{BalanceComponent}；
从“@angular/router/testing”导入{RouterTestingModule}；
从“../services/cms.service”导入{CmsService}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
从“../header/header.component”导入{HeaderComponent}；
从“../footer/footer.component”导入{FooterComponent}；
从“../sidebar/sidebar.component”导入{SidebarComponent}；
从“../messages/messages.component”导入{MessagesComponent}；
从“../../../paysign angular common/lib/src/pipes/keys.pipe”导入{KeysPipe}；
fdescribe（'BalanceComponent'，（）=>{
let分量：平衡分量；
let夹具：组件夹具；
let服务：CmsService；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[BalanceComponent、HeaderComponent、FooterComponent、SidebarComponent、MessagesComponent、KeyPipe]，
提供者：[CmsService]，
导入：[RouterTestingModule，HttpClientTestingModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（BalanceComponent）；
组件=fixture.componentInstance；
service=TestBed.get（CmsService）；
spyOn（服务，'getData'）。和.returnValue（{balance:50.00}）；
});
//它（'应该在加载时调用getData'，异步（（）=>{
// }));
它（'应该创建一个在会话中可用的余额'，（）=>{
fixture.detectChanges（）；
setItem（'data'，JSON.stringify（{balance:50.00}））；
spyOn（服务，'getData'）。和.callFake（（）=>{
return sessionStorage.getItem（'data'）；
});
component.data=service.getData（）；
预期（组成部分余额）。toEqual（50.00）；
expect（component.toBeTruthy（）；
sessionStorage.clear（）；
});
});

主要问题是当测试运行时，fixture是未定义的。堆栈跟踪是：

TypeError: Cannot read property 'detectChanges' of undefined
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/src/app/balance/balance.component.spec.ts:40:13)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone-testing.js:288:1)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone.js:138:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone-testing.js:509:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk-client/node_modules/zone.js/dist/zone-testing.js:524:1)
    at attempt (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4289:46)
    at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4217:20)
    at runNext (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4257:20)

TypeError:无法读取未定义的属性“detectChanges”
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk客户端/src/app/balance/balance.component.spec.ts:40:13）
在ZoneDelegate.webpackJsonp…/../../../../../zone.js/dist/zone.js.ZoneDelegate.invoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone.js:388:1）
在ProxyZoneSpec.webpackJsonp…/../../../../../zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone testing.js:288:1）
在ZoneDelegate.webpackJsonp…/../../../../../zone.js/dist/zone.js.ZoneDelegate.invoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone.js:387:1）
在Zone.webpackJsonp…/../../../../Zone.js/dist/Zone.js.Zone.run中(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone.js:138:1）
在runInTestZone(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone testing.js:509:1）
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/C:/Users/aaleksandrov/Documents/Paysign-Kiosk client/node_modules/zone.js/dist/zone testing.js:524:1）
企图(http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine core/jasmine.js？73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4289:46）
在ZoneQueueRunner.QueueRunner.run(http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine core/jasmine.js？73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4217:20）
在runNext(http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine core/jasmine.js？73bc53d3671677e6a093fc74e4f9bcde57e5f7ad:4257:20）

如果我将夹具创建移动到beforeach之外，则不会发生这种情况。我已经试着将它移动到异步块中，但是我已经没有主意了

---

编辑：进一步研究它会发现，测试床本身在其调用的任何地方都会给出一个引用错误

我用你的代码试着帮你调试，但我无法重现。我删除了与Fixture.detectChanges（）的使用无关的所有元素。这是我运行并成功的代码

从'@angular/core/testing'导入{async，ComponentFixture，TestBed，fakeAsync}；
从“./balance.component”导入{BalanceComponent}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
fdescribe（'BalanceComponent'，（）=>{
let分量：平衡分量；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[余额部分]，
导入：[RouterTestingModule，HttpClientTestingModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（BalanceComponent）；
组件=fixture.componentInstance；
});
//它（'应该在加载时调用getData'，异步（（）=>{
// }));
它（'应该创建一个在会话中可用的余额'，（）=>{
fixture.detectChanges（）；
expect（component.toBeTruthy（）；
});
});warn install

&所有的测试都运行得很好&结果证明这实际上是由于您提到的过时软件包造成的。