How to get the Ref value in a test with Vue 3 Composition API

user_17008325 0
Viewed 920

I have a v-if rendering in my component that is link to a ref in the setup method. How can I test the rendrering in my testing script. Example:

In the component:

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

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

In the test component (I try this but dont work, the test received 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)
    });
vuejs3 vue-composition-api testing unit-testing
1 Answers

If you are using the setup() method this is what counts. In the test you then use data() which AFAIK doesn't work if you use setup().

One small side note there, do you return isCovid so it is accessible in the template?

I don't think you can modify a ref that you create in setup(). You'll probably need to provide something as a prop which you then access there. I just found this with an example: https://lmiller1990.github.io/vue-testing-handbook/composition-api.html#the-component

user_37371770
Related