🎯 2.5 jest.config.js の書き方解説

✅ 【要点】

jest.config.js は

「Jestがどのファイルを、どう変換して、どうテストするか」 を決める設定ファイルです。

Vue 2.7 + TypeScript + クラスコンポーネント + Vuex で動かすためには、

• ts-jest で .ts ファイル

• vue-jest で .vue ファイル

  を変換する必要があります。

🛠️ 【基本の書き方】

// jest.config.js
// Jestの設定ファイル。TypeScript + Vue用の変換設定。

module.exports = {
  // ts-jestをプリセットとして使用する
  preset: 'ts-jest',

  // ファイル変換のルールを設定
  transform: {
    // .vueファイルは vue-jestで変換
    '^.+\\\\.vue$': 'vue-jest',
    // .tsファイルは ts-jestで変換
    '^.+\\\\.ts$': 'ts-jest',
  },

  // テスト対象ファイルの拡張子
  moduleFileExtensions: ['js', 'ts', 'vue', 'json'],

  // モジュールパスのエイリアス対応 (必要なら)
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },

  // 仮想DOM環境を使用（ブラウザの動作をエミュレート）
  testEnvironment: 'jsdom',

  // カバレッジ（網羅率）レポートを有効化する場合（任意）
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{ts,vue}',
    '!src/main.ts',               // エントリーポイントは除外
    '!src/**/*.d.ts'             // 型定義ファイルも除外
  ],
};

💡 【1行ずつのポイント解説】

preset: 'ts-jest'

TypeScript のコードを ts-jest で変換するよ、という設定。

transform

transform: {
  '^.+\\\\.vue$': 'vue-jest',
  '^.+\\\\.ts$': 'ts-jest',
}

.vue は vue-jest が、.ts は ts-jest が変換。

.js は自動で Babel が処理する。