vuejs中基于propsdata测试多个案例答案

【问题标题】：Test multiple cases based on propsdata in vuejsvuejs中基于propsdata测试多个案例
【发布时间】：2019-05-20 01:32:27
【问题描述】：

我有一个组件，它有一个按钮，该按钮仅在 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 bloc 中安装组件？任何帮助表示赞赏！

【问题讨论】：

标签： javascript vue.js jestjs

【解决方案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);
        })
    })

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

【讨论】：