[Vue] jest에서 $vuetify.breakpoint 오류

다음과 같은 태그를 갖는 컴포넌트에 대해 jest를 통해 유닛 테스트를 진행하려 한다.

<template>
  <div v-if="$vuetify.breakpoint.moblile">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello Jest~",
    };
  },
};
</script>

 

테스트 코드

 

Test.spec.js

v-if로 $vuetify.breakpoint.mobile이 사용되고 있는 컴포넌트에 대해 jest로 테스트를 진행하면 다음과 같이 에러가 발생한다.

대충 $vuetify의 mobile 인스턴스를 인식할 수 없다는 소리.

 

 

이유는 $vuetify인스턴스 변수는 mockable하지 않기 때문이다. 그래서오직 컴포넌트만이 shallowMount에 stubbed되는데, $vuetify.breakpoint는 Vue Test Utils에 stubbed되지 않기 때문에 다음과 같이 변경해준다.

 

쉽게 말하면 Vue.use(Vuetify)는 <v-col>과 같은 v태그들을 인식할 수 있도록 전역으로 import한다는 의미이고 $vuetify.breakpoint는 태그 안에서 v-if의 변수처럼 사용되기 때문에 태그가 아닌 "변수"의 영역이다. 따라서 shallowMount의 두번째 파라매터에 변수를 사용하는 형태로 위와 같이 작성을 해주어야 인식을 할 수 있게 된다.

 

지금 생각하면 당

 

 

*참고

shallowMount => child component는 무시. 오로지 컴포넌트 자신만 인식

mount => child component까지 인식(부모 컴포넌트의 변화가 자식에 주는 영향까지 파악할 수 있음)

shallowMount/mount(Foo, {propsData: {color: 'red'}}}) 와 같이 second parameter 가질 수 있음

 

 

 

coderethinked.com/shallowmount-vs-mount-in-vue-test-utils-with-an-example/

 

**추가 내용**

보통 Unit Test를 진행할 때 shallowMount를 쓴다고 한다.

 

어쨋건

이와 같이 vuetify를 새로 초기화한 후 shallowMount를 통해 wrapper에 등록하면 해결된다.