[英]how can i test a computed property in vuejs using jest?
im still new with unit testing and i want to test if the a linked button is displayed when the isLinkPresent
computed property return the link of the image and is not empty of this component :我仍然是单元测试的新手,我想测试当
isLinkPresent
计算属性返回图像的链接并且该组件不为空时是否显示链接按钮:
<template lang="pug">
.merchandising_image_title
.image(:style="`background-image: url('${imageTitle.image}');`" )
.panel
.top
h2 {{imageTitle.top_title}}
.line
.center
h1 {{imageTitle.center_title}}
.bottom(v-if="isLinkPresent")
a.btn.round( target='_blank' :href='imageTitle.link') Notify Me By Email
</template>
<script>
export default {
name: 'MerchandisingImageTitle',
props: {
imageTitle: Object
},
computed:{
isLinkPresent(){
return this.imageTitle.link && this.imageTitle.link !== ''
}
}
}
</script>
i have tried to test it like this by overwriting the computed property :我试图通过覆盖计算属性来测试它:
it("renders linked button when image title has a link and is not empty", () => {
const wrapper = mount(ImageTitle, {
propsData: {
imageTitle: Object
},
computed: {
isLinkPresent() {
return this.imageTitle.link && this.imageTitle.link !== "";
}
}
});
expect(wrapper.find("a").isVisible()).toBe(true);
});
but it gave me this error:但它给了我这个错误:
[vue-test-utils]: find did not return a, cannot call isVisible() on empty Wrapper
13 | }
14 | });
> 15 | expect(wrapper.find("a").isVisible()).toBe(true);
| ^
16 | });
im not sure what am i doing wrong, any help would be appreciated我不确定我做错了什么,任何帮助将不胜感激
edit : okay so i realised i didnt pass the propsData correctly so i changed it to propsData: { imageTitle: { imageTitleData: { image: "", top_title: "", center_title: "", link: ""}}}
and do expect(wrapper.find(".bottom").exists()).toBe(true)
as that isVisible() is used mostly in v-show but still getting this error : ` renders linked button when image title has a link and is not empty编辑:好的,所以我意识到我没有正确传递 propsData 所以我将其更改为
propsData: { imageTitle: { imageTitleData: { image: "", top_title: "", center_title: "", link: ""}}}
并执行expect(wrapper.find(".bottom").exists()).toBe(true)
因为 isVisible() 主要在 v-show 中使用,但仍然出现此错误:` 当图像标题具有链接和不为空
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
20 | }
21 | });
> 22 | expect(wrapper.find(".bottom").exists()).toBe(true);
| ^
23 | });
24 |`
还可以选择直接在包装器提供的视图模型( vm
,参见Vue2 视图实例)上测试属性。
expect(wrapper.vm.isLinkPresent).toBe(true)
Well you would start first by mounting the component and passing the right props to cover your use case好吧,您首先要安装组件并传递正确的道具来覆盖您的用例
let wrapper = mount(MyComponent, {
propsData: {
imageTitle: {
link: 'https://google.com'
}
}
});
Then you'd check that the link is rendered as expected.然后,您将检查链接是否按预期呈现。 You could either use
exists
or findAll
and check the wrapper count.您可以使用
exists
或findAll
并检查包装器计数。
expect(wrapper.find('.bottom a').exists()).toBe(true)
or expect(wrapper.find('.bottom a').exists()).toBe(true)
或
expect(wrapper.findAll('.bottom a').length).toEqual(1)
PS: Personal opinion but imho imageTitle
should be named to something more intuitive like imageData
. PS:个人意见,但恕我直言
imageTitle
应该命名为更直观的名称,例如imageData
。 Also would be even greater to pass these as individual props.将这些作为单独的道具传递也会更大。 Eg
例如
<my-component link="" src="" top_title="" center_title=""
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.