9.2 Composition API対応後のテスト書き直しポイント | Notion

9.2 Composition API対応後のテスト書き直しポイント

■ 要点まとめ

Composition API移行後はクラス構文を使わず、リアクティブな値(refやcomputed) にアクセスする
ローカルVueインスタンスは引き続き必要
Vuexストアモックも同じく必要だが、アクセスの仕方が変わる
*テストの対象（v-modelバインド値、メソッド呼び出し）**も、内部プロパティ名を意識して扱う
shallowMount + stubsの使い方はほぼ変わらない

■ ✅ Composition API版で注意すべき主な変更点

項目	変換前（クラスコンポーネント）	変換後（Composition API）
データアクセス	`(wrapper.vm as any).childValue`	`wrapper.vm.childValue` そのまま
メソッド呼び出し	`(wrapper.vm as any).changeText()`	`wrapper.vm.changeText()`
VuexのGetter/State	デコレーターでラップされたもの	`computed`に包まれた値を参照する
ボタン操作	変わらない（`trigger('click')`）	同じ（`trigger('click')`）

■ ✅ テストコードの見直し箇所（例）

ローカルVueインスタンスとVuexストアモックは今まで通り使う
Composition APIでは、template側のバインディングは基本的にrefやcomputedだから、直接触れる
shallowMountのとき、setup()内部で定義した変数・メソッドをそのまま使える

■ 🎯 ここが大事ポイント！

(wrapper.vm as any) のようなキャストは不要になる！
Composition APIのrefは、内部的にはリアクティブラッパーになるが、Vue Test Utilsがいい感じにunwrapしてくれる