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

发布时间：2020-12-17 06:48:52 所属栏目：安全来源：网络整理

导读：我试图测试一个具有ngOnDestroy()方法的组件,该方法具有所有unsubscribe()方法调用.但是,在测试时,当我运行我的测试文件(spec文件)时,它给出了错误说： cannot read property 'unsubscribe' of undefined 我在我的测试文件中完成了以下导入： import { Subsc

我试图测试一个具有ngOnDestroy()方法的组件,该方法具有所有unsubscribe()方法调用.但是,在测试时,当我运行我的测试文件(spec文件)时,它给出了错误说：

cannot read property 'unsubscribe' of undefined

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

import { Subscription }   from 'rxjs/Subscription';

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

以下是代码段：

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

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

有人可以建议一个解决方法吗？

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!