jest 절대 경로 찾지 못하는 문제

💭 상황

사이드 프로젝트에서 테스트 코드를 작성하기 위해 Jest를 도입하였다. 현재 프로젝트에서는 폴더 구조의 뎁스가 깊어 상대구조로 파일을 찾는 것은 너무 복잡하여 절대 경로를 사용하게 되었다. 절대 경로를 도입한 이후부터 Jest에서 정상적으로 모듈을 찾지 못하는 문제가 발생하였다. 

 

 

🥧 에러 내용

Cannot find module '@/core/models/components/properties/Property' 
	from 'src/tests/core/models/components/properties/Property.spec.ts'

 

 

🕵️‍♂️ 에러 파악

인터넷 검색 결과 동일한 문제를 겪은 사람들이 많은지 블로그에 해결방법이 여럿나왔다. 대표적인 방법으로 jest의 환경설정에서 moduleNameMapper 를 설정해주면 된다는 내용이었다.

 

먼저 tsconfig.app.json에는 절대 경로 설정이 아래와 같이 되어 있다.

// tsconfig.app.json
{
  "compilerOptions": {
    // ...
    
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

 

그래서 jest.config.ts에 절대 경로를 참고해서 아래와 같이 추가하였다.

module.exports = {
  // ...
  
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

 

그리고 현재 프로젝트에서는 vite를 사용하고 있기 때문에 vite에서도 alias 설정을 추가하였다.

export default defineConfig({
  // ...
  
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
});

 

위와 같이 설정을 했을 때 앱은 정상적으로 절대결로를 찾아서 실행되는 것은 확인이 되었지만 하지만 테스트코드를 실행할땐 여전히 동일한 오류가 발생하여 정상작동하지 않았다.

 

대부분의 참고 사이트에서는 조금씩 다르긴 하지만 결국 moduleNameMapper 를 설정하면 된다는 얘기뿐이어서 당황스러웠다.

 

 

프로젝트는 vite를 통해서 리액트 프로젝트 템플릿으로 생성하였다. 그래서 tsconfig.json 파일도 자동으로 생성이 되었는데 이때 tsconfig.app.json, tsconfig.node.json 로 분리가 되어 있고 절대 경로 설정을 tsconfig.app.json에 추가하였다. 

 

그래서 절대 경로를 찾지 못하기에 tsconfig.node.json 에도 동일하게 path 설정을 했을 때 정상적으로 작동하지 않았다. 

 

그래서 tsconfig.json에 아래와 같이 설정을 추가하니 정상적으로 작동하게 되었다.

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  
  // 설정 추가
  "compilerOptions": {
     "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

 

 

🎅 해결 방법 정리

1. jest.config.ts 에 moduleNameMapper 추가

2. [vite 프로젝트라면] vite.config.ts 에 alias 추가

3. tsconfig가 node와 app으로 분리되어 있다면 절대 경로 설정을 tsconfig.json에 설정하기

 

사실 아직 왜 node와 app에 paths 설정을 하는 경우에는 앱은 정상인데 jest에서는 실행 안되는지는 알지 못한 상태라 조금 찝찝하지만 일단은 해결 완료!