[Vue.js] 단위 테스트 - mount vs shallowMount

/test/ 에 다음과 같이 Parent.vue, Child.vue, Parent.test.js 생성

<Child msg="RIAM" />이 렌더링 된 채로 출력된다.

일반적으로 다른 컴포넌트를 사용하고 있는 컴포넌트를 참조하면, 그 컴포넌트가 렌더링된 채 출력된다.

여기서 shallowMount를 사용하면 다음처럼 컴포넌트 렌더링 없이 출력한다.

<child-stub msg=\"RIAM\"></child-stub> 이라고 뜬다.

shallowMount

얕은 mount를 뜻한다.

어떤 컴포넌트를 테스트 할 때 참조하는 컴포넌트들을 stub(더미 모듈)으로 만들어 실행해준다.

 

해당 컴포넌트가 만약 수많은 컴포넌트들을 참조하고 있다면, 테스트가 무거워지고 느려지기 때문에 사용한다.