Question

我有一个带有按钮的组件，该按钮仅在article.link道具不为空时显示。我想编写一个测试来检查article.link不为空时按钮是否呈现，而另一个为{空时为空我的组件看起来像这样：

a.btn.plutus_btn-primary.round( v-if="hasArticleLink" target='_blank' :href="articleLink") Start Shopping Now

hasArticleLink是一个计算属性，当链接不为空时返回true。
我编写的单元测试如下：

    it("should not renders the link button when article doesn't have a link", () => {
    wrapper = mount(MerchandisingArticle, {
      propsData: {
        article: {
          link: ""
        }
      }
    });
    expect(wrapper.find("a").exists()).toBe(false);
  });
  it("renders the linked button when article has link", () => {
    wrapper = mount(MerchandisingArticle, {
      propsData: {
        article: {
          link: "https://google.com"
        }
      }
    });
    expect(wrapper.find("a").exists()).toBe(true);
  });

效果很好，但是我想知道是否有更好的方法来测试这些反向情况，因为我认为这是重复的，因为我必须在每个it组中安装该组件？任何帮助表示赞赏！

Answer 1

我认为在每次测试之前安装组件是件好事，因为这样一来，新测试不会对以前的测试产生任何副作用。
但是您可以执行以下操作以不重复代码：

const expectedValues = [
        { link: '', expects: false },
        { link: 'www.google.com', expects: true },
         ....
    ]

    expectedValues.forEach(({ link, expects }) => {
        it(`should evaluate ${expects} for link:${link} `, () => {
            const wrapper = mount(MerchandisingArticle, {
                propsData: {
                    article: {
                       link
                    }
                }
            })

            expect(wrapper.find("a").exists()).to.equal(expects);
        })
    })

这样，您还可以轻松添加新的测试用例。

在vue.js中基于propsdata测试多个案例

1 个答案: