🎯 2.4 Babel / ts-jest の設定ポイント

✅ 【要点】

• .vue ファイルは Babel でトランスパイルが必要

• TypeScript のコードは ts-jest がトランスパイル

  → この2つが正しく動くように設定するのがポイント。

特にデコレーター（@Prop など）を使うクラスコンポーネントは

emitDecoratorMetadata や experimentalDecorators が必須。

📌 【なぜBabelが必要？】

VueのSFC（.vueファイル）は

• <template> の中は Vue のコンパイラ
• <script lang="ts"> の中は TypeScript

だけど、Jestが理解するのは普通のJS。

なので、

• .vue → vue-jest が読み込んで
• <script> の中身は babel-jest で変換

→ この変換がないとJestが.vueファイルを読めない。

🛠️ 【必要なパッケージおさらい】

npm install --save-dev \\
babel-jest \\
@babel/core \\
@babel/preset-env