Vue 2.7 で
クラスコンポーネント → Composition API
に書き換えても、
✅ Jest の設定や基本的な使い方（describe, it, expect など）は変わらない。
→ 書き換えが必要なのは
🟡 「テストするコードの書き方に合わせたテスト側のコード」だけ。
→ Jest 自体のセットアップや実行方法はそのまま使える。
| 項目 | 状態 | 説明 |
|---|---|---|
jest.config.js |
変更不要 | transform, preset, testEnvironment そのまま使える |
ts-jest, vue-jest |
変更不要 | TypeScript, Vue ファイルの変換設定はそのまま |
describe, it, test |
変更不要 | テストの基本構造は同じ |
expect, matcher 系 |
変更不要 | toBe, toEqual, toContain などもそのまま使える |
| テスト対象 | クラスコンポーネント | Composition API | 書き換えの必要性 |
|---|---|---|---|
data, computed, methods |
wrapper.vm.プロパティ |
DOM (text() / find()) や setup返り値 |
✅ 書き換え必要 |
Vuexのdispatch, commit |
this.$store.dispatch() |
useStore().dispatch() |
✅ 書き換え必要 |
| スナップショット | wrapper.html() |
基本同じ（ただし vm ではなく DOMで確認） |
⭕ ほぼ同じ（少し意識が必要） |
Jest の設定は
.ts → JavaScript への変換 → ts-jest.vue → JavaScript への変換 → vue-jestで動いている。