🎯 2.3 書き換えで変わる部分・変わらない部分まとめ

✅ 【要点】

Composition API への書き換えで

Jest の設定や基本的な構文は変わらない。
変わるのは 「テスト対象コードのアクセス方法」。

→ 特に wrapper.vm 依存の箇所と

→ Vuex (store) の使い方が書き換え対象。

🟢 【書き換えで変わらないもの】 ✅

項目	そのままでOK	補足
`jest.config.js`	変更不要	`ts-jest`, `vue-jest` そのまま
`describe`, `it`, `test`	変更不要	基本的な Jest の構文
`expect`, 各種マッチャ	変更不要	`toBe`, `toEqual`, `toContain` なども同じ
スナップショット設定	変更不要	`toMatchSnapshot()` そのまま使える

🟠 【書き換えが必要なもの】 🛠️

内容	クラスコンポーネント	Composition API	書き換えポイント
`data`, `computed`, `methods` の確認	`wrapper.vm.プロパティ`	DOM (`text()`, `find()`) を通して確認	`vm` 依存をやめる → 出力をチェック
`methods` の実行	`wrapper.vm.increment()`	`trigger('click')` などイベントで動かす	手で呼ばずにユーザー操作を再現
Vuex の使い方	`this.$store.dispatch('action')`	`useStore().dispatch('action')`	`useStore()` をモックする
Vuex モック方法	`actions: { increment: jest.fn() }`	`useStore` を jest.mock で置き換える	`useStore` のモック関数を作成

🟣 【イメージ図】

Before (クラス):
 wrapper.vm.count
 wrapper.vm.double
 wrapper.vm.increment()

After (Composition):
 wrapper.text()         ← 表示された数値を見る
 wrapper.find('button').trigger('click')  ← イベントで動かす

🟥 【具体的な変換パターン】

やっていたこと	書き換え後
`expect(wrapper.vm.count).toBe(1)`	`expect(wrapper.text()).toContain('1')`
`wrapper.vm.increment()`	`await wrapper.find('button').trigger('click')`
`expect(wrapper.vm.double).toBe(2)`	`expect(wrapper.text()).toContain('2')`