第2章：移行前のコード全体像

2.4 テストファイル（Jest + スナップショットテストあり）

ここでは、変換前に使用されていたテストファイルの構成と、具体的なコード例を示します。

特に、ParentComponent.vueのスナップショットテストを中心に紹介します。

■ ファイル構成（例）

src/
├── tests/
│   ├── components/
│   │   └── ParentComponent.spec.ts

■ ParentComponent.spec.ts（変換前）

// ファイル名: ParentComponent.spec.ts
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import ParentComponent from '@/components/ParentComponent.vue';
import ChildComponent from '@/components/ChildComponent.vue';
import SampleModule from '@/store/modules/sampleModule';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('ParentComponent.vue', () => {
  let store: any;

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        sampleModule: {
          namespaced: true,
          state: {
            text: 'テスト用テキスト',
            currentRoute: { name: 'home', path: '/' },
          },
          getters: {
            textLength: (state: any) => state.text.length,
            currentRouteName: (state: any) => state.currentRoute.name,
          },
          actions: {
            updateText: jest.fn(),
          },
        },
      },
    });
  });

  it('スナップショットと一致すること', () => {
    const wrapper = shallowMount(ParentComponent, {
      localVue,
      store,
      stubs: {
        ChildComponent,
      },
    });
    expect(wrapper.element).toMatchSnapshot();
  });

  it('ボタンをクリックするとupdateTextが呼ばれること', async () => {
    const wrapper = shallowMount(ParentComponent, {
      localVue,
      store,
      stubs: {
        ChildComponent,
      },
    });

    // childValueを変更
    (wrapper.vm as any).childValue = '新しいテキスト';

    // ボタンクリック
    const button = wrapper.find('button');
    await button.trigger('click');

    // アクションが呼ばれたか確認
    expect(store._modulesNamespaceMap['sampleModule/'].context.dispatch).toHaveBeenCalledWith('updateText', '新しいテキスト');
  });
});

■ このテストコードで注目すべきポイント

項目	内容
ローカルVueインスタンス使用	`createLocalVue()`でVuexをセットアップ
Vuexモジュールのモック	storeに直接state, getters, actionsを渡してモック
スナップショットテスト	`toMatchSnapshot()`でコンポーネントのHTML構造を検証
アクションの検証	ボタンクリック後に`updateText`アクションが呼ばれるか確認

✅ スナップショットテストによって、見た目の破壊的変更を検知できます。

✅ ボタンアクションの動作確認も含まれているため、基本的な振る舞いをきちんとカバーしています。

✅ このテストファイルも、後のComposition API変換後に必ず書き直して適合させます！