절대 경로 설정(Jest 포함)

https://velog.io/@hunmok1027/vite-에서-절대경로-설정하기

처음엔 위 블로그 보고 설정했다.(블로그 주인님께 감사)

잘되는가 싶었는데 내 프로젝트에서는 jest에서 에러가 발생했다..!

문제점

jest에서는 절대 경로를 설정한 파일을 또 불러오지 못한다.

따라서 따로 설정이 필요하다.

해결법

package.json

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

이렇게 설정하여 jest의 절대 경로를 설정했다.

테스트 코드 파일

import UserManageModal from '@/components/Member/MyPage/UserManageModal';

그리고 import 할때, 경로를 @/components 이렇게 불러와야한다.

이때 문제점은 그냥 components, pages 등 파일에서는 @components 이렇게 불러왔었는데, 테스트 코드의 절대 경로 불러오는 방식과 맞지 않았다.

경로 재설정

위 문제점으로 인해 그냥 components, pages 등 파일에서도 @/components 이렇게 불러왔다.

 

-vite.config.ts

resolve: {
    alias: [
      { find: '@/api', replacement: '/src/api' },
      { find: '@/components', replacement: '/src/components' },
      { find: '@/pages', replacement: '/src/pages' },
      { find: '@/hooks', replacement: '/src/hooks' },
      { find: '@/layouts', replacement: '/src/layouts' },
      { find: '@/recoil', replacement: '/src/recoil' },
      { find: '@/types', replacement: '/src/types' },
      { find: '@/utils', replacement: '/src/utils' },
      { find: '@/typings', replacement: '/src/typings' },
      { find: '@/', replacement: '/src' },
    ],
  },

 

-tsconfig.json

"paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@/pages/*": ["src/pages/*"],
      "@/hooks/*": ["src/hooks/*"],
      "@/layouts/*": ["src/layouts/*"],
      "@/recoil/*": ["src/recoil/*"],
      "@/types/*": ["src/types/*"],
      "@/utils/*": ["src/utils/*"],
      "@/typings/*": ["src/typings/*"],
      "@/api/*": ["src/api/*"]
    }

이렇게 파일들을 재설정하니 해결되었다.

---

이 문제 때문에 2일은 쓴거 같다..!

뭔가 별거 아닌거 같았지만 처음엔 감이 잘 안잡혔다. 분명 구글링해서 나오는 대로 했는데 되지 않았다...

그래서 해결하고 난 뒤에 좀 허무함이 몰려왔지만, 그래도 해결해서 뿌듯하다!