🎯 2.3 Vue 2.7 + TypeScript + クラスコンポーネント + Vuex におけるJestの設定

✅ 【要点】

Vue 2.7 + TypeScript + クラスコンポーネント + Vuex の環境では、

Jest + ts-jest + vue-jest を使ってテストできるように設定します。

設定するファイルは主に👇

• package.json
• jest.config.js
• babel.config.js（必要なら）
• tsconfig.json

🛠️ 【必要なパッケージ】

npm install --save-dev \\
jest \\
ts-jest \\
@types/jest \\
vue-jest@5 \\
@vue/test-utils@2 \\
babel-jest \\
babel-core@^7.0.0-bridge.0 \\
vue-class-component \\
vue-property-decorator

💡 vue-jest@5 → Vue 2.7 対応版。

💡 @vue/test-utils@2 → Vue 2 用の公式テストユーティリティ。

📂 【ディレクトリ構成例】

/my-app
├── jest.config.js          # Jest設定
├── babel.config.js         # Babel設定（必要なら）
├── tsconfig.json           # TypeScript設定
├── src/
│   └── components/
│       └── HelloWorld.vue  # テスト対象
├── tests/
│   └── HelloWorld.spec.ts  # テストコード
├── package.json

📌 【設定ファイル一覧】