Vue 구성 요소를 테스트할 때 측면 플러그인을 시뮬레이션하는 방법

Vue 구성 요소를 테스트할 때 측면 플러그인을 시뮬레이션하는 방법

나는 Vue 2, vue-test-utils, joke를 사용한다.

플러그인은 사진을 업로드하기 위한 vue-croppa입니다.

import Croppa from 'vue-croppa'
Vue.use(Croppa, { componentName: 'image-croppa' })

v-model을 통해 구성 요소에 마운트됩니다.그럼 몇 가지 방법을 불러올 수 있겠네요.

템플릿

<image-croppa v-model="myCroppa" ...>

대본

data() {
  return {
    myCroppa: {},
  }
},

또한 vue-croppa 메서드라고 하는 메서드가 있습니다.

handlePicture(){
    const dataUri = this.myCroppa.generateDataUrl()
    this.$emit('got-image', dataUri)
  },

vue-croppa 메서드 호출을 테스트하고 싶습니다.

문제는 다음과 같습니다.

테스트에서 컴포넌트를 초기화할 때 이 플러그인을 어떻게 모킹할 수 있습니까?그리고 이 행동을 테스트할 필요가 있나요?

사이드 노트:네 설정이 좀 헷갈려.왜?myCroppa데이터 요소로 선언되었습니까?vue-croppa 플러그인은 주입을 담당하지 않습니까?this.myCroppa둘 다 가지고 있으면 문제가 생길 것 같아요.

어쨌든, 당신은 통과 할 수 있습니다.mocks테스트에서 컴포넌트를 인스턴스화할 때의 옵션:

const mockCroppa = {
  get() => '/fake-url'
}

mount(MyComponent, {
  mocks: {
    myCroppa: mockCroppa
  }
}

출처 : https://vue-test-utils.vuejs.org/guides/ #http://filength-restions

두 번째 질문에서는 IMO가 올바른 이벤트를 내보내는지 테스트하는 것이 좋습니다.dataUri그 때handlePicture콜백은 에 의해 트리거됩니다.click이벤트 또는 이와 유사한 이벤트입니다.를 통해 트리거합니다.wrapper.trigger(...)당신의 테스트와 단언에서wrapper.emitted()['got-image']그래야만 하는 거야

언급URL : https://stackoverflow.com/questions/49055491/how-to-mock-side-plugin-when-testing-vue-component