javascript - 如何使用 jest 在 vuejs 中测试计算属性?
问题描述
我仍然是单元测试的新手,我想测试当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>
我试图通过覆盖计算属性来测试它:
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);
});
但它给了我这个错误:
[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 | });
我不确定我做错了什么,任何帮助将不胜感激
编辑:好的,所以我意识到我没有正确传递 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)
推荐阅读
- c - malloc和mmap的区别
- swift - Mapbox:在一个 MGLStyle 上同时显示多个 styleURL(使用 styleURL 创建图层)
- git - 强制拉取后无法添加文件
- android - 底部导航视图不会出现在模拟器中,仅出现在布局预览中
- r - 如何连接多行的长标签
- python - 如果不是 NAN,则用以前的值替换 Pandas 中的缺失值
- javascript - 无法通过 onClick 传递参数
- sql - SQL 代理作业创建错误:作业“XXX”已针对服务器“YYY”
- mysql - Mysql - 每小时总和时差和组
- r - 如何比较 R 中两个数据集的 POSIX 日期时间