# 두 가지 렌더 방법

vue-test-utils는 컴포넌트를 렌더하거나 마운트 하는 두 가지 방법을 제공합니다. mount와 shallowMount라는 이름을 가졌습니다. 두 메서드 중 하나를 사용해서 마운트한 컴포넌트는 wrapper를 반환합니다. 반환된 wrapper는 Vue 컴포넌트를 포함하는 객체입니다. 덧붙여서 테스트하는데 유용한 몇 가지 메서드를 가지고 있습니다.

두 개의 간단한 컴포넌트를 가지고 시작해 보겠습니다.

const Child = Vue.component("Child", {
  name: "Child",

  template: "<div>Child component</div>"
})

const Parent = Vue.component("Parent", {
  name: "Parent",

  template: "<div><child /></div>"
})

먼저 Child를 렌더링하고, vue-test-utils에서 마크업을 검사하기 위해 제공하는 html 메서드를 호출하겠습니다.

const shallowWrapper = shallowMount(Child)
const mountWrapper = mount(Child)

console.log(shallowWrapper.html())
console.log(mountWrapper.html())

mountWrapper.html()과 shallowWrapper.html() 양쪽 다 아래와 같은 결과가 나옵니다.

<div>Child component</div>

결과에 차이가 없습니다. Parent는 어떨까요?

const shallowWrapper = shallowMount(Parent)
const mountWrapper = mount(Parent)

console.log(shallowWrapper.html())
console.log(mountWrapper.html())

mountWrapper.html()은 이제 아래의 결과를 산출합니다.

<div><div>Child component</div></div>

Parent와 Child의 마크업이 완전히 렌더 되었습니다. 반면에 shallowWrapper.html()은 아래와 같이 나옵니다.

<div><vuecomponent-stub></vuecomponent-stub></div>

<Child />가 위치한 곳이 vuecomponent-stub />으로 대체됐습니다. shallowMount는 정규 html 엘리먼트를 렌더하지만, Vue 컴포넌트를 스텁(stub)으로 대체합니다.

스텁은 진짜를 위해서 세워 놓은 '가짜' 객체의 일종입니다.

스텁은 매우 유용한 방법입니다. 아래와 같은 App.vue 컴포넌트를 테스트하기를 원한다고 상상해보세요.

<template>
  <div>
    <h1>My Vue App</h1>
    <fetch-data />
  </div>
</template>

정확하게 렌더된 <h1>My Vue App</h1>을 테스트하려고 합니다. mounted 라이프사이클 훅에서 외부 API에 요청을 보내는 <fetch-data> 컴포넌트도 가지고 있습니다.

mount를 사용하면, 일부 텍스트의 렌더 여부만 확인하고 싶을 뿐이어도, <fetch-data />는 API를 요청합니다. 이 요청은 테스트를 느리게 만들거나 실패하기 쉽게 만듭니다. 그래서 외부 의존성을 없앱니다. shallowMount를 사용해서 <fetch-data />는 <vuecomponent-stub />으로 대체되고, API 호출은 시작되지 않습니다.