如何使用 Vue 3 Composition API 在测试中获取 Ref 值答案

【问题标题】：How to get the Ref value in a test with Vue 3 Composition API如何使用 Vue 3 Composition API 在测试中获取 Ref 值
【发布时间】：2021-10-14 15:05:24
【问题描述】：

我的组件中有一个 v-if 渲染，它链接到 setup 方法中的 ref。如何在我的测试脚本中测试渲染。示例：

在组件中：

<div v-if="isCovid" class="covid"/>

 setup() {
    const isCovid = ref(true);
}

在测试组件中（我尝试了这个但不工作，测试收到 true）：

 it('do not render covid waring when its false', () => {
    const wrapper = mount(TicketHeader,{
      data(){
        return { isCovid: false}
      }
    });
    expect(wrapper.find('.covid').exists()).toBe(false)
    });

【问题讨论】：

标签： unit-testing testing vuejs3 vue-composition-api

【解决方案1】：

如果您使用setup() 方法，这很重要。然后在测试中使用data()，如果你使用setup()，AFAIK 将不起作用。

这里有一个小注解，您是否返回isCovid，以便在模板？

我认为您不能修改在 setup() 中创建的 ref。您可能需要提供一些东西作为道具，然后您可以在那里访问。我只是通过一个例子找到了这个： https://lmiller1990.github.io/vue-testing-handbook/composition-api.html#the-component

【讨论】：