vue-composition-api unit testing with typescript, how to get internal setup function and data inside wrapper?

Viewed 1056

Currently, I try to get the attributes inside my vue component while using vue-test-utils I have included the VueCompositionAPI

here is my code:

test.vue

<template>
  <div/>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from '@vue/composition-api'

export default defineComponent({
  props: {
    name: String
  },
  setup (props) {
    const state = reactive({
      testVar: 'test'
    })

    function inter () {
        console.log("run")
    }

    onMounted(() => {
      setInterval(() => { inter() }, 4000)
    })

    return { ...toRefs(state) }
  }
})
</script>

test.spec.ts

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

import { shallowMount } from '@vue/test-utils'
import Test from '@/components/Test.vue'

describe('has member', () => {
   const wrapper = shallowMount(VideoPlayer, {
      propsData
   })

   //i want to access value in using wrapper.vm.testVar but typescript return error

});
  1. I could set wrapper type as any to get wrapper.vm.testVar but I don't think it is a good idea
  2. and as for the function inter, I don't know how to retrieve it. Would like to setup mock jest function to check the interval
0 Answers
Related