[TS/Webpack/Jest] tsconfig paths를 사용할 때 Webpack, Jest 설정하기

TypeScript를 사용할 때 tsconfig에서 paths 설정을 통해 import 경로를 별도의 이름을 가진 절대 경로로 설정할 수 있다. paths를 설정하려면 baseUrl도 같이 설정해야 한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@styles/*": ["src/styles/*"],
      "@contexts/*": ["src/contexts/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

 

만약 CRA, CRN을 사용하지 않고 직접 Webpack 환경 설정을 한다면, webpack.config.js에서도 별도의 설정을 해줘야 경로를 인식할 수 있다. 만약 webpack에 별도의 설정을 하지 않고 tsconfig만 설정한다면 "Module not found" 라는 에러가 발생할 것이다.

 

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  }
}

resolve에 alias라는 속성을 위와 같이 작성하면 정상적으로 경로를 인식하게 된다. 

 

 

Jest는 Webpack을 사용하는 것이 아니기 때문에 Jest에서도 별도의 경로 설정이 필요하다. 따로 설정하지 않으면 "Cannot find module" 에러가 발생할 것이다.

// package.json

{
  "jest": {
    "moduleNameMapper": {
      "^@(components|assets|styles|contexts|hooks|utils)/(.+)$": "<rootDir>/src/$1/$2"
    }
  }
}

jest의 moduleNameMapper에 정규표현식 형태로 키를 설정하고, 값으로 경로를 설정하였다. 이 때 <rootDir>라고 쓰면 자동으로 루트 디렉토리가 입력된다.

 

원래 "^@(.+)$": "<rootDir>/src/$1"의 형태로 간단하게 작성하고 싶었으나, @emotion/react, @testing-library/react 같은 모듈들의 이름과 겹쳐서 부득이하게 위와 같이 작성하였다.

 

 

 

참고자료

https://jonghyun-park.medium.com/webpack-typescript%EC%97%90%EC%84%9C-path-alias-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-ec32428622d2

Webpack, Typescript에서 Path Alias 설정하기

https://it-timehacker.tistory.com/80

Jest + TypeScript 절대 경로 설정 하는 법