비웃음 뷰 클래스 구성 요소 메소드

Question

이의 내가 아주 기본적인 VUE 수준의 구성 요소 있다고 가정 해 봅시다 :

<template> 
    <div>Nothing of interest here</div> 
</template> 

<script> 
    import Vue from 'vue'; 
    import Component from 'vue-class-component'; 
    import http from './../modules/http'; 

    @Component 
    export default class Example extends Vue { 
     user = null; 
     errors = null; 

     /** 
     * @returns {string} 
     */ 
     getUserId() { 
      return this.$route.params.userId; 
     } 

     fetchUser() { 
      this.user = null; 
      this.errors = null; 

      http.get('/v1/auth/user/' + this.getUserId()) 
       .then(response => this.user = response.data) 
       .catch(e => this.errors = e); 
     } 
    } 
</script> 

을 나는 그래서 난 그냥 './../modules/http' 의존성을 조롱 fetchUser() 방법을 테스트 할 http.get을 Promise으로 보내주십시오. 문제는 제 주장에서 URL이 제대로 빌드되고 있는지 확인하고 테스트를 위해 하드 코드 된 변수에서 사용자 ID를 가져와야합니다.

나는 이런 식으로 뭔가를 시도했지만 작동하지 않습니다 불행히도 작동하지 않습니다

import ExampleInjector from '!!vue-loader?inject!./../../../src/components/Example.vue'; 

const mockedComponent = ExampleInjector({ 
    './../modules/http': { 
     get:() => new Promise(/* some logic */) 
    }, 
    methods: getUserId:() => 'my_mocked_user_id' 
}); 

및 질문은 그래서는 뷰의 문서에서이 특정 아무것도 찾을 수 없습니다, 어떻게 나는 외부 의존성과 클래스 컴포넌트 메소드를 모의하기로되어 있나?

참고 : 나는 userId로 this.$route.params.userId 잠재적으로뿐만 아니라 다른 곳에서 올 수 (플러스 이것은 단지 예입니다) 조롱하지 않으. 그냥 getUserId 메소드를 조롱하고 싶습니다.

Answer 1

어떻게 할 수 분사 로더 모의 뷰 클래스 구성 요소 메소드 여기에 손 질문에 대한 완벽한 솔루션입니다 :

import ExampleInjector from '!!vue-loader?inject!./../../../src/components/Example.vue'; 

const getComponentWithMockedUserId = (mockedUserId, mockedComponent = null, methods = {}) => { 
    if (!mockedComponent) { 
     mockedComponent = ExampleInjector(); 
    } 

    return Vue.component('test', { 
     extends: mockedComponent, 
     methods: { 
      getUserId:() => mockedUserId, 
      ...methods 
     } 
    }); 
}; 

그리고 내 테스트 케이스 :

은

const component = getComponentWithMockedUserId('my_mocked_user_id'); 

const vm = new Vue(component); 

부분적 모의 객체 과을 만들어야 할 때 이것이 매우 유용하다는 것을 발견했습니다.

Answer 2

이 작업을 수행하는 가장 쉬운 방법은 방법 구성 요소를 확장하고 무시하는 것입니다 : 나는 Bar이 Foo를 확장 Vue 말할 위해 extends 속성을 사용하고이 예에서는

const Foo = Vue.extend({ 
    template: `<div>{{iAm}}</div>`, 
    created() { 
    this.whoAmI(); 
    }, 
    methods: { 
    whoAmI() { 
     this.iAm = 'I am foo'; 
    } 
    }, 
    data() { 
    return { 
     iAm: '' 
    } 
    } 
}) 

Vue.component('bar', { 
    extends: Foo, 
    methods: { 
    whoAmI() { 
     this.iAm = 'I am bar'; 
    } 
    } 
}) 

new Vue({ 
    el: '#app' 
}) 

을 한 후 나는 무시 해요 whoAmI 방법을 사용하면 다음과 같은 작업을 볼 수 있습니다. https://jsfiddle.net/pxr34tuz/

나는 내 오픈 소스 프로젝트 중 하나에서 비슷한 것을 사용합니다.이 프로젝트는 here을 확인할 수 있습니다. 이 예제에서 내가하고있는 일은 Vue가 콘솔 오류를 내게 던지는 것을 막기 위해 필요한 속성을 끄는 것입니다. 내가 특별히에 대해 질문 때문에