vue3 vue-test-utils 增加 TypeScript 支援

原先文章是在沒有使用 TypeScript 的情況下建置的，如果專案有 TypeScript 需要多安裝套件 ts-jest，而需要支援 "ts-jest"，需要把所有相關套件升級到 29，及修改一些設定，所以在此篇補充。

因為"typescript": "5.3.3" 所以相關依賴必須是29

其他套件安裝及介紹，請至原先文章，直接分享 package.json 相關設定

"devDependencies": {
    "@babel/preset-env": "^7.24.3",
    "@vue/test-utils": "^2.4.5",
    "babel-jest": "29.7.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "@vue/vue3-jest": "^29.2.6",
    "ts-jest": "29.2.3"
  },

套件上的差異主要是增加 "ts-jest"，及其他相關套件升級到 29以上，

ts-jest 是一個 Jest 的預設配置，用於在測試中轉換 TypeScript 代碼。

vue3-jest 改變為"@vue/vue3-jest"。

修改 jest.config.js

module.exports = {
  preset: 'ts-jest',
  globals: {},
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\js$': 'babel-jest',
  },
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
  },
};

主要增加：

module.exports = {
  preset: 'ts-jest',
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },
};

這樣就測試時就可以支援 TypeScript 了。