Why can't I use @ to replace the long relative path in my __tests__ folder?

Issue

I initialed my vue project via vue-cli. I can use @ in my src folder, but it doesn't work in my __tests__ folder. I've already added config in my tsconfig.json file, but I'm not sure whether it's for this situation.

"paths": {
  "@/*": ["src/*"]
},

Solution

The test framework needs to be configured with the path aliases as well. It's not automatically configured with tsconfig.json or vue.config.js (or any other config).

To configure the path alias in Jest, use the moduleNameMapper option:

// <projectRoot>/jest.config.js
module.exports = {
  moduleNameMapper: [
    '^@/(.*)$': '<rootDir>/src/$1'
  ]
}

This is normally configured for you if using @vue/cli-plugin-unit-jest, but if you've setup Jest on your own without the plugin, you would need the config mentioned above.

Answered By - tony19