Question

我对单元测试还很陌生，我想测试当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 | });

我不确定我在做什么错，请提供任何帮助

edit：好的，所以我意识到我没有正确地传递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 |`

Answer 1

首先，您需要安装组件并传递正确的道具来覆盖您的用例

let wrapper = mount(MyComponent, {
   propsData: {
     imageTitle: {
       link: 'https://google.com'
     }
   }
});

然后，您将检查链接是否按预期呈现。您可以使用exists或findAll并检查包装器计数。

expect(wrapper.find('.bottom a').exists()).toBe(true) 或

expect(wrapper.findAll('.bottom a').length).toEqual(1)

PS：个人见解，但恕我直言imageTitle应该命名为imageData之类的更直观的名称。将它们作为单独的道具传递也将更大。例如

<my-component link="" src="" top_title="" center_title=""

Answer 2

还可以选择直接在包装器提供的视图模型（vm，参见 Vue2 view instance）上测试属性。

expect(wrapper.vm.isLinkPresent).toBe(true)

我如何使用玩笑在vuejs中测试计算属性？

2 个答案: