# コンポーネントをレンダーする二つのメソッド - 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は呼ばれない。テストがより早くできます。