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

Question

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

组件

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

主要问题是运行测试时，夹具未定义。堆栈跟踪为：

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)

如果我将夹具创建移到beforeEach之外，那不会发生。我曾尝试将其移入异步块，但我的想法已经用完了。

编辑：深入研究表明，TestBed本身在任何被调用的地方都给出了参考错误。

Answer 1

我使用您的代码来尝试帮助您进行调试，但是我无法复制。我删除了与Fixture.detectChanges（）无关的所有元素。这是我运行并成功的代码。

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

import { BalanceComponent } from './balance.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BalanceComponent ],
      imports: [ RouterTestingModule, HttpClientTestingModule ]
    })
    .compileComponents();
  }));

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

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

  // }));

  it('should create with a balance avaliable in the session', () => {
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

我的猜测是，您正在使用过时的Jasimne / Karma npm软件包，它们可能以不同的方式声明Fixture。您能发布您的package.json文件，以便我看看吗？