Angular 单元测试模拟 paramMap 获取

Question

我有代表列表中项目的组件，我使用 this.route.snapshot.paramMap.get('id') 获取该项目。我怎么嘲笑这个？我试过了

providers: [
                {
                    provide: ActivatedRoute,
                    useValue: { snapshot: { params: convertToParamMap({ id: '1' }) } }
                }
            ]

但这会导致

TypeError: Cannot read property 'get' of undefined

Answer 1

您正在提供

{ snapshot: { params: convertToParamMap({ id: '1' }) } 所以它 snapshot.params

当您尝试通过 this.route.snapshot.paramMap

访问它时

如您所见，您的 mock 中没有 paramMap。

您将对象提供为 "value" 并不意味着该对象将自动成为 ActivatedRoute 的实例。它正是您定义的 - 普通对象。没有运行时类型控制，所以这是允许的。

您可以简单地提供部分实现，例如

 useValue: { snapshot: { paramMap: {get:(id:number)=>{id:1}}}}

或者在你的组件中为这个属性创建 getter - 这将允许你 spy 在那个 getter 调用上，拦截它并 return所需值。

Angular 单元测试模拟 paramMap 获取

Angular unit-testing mock paramMap get

unit-testing

karma-runner

angular