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

Question

I have a node project with typescript, and I have the following paths configured in my tsconfig.json file:

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

My config files are at /project folder, and my sources at /project/src

It works ok, and it correctly maps @xxx/yyy to src/xxx/yyy and @project/package.json to /project/package.json

I'm trying to achieve the same with ts-jest, I tried with the folowing moduleNameMapper in my jest.config.js file:

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

But I get the following error:

 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)

On the other hand, if I map every folder at /src like this:

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"
  }
}

It works ok, but I have to update it with every new root folder I add.

Is there any standard, recommended way to achieve such a thing? I want to have a special character (@ in this case) pointing to my /src/ folder.

Also tried replacing '@' with '$' but had other errors too...

Answer 1

I made it work with the following config.

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

This article was helpful.

In my case I wanted map @ to ./src and @components to ./src/components

Answer 2

I could solve it, but not with the @ sign, I had to use $ , more over, I had to escape it and enclose it in square brackets, like this:

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",
  }
}

I hope it might be useful for other people, configuring all these little details is a real pain...

---

Damn, I almost had it all working (ttsc and ts-jest works fine), but vscode wont recognize imports mapped with '$', work ok with '@' though...