小编Oum*_*umy的帖子

我如何使用 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>
Run Code Online (Sandbox Code Playgroud)

我尝试通过覆盖计算属性来测试它:

    it("renders linked button when image title has a link and is not empty", () => {
  const wrapper = mount(ImageTitle, {
    propsData: {
      imageTitle: Object
    },
    computed: {
      isLinkPresent() { …
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing vue.js jestjs

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

javascript ×1

jestjs ×1

unit-testing ×1

vue.js ×1