programing

타입 스크립트를 사용한vue-composition-api 유닛 테스트, 내부 셋업 기능 및 래퍼 내부 데이터를 얻는 방법

sourcetip 2022. 7. 19. 23:17
반응형

타입 스크립트를 사용한vue-composition-api 유닛 테스트, 내부 셋업 기능 및 래퍼 내부 데이터를 얻는 방법

현재 포함된 vue-test-utils를 사용하여 vue 컴포넌트 내에서 속성을 가져오려고 합니다.VueCompositionAPI

코드는 다음과 같습니다.

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. wrapper.vm.testVar를 가져오기 위해 wrapper type을 any로 설정할 수 있지만 좋은 생각은 아닌 것 같습니다.
  2. 또,function inter어떻게 회수해야 할지 모르겠어요.간격을 확인하기 위해 모의 농담 함수를 설정하려고 합니다.

언급URL : https://stackoverflow.com/questions/61812155/vue-composition-api-unit-testing-with-typescript-how-to-get-internal-setup-func

반응형