Karma-Jasmine测试Angular组件报错:Cannot read properties of undefined (reading 'get')
报错根因
- 业务代码中读取路由参数使用的是
this.route.snapshot.queryParamMap.get('id'),但单元测试里 mock 的ActivatedRoute对象的snapshot属性下仅配置了paramMap(对应路由配置里的路径参数),缺失业务代码实际用到的queryParamMap(对应URL中?拼接的查询参数),导致queryParamMap为undefined,调用get()方法时触发空指针错误。
修复方案
- 调整单元测试中
activatedRouteSpy的结构,补充queryParamMap配置,和业务代码实际使用的属性对齐:
activatedRouteSpy = { snapshot: { // 补充业务代码用到的queryParamMap queryParamMap: convertToParamMap({ id: 'dads123', code: 'IBM', }), // 若其他逻辑用到路径参数可保留paramMap,否则可删除 paramMap: convertToParamMap({ id: 'dads123', code: 'IBM', }) }, // 若后续测试覆盖viewInventory方法的相对路由导航,需补充parent属性避免导航报错 parent: { snapshot: { queryParamMap: convertToParamMap({}) } } };
- 可选优化项(避免后续出现其他测试报错):
- 测试中
fixture.detectChanges()默认会触发组件的ngOnInit生命周期,重复调用component.ngOnInit()属于冗余执行,可删除。 - 建议mock
SomeService的getResourceOverview方法,避免真实服务请求导致的测试不稳定,示例如下:
// 定义Mock类 class MockSomeService { getResourceOverview = jasmine.createSpy('getResourceOverview').and.returnValue(of({})); } // 在TestBed的providers中替换原有SomeService配置 providers: [ // 其他provider配置不变 { provide: SomeService, useClass: MockSomeService } ]
内容的提问来源于stack exchange,提问作者Amir
相关产品推荐
相关产品推荐

