# コンポーネントをレンダーする二つのメソッド - mountとshallowMount

vue-test-utilsは、 コンポーネントをレンダー(マウント)するのに、二つのメソッドを提供しています - mountとshallowMount。どのコンポーネントも、この二つのいずれかのメソッドを使い、wrapperを返します。wrapperは、Vue componentを含むオブジェクトです。また、テストの実行に色々な便利なメソッドを持っています。

それでは、ChildとParent、二つシンプルなコンポーネントで例を見てみましょう：

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 componentsに対しては描画せずスタブに置き換えることが分かりました。

スタブとは、実際のオブジェクトを代替する「偽物」のオブジェクトです。

スタブは便利そうですね。以下のApp.vueコンポーネントをテストすることを考えましょう:

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

<h1>My Vue App</h1>が正確にレンダーされたかテストしたいとします。ただ、<fetch-data />子コンポーネントもあるので、これはmountedライフサイクルフックの中に、外部APIにリクエストを投げて、レンダーされます。

mountを使った場合、ただ一部の内容だけレンダーしたいとしても、<fetch-data />は外部APIにリクエストを投げます。その結果、テストが遅くなり、エラーも発生しやすくなります。shallowMountを使った場合ですと、<fetch-data />は<vuecomponent-stub />に置き換えます。スタブは外部依存しないため、APIは呼ばれない。テストがより早くできます。