问题描述
失败:无法读取 null 的属性queryParams"在
Failed: Cannot read property 'queryParams' of nullat
我假设这是因为我在 ngOnInit() 中有以下内容:
I'm assuming it's because I have the following in ngOnInit():
ngOnInit() {
this.route.queryParams.subscribe(async params => {
this.userInfo = await JSON.parse(params['user_info']);
});
到目前为止,我已经尝试使用以下内容构建我的单元测试:
So far I've tried constructing my unit test with the following:
describe('AddItineraryPage', () => {
let component: AddItineraryPage;
let fixture: ComponentFixture<AddItineraryPage>;
let routeStub;
beforeEach(async(() => {
routeStub = null;
TestBed.configureTestingModule({
declarations: [ AddItineraryPage ],
imports: [IonicModule.forRoot(), FormsModule, ReactiveFormsModule, RouterTestingModule],
providers: [
{provide: ActivatedRoute, useValue: routeStub}
]
}).compileComponents();
fixture = TestBed.createComponent(AddItineraryPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
routeStub.queryParams = {
displayName: '',
dateOfBirth: '',
email: '',
photos: [],
location: '',
bio: '',
intDestination: [],
userId: ''};
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component).toBeTruthy();
});
});
});
推荐答案
因此,当 routeStub
对象上的 queryParams
属性被调用时,它为空.您将 routeStub
初始化为 null,所以这是有道理的.ngOnInit()
在你第一次调用 fixture.detectChanges()
时被调用,所以你需要在 routeStub
之前分配一些东西你打这个电话.
So when the property queryParams
is being called on the routeStub
object, it is null. You initialized the routeStub
to null, so it makes sense. ngOnInit()
gets called the first time you call fixture.detectChanges()
, so you need to assign something to the routeStub
before you make that call.
同样在您的代码中,您在 queryParams
上调用 subscribe()
,因此您需要为该属性分配一个类似 Observable 的对象.您可以通过使用 Observable.of()
来使用实际的 Observable
.
Also in your code, you call subscribe()
on the queryParams
, so you will need to assign an Observable-like object to the property. You can just use an actual Observable
by using Observable.of()
.
所以你的测试代码应该看起来更像
So your test code should look more like
beforeEach(async(() => {
routeStub = null;
...
fixture = TestBed.createComponent(AddItineraryPage);
component = fixture.componentInstance;
// remove fixture.detectChanges() as it calls ngOnInit()
}));
it('should create', () => {
routeStub = {
queryParams: of({
user_info: '{
"displayName": "UserName"
}'
// not sure why you are calling `JSON.parse()`
// but if you are doing that, then user_info should
// be a JSON string
})
};
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.userInfo.displayName).toBe('UserName');
});
});
这篇关于我将如何在规范测试中模拟 ngOnInit() 中的路由 queryParams的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!