[英]Getting Cannot read property 'on' of undefined in Unit Testing in Angular using Karma Jasmine
[英]Cannot read property of undefined 'ngOnInit' 'getData'-Angular-Unit testing-jasmine
我正在嘗試為訂閱服務層方法的組件文件編寫單元測試
Homecomponent.ts
import { Data } from './../model/data.model';
import { DataService } from './../services/data.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
data: Data[];
constructor(private service: DataService) {}
ngOnInit() {
this.getData();
}
getData() {
this.service.getData().subscribe(
(data) => {
console.log(data);
this.data = data;
},
(err) => {
console.log(err);
},
);
}
}
HomeComponent.spec.ts
import { Data } from './../model/data.model';
import { HttpClientModule } from '@angular/common/http';
import { HomeComponent } from './home.component';
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { DataService } from '../services/data.service';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { results } from '../model/home';
class MockMyService {
public data: Data[];
public getData(): Observable<Data[]> {
this.data = results;
return Observable.of(this.data);
}
}
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
let mockSomeService: MockMyService;
describe('Async', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HomeComponent],
providers: [
{
provide: DataService,
useValue: mockSomeService,
},
],
imports: [HttpClientModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
});
TestBed.compileComponents();
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
mockSomeService = fixture.debugElement.injector.get(DataService);
spyOn(mockSomeService, 'getData').and.returnValue(Observable.of(results));
component.ngOnInit();
fixture.detectChanges();
}));
});
// afterEach(() => {
// fixture = undefined;
// });
it('method should be called', async () => {
component.ngOnInit();
mockSomeService.getData();
expect(fixture.debugElement.componentInstance.data.length).toEqual(2);
});
});
如果我使用 component.ngOnInit(); 它給出了錯誤
TypeError: Cannot read property 'ngOnInit' of undefined
如果我不使用 component.ngOnInit() 它會給我錯誤
TypeError: Cannot read property 'getData' of undefined
我怎樣才能克服這個問題? 提前致謝。
你很近,但不完全在那里!
此外,看起來您可能正在使用舊版本的 angular,因為您的 RXJS 版本在版本 6 之前,因為您的代碼使用的是 Observable.of() 而不是新的語法,它只是 of()。 或許可以考慮升級!
希望這個解釋有幫助! :)
固定測試代碼如下:
class MockMyService {
public data: Data[];
public getData(): Observable<Data[]> {
this.data = results;
return Observable.of(this.data);
}
}
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
let dataService: DataService;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [HomeComponent],
providers: [
{
provide: DataService,
useClass: MockMyService
}
],
imports: [HttpClientModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
dataService = TestBed.get(DataService);
fixture.detectChanges();
});
describe('Given the component is loaded', () => {
describe('When getData returns mock data', () => {
it('Then the data attribute has a length of 2', (done) => {
dataService.getData().subscribe(() => {
expect(component.data.length).toEqual(2);
done();
});
});
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.