ts-jest：将“@”字符映射到 /src 文件夹

Posted 2023-02-18

【中文标题】ts-jest：将“@”字符映射到 /src 文件夹

【英文标题】：ts-jest: map '@' char to /src folder

【发布时间】：2020-03-25 05:40:46

【问题描述】：

我有一个带有 typescript 的节点项目，并且在我的 tsconfig.json 文件中配置了以下路径：

    "paths":                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
      "@project/*": ["./../*"],
      "@*": ["./*"],
    ,

我的配置文件位于 /project 文件夹，我的源位于 /project/src

它工作正常，它正确地将@xxx/yyy 映射到 src/xxx/yyy 和 @project/package.json 到 /project/package.json

我正在尝试使用 ts-jest 实现相同的效果，我尝试在我的 jest.config.js 文件中使用以下 moduleNameMapper：

module.exports = 
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src/'],
  modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/build/'],
  testMatch: ['**/*.spec.ts'],
  moduleNameMapper: 
    "^\@(.*)": "<rootDir>/src/$1",
  

但我收到以下错误：

 FAIL  src/lib/error/BaseError.spec.ts
  ● Test suite failed to run

    Configuration error:

    Could not locate module @babel/code-frame mapped as:
    C:\data\devel\apps\sgte-it\coordinacion\juridicos\wspjn\src\babel/code-frame.

    Please check your configuration for these entries:
    
      "moduleNameMapper": 
        "/^@(.*)/": "C:\data\devel\apps\sgte-it\coordinacion\juridicos\wspjn\src\$1"
      ,
      "resolver": null
    

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:501:17)

另一方面，如果我像这样映射 /src 中的每个文件夹：

module.exports = 
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src/'],
  modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/build/'],
  testMatch: ['**/*.spec.ts'],
  moduleNameMapper: 
    "@db/(.*)": "<rootDir>/src/db/$1",
    "@lib/(.*)": "<rootDir>/src/lib/$1",
    "@modules/(.*)": "<rootDir>/src/modules/$1",
    "@services/(.*)": "<rootDir>/src/services/$1"
  

它工作正常，但我必须用我添加的每个新根文件夹更新它。

有什么标准的、推荐的方法来实现这样的事情吗？我希望有一个特殊字符（在本例中为 @）指向我的 /src/ 文件夹。

还尝试将 '@' 替换为 '$' 但也出现其他错误...

【参考方案1】：

我使它与以下配置一起工作。

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

This article 很有帮助。

在我的情况下，我想要将 @ 映射到 ./src 和 @components 到 ./src/components

【参考方案2】：

我可以解决它，但不能使用@ 符号，我必须使用$，此外，我必须将其转义并将其括在方括号中，如下所示：

tsconfig.json：

    "paths":                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
      "$project/*": ["./../*"],
      "$*": ["./*"],
    ,

jest.config.js：

module.exports = 
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src/'],
  modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/build/'],
  testMatch: ['**/*.spec.ts'],
  moduleNameMapper: 
    "^[\$]project/(.*)": "<rootDir>/$1",
    "^[\$](.*)": "<rootDir>/src/$1",
  

我希望它对其他人有用，配置所有这些小细节真的很痛苦......

---

该死，我几乎都可以正常工作了（ttsc 和 ts-jest 工作正常），但是 vscode 无法识别使用 '$' 映射的导入，但使用 '@' 可以正常工作......