Reactive State function unit testing in vue

Question

I am very new to unit testing. I have reactive state usage in the component. would like to write unit testing for the component.

The example test component is defined below

 <script setup lang="ts">
 const state = reactive({ 
  isExpired: true as boolean, 
 })
 </script>
<template>
    <div class="container" v-if="state.isExpired === false"></div>
</template>

Here, I want to check whether the container is rendering or not. isExpired value will be dynamically changed.

I have tried the test cases for the component as shared below

describe("Test suit for component",()=>{
   let wrapper = shallowMount(TestComponent,{
     isExpired : false
   });
   it("its should display container style",async ()=>{ 
      expect(wrapper.find('.container').exists()).toBeTruthy();
   });
});

I am not able to find the relevant unit testing in the online resources. Would like to know how to test the reactive state of component.

`{ isExpired : false }` doesn't make sense. The property is defined inside the comp. You need to change it outside, like `wrapper.vm.isExpired=` — Estus Flask, Aug 01 '22 at 06:42
@EstusFlask Yes I have tried your suggestion. It's not working. still is failing. it("its should display container style",async ()=>{ wrapper.vm.isExpired = false; expect(wrapper.find('.container').isVisible()); }) — Narayanan, Aug 01 '22 at 07:19
Likely this https://stackoverflow.com/questions/48751635/vue-test-utils-using-nexttick-multiple-times-in-a-single-test — Estus Flask, Aug 01 '22 at 08:45

score 0 · Answer 1 · answered Apr 19 '23 at 09:30

I believe you should set the state value after mounting the component

describe("Test suit for component",()=>{
   let wrapper = shallowMount(TestComponent, { /* in here you would set the component input props*/});

   wrapper.vm.state.isExpired = false; // <- we modify ViewModel state value

   it("its should display container style",async ()=>{ 
      expect(wrapper.find('.container').exists()).toBeTruthy();
   });
});

Reactive State function unit testing in vue

1 Answers1