반응형
타입 스크립트를 사용한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
});
- wrapper.vm.testVar를 가져오기 위해 wrapper type을 any로 설정할 수 있지만 좋은 생각은 아닌 것 같습니다.
- 또,
function inter
어떻게 회수해야 할지 모르겠어요.간격을 확인하기 위해 모의 농담 함수를 설정하려고 합니다.
언급URL : https://stackoverflow.com/questions/61812155/vue-composition-api-unit-testing-with-typescript-how-to-get-internal-setup-func
반응형
'programing' 카테고리의 다른 글
Vuetify.js: 왼쪽과 오른쪽의 v-card에 버튼 액션을 배치하는 방법 (0) | 2022.07.19 |
---|---|
비반응 데이터를 Vuex에 저장하는 방법 (0) | 2022.07.19 |
자바에서는 어떤 컨스트럭터를 다른 컨스트럭터에서 어떻게 호출합니까? (0) | 2022.07.19 |
두 번째 레벨 vue 경로에 직접 액세스할 때 오류가 발생함 (0) | 2022.07.19 |
자바에서 실제로 스플리어스 웨이크업이 발생합니까? (0) | 2022.07.19 |