无法读取未定义的属性取消订阅：Angular2 测试答案

【问题标题】：Cannot read property unsubscribe of undefined: Angular2 testing无法读取未定义的属性取消订阅：Angular2 测试
【发布时间】：2016-10-28 17:15:44
【问题描述】：

我正在尝试测试具有 ngOnDestroy() 方法的组件，该方法具有所有 unsubscribe() 方法调用。但是，在测试时，当我运行我的测试文件（规范文件）时，它给了我错误提示：

cannot read property 'unsubscribe' of undefined

我在我的测试文件中做了以下导入：

import { Subscription }   from 'rxjs/Subscription';

所以我认为这应该足以获取 Subscription 中的所有方法，但仍然存在错误。另外，我尝试将“订阅”添加到测试文件的“导入”、“声明”和“提供者”列表中，但错误仍然存在。

下面是代码sn-p：

//component
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import {
 NinjaService } from '../../../../ninja.service';


 @Component({
 selector: 'ninja-files',
 templateUrl: './ninja-files.component.html',
 styleUrls: ['./ninja-files.component.css']
})
 export class ninjaFilesComponent implements OnInit, OnDestroy {

 showNinjaFiles: boolean = true;

 addFileSubscription: Subscription;

 constructor(private ninjaService: NinjaService) {
 ........
}

 ngOnInit() {
  this.addFileSubscription = this.NinjaService.AddedFile$
  .subscribe((fileFormat: FileFormat) => {
  console.log('File being added: ' + fileFormat.fileName); }

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

然后我有这个组件的测试文件如下：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import {
 NinjaService } from '../../../../ninja.service';
import { TestBed, async, fakeAsync ,ComponentFixture, } from '@angular/core/testing';
import { DebugElement }    from '@angular/core';
import { By }              from '@angular/platform-browser';
import {} from 'jasmine';

describe('Component: NinjaFiles', () => {

  let fixture: ComponentFixture<ninjaFilesComponent>;
  let component: ninjaFilesComponent;
  let ninjaServiceStub;

beforeEach( async(() => {
 //stub NinjaService
 let ninjaServiceStub= {};

 fixture = TestBed.configureTestingModule({
 declarations: [ ninjaFilesComponent],
}).createComponent(ninjaFilesComponent);
 component = fixture.componentInstance;

}));

it('Page Title', async(() => {
 let pageTitle = fixture.debugElement.query(By.css('.page-title'));
 expect(pageTitle).toBeTruthy();
}));

 it('Counting the files', () => {
  let fileCount= fixture.debugElement.query(By.css('.file-count'));
  expect(fileCount).toBeTruthy();
});

当我运行上面的测试代码时，它给了我一个错误，说“无法读取未定义的属性'unsubscribe'”（这意味着它无法定义我在组件类中定义的订阅对象'addFileSubscription' .

有人可以提出解决方法吗？

【问题讨论】：

尝试在末尾的beforeEach() 中或在开头的测试中调用fixture.detectChanges();。
已经试过了，没用！ :(
你能确认ngOnInit()被调用了吗？

标签： angular angular2-testing

【解决方案1】：

import { Subscription } from 'rxjs/Subscription';

这意味着您可以从ninjaFilesComponent 类文件中访问Subscription 类。

问题是addFileSubscription 从未初始化。为了调用ngOnInit，您需要调用

fixture.detectChanges();

除此之外，我看到的其他问题是：

您永远不会将存根添加到提供程序

TestBed.configureTestingModule({
  providers: [
    { provide: NinjaService, useValue: ninjaServiceStub }
  ]
})

你需要在存根中实际实现一些东西

let ninjaServiceStub = {
  AddedFile$: Observable.of(new FileFormat(...))
}

您没有正确使用组件中的服务

this.NinjaService.AddedFile$
// should be
this.ninjaService.AddedFile$
// lowercase

【讨论】：

感谢@peeskillet 的建议！还有一个问题，这里的“FileFormat”是一个接口，所以我不能在我的 ninjaServiceStub 中使用“AddedFile$: Observable.of(new FileFormat(...))”之类的东西。你对如何创建一个 observable.of 接口有什么建议吗？
你不需要使用这个类。无论接口的结构是什么，只要使用一个对象字面量，比如{ whatever: "properties", it: "has" }
read this 更好地了解 typescript 类型的工作原理

【解决方案2】：

在我的测试中添加 fixture.detectChanges(); 解决了我在使用带有 Material Design 的 Angular 2 CLI 运行测试时遇到的这个问题。

感谢您的解决方法！

【讨论】：