🎯 4.2 shallowMount / mount の違いと使い分け

✅ 【要点】

• shallowMount → 子コンポーネントを「ダミー」にしてテスト
• mount → 子コンポーネントも本物としてマウントしてテスト

→ 「自分のコンポーネントだけをテストしたい」なら shallowMount

→ 「子コンポーネントの動作も含めてテストしたい」なら mount

🏗️ 【基本の使い方】

// 使うユーティリティをimport
import { shallowMount, mount } from '@vue/test-utils';
import ParentComponent from '@/components/ParentComponent.vue';

// shallowMount → 子コンポーネントはスタブ（偽物）
const wrapper = shallowMount(ParentComponent);

// mount → 子コンポーネントも本物でマウント
const wrapper = mount(ParentComponent);

🎉 【具体例】

例: 親コンポーネントと子コンポーネント

<!-- src/components/ChildComponent.vue -->
<template>
  <p>I'm a child</p>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {}
</script>

<!-- src/components/ParentComponent.vue -->
<template>
  <div>
    <h1>Parent</h1>
    <ChildComponent />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ChildComponent from './ChildComponent.vue';

@Component({
  components: { ChildComponent },
})
export default class ParentComponent extends Vue {}
</script>

🟢 【shallowMount の動作】

import { shallowMount } from '@vue/test-utils';
import ParentComponent from '@/components/ParentComponent.vue';

test('ParentComponent shallowMount', () => {
  const wrapper = shallowMount(ParentComponent);
  // 子コンポーネントは <child-component-stub> になる
  expect(wrapper.html()).toContain('<childcomponent-stub></childcomponent-stub>');
});

📝 出力：