使用 TypeScript 的 Jest 测试无法识别导入别名

Question

我正在为我的 Web 应用程序设置测试，该应用程序使用 Jest 框架与带有 TypeScript 的 Vue 框架一起工作。一切似乎都正常，除了我导入的 @ 符号，例如 import { Foo } from '@/bar。无论是在我的测试文件中还是在源代码中，它都看不懂并且returns:

Cannot find module '@/store' from 'src/tests/foo.spec.ts'

这是我在 package.json 中的 Jest 配置：

  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "testRegex": "(/tests/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
    "transform": {
      ".*\.(vue)$": "vue-jest",
      "^.+\.tsx?$": "ts-jest",
      "^.+\.jsx?$": "babel-jest"
    },
    "testURL": "http://localhost/",
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{ts,vue}", "!**/node_modules/**"],
    "coverageReporters": ["html", "text-summary"]
  }

有人知道如何让它正常工作吗？

谢谢

Answer 1

我最终找到了解决方案，我将其附加到 package.json 中的 Jest 配置中：

"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/"
},

Answer 2

来自 ts-jest 文档 path-mapping 部分：

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils')
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig')

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */),
}

使用 TypeScript 的 Jest 测试无法识别导入别名

Jest test with TypeScript does not recognize import alias

testing

unit-testing

typescript

jestjs

babel-jest