VS Code TypeScript Jest Module Mappings

Question

I use TypeScript with Jest in VS code and I have mapped some module paths for easier access to those modules.

Very simplified, my directory structure looks like this:

├── app
│   └── middleware
│       └── auth.ts
├── jest.config.js
├── package.json
├── package-lock.json
├── test
│   └── unittest
│       └── app
│           └── middleware
│               └── auth.test.ts
└── tsconfig.json

And I have these mappings i my tsconfig.json:

"baseUrl": ".",
"paths": {
        "@app/*": [
        "./app/*"
    ]
}

And these mappings in my jest.config.js:

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

Everything works fine and I can run Jest without problems, but VS code does not recognise the @app mapping in the file auth.test.ts (in auth.ts it works fine).

Is there a way to solve that problem?

Answer 1

You can use the package module-alias to assign your aliases at runtime and then by utilizing Jest's option of setupFile ensure that they are always created at runtime of Jest.

Edit: Issue required another solution that was arrived at in the comments to this answer