Nuxt 2 TypeScript项目Jest测试报TS2307模块找不到错误

Nuxt 2 + TypeScript项目运行正常，但测试环节存在问题：所有.ts后缀的测试文件执行时均报错TS2307: Cannot find module，无法找到测试中导入的组件；仅.js后缀的测试文件能正常识别导入的组件并运行。

package.json配置 #

{
  "name": "my-nuxt-2-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "clearJestCache": "jest --clearCache"
  },
  "dependencies": {
    "axios": "0.19.2",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.24",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@types/jest": "29.5.12",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.1.2",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "ts-jest": "^29.0.3",
    "vue-jest": "^3.0.4"
  }
}

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
      "jest"
    ]
  },
  "include": [
    "**/*.ts",
    "**/*.vue",
    "test/NuxtLogo.spec.js"
  ],
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

jest.config.js配置 #

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: [
    'ts',
    'js',
    'vue',
    'json'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  testEnvironment: 'jsdom',
  transformIgnorePatterns: [
    "/node_modules/(?!axios)"
  ]
}

额外说明 #

• Jest不仅无法识别@/pages/personal-info/_id.vue、~/pages/inspire.vue这类别名路径的模块，连./../pages/about-me.vue这类相对路径的模块也找不到。

内容的提问来源于stack exchange，提问作者Heinz