본 문서에서는 타입스크립트 프로젝트에서 모듈 번들러와 테스팅 프레임워크를 연동하는 방법에 대해 다룹니다.

모듈 번들러 설정

모듈 번들러로는 Webpack을 사용할 것을 가정하고, 다음과 같이 설정합니다.

// webpack.config.js

module.exports = {
  entry: "./src/index.ts",
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
}

테스팅 프레임워크 연동

Jest를 사용하여 타입스크립트 프로젝트를 테스트하기 위해서는 ts-jest 패키지를 설치하고 설정해야 합니다.

npm install --save-dev jest @types/jest ts-jest

그리고 jest.config.js 파일을 프로젝트 루트 디렉토리에 생성하여 다음과 같이 설정합니다.

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest'
  },
  testMatch: ['**/*.test.(ts|tsx|js)']
};

위에서 설정한 내용은 Jest가 타입스크립트 파일을 올바르게 처리하고 테스트할 수 있도록 돕습니다.

타입스크립트 모듈 번들러와 테스팅 프레임워크를 연동하는 방법에 대해 간단히 알아보았습니다. 여기서 제공한 예시 코드를 참고하여 프로젝트에 맞게 설정을 진행하시면 됩니다.

참고 자료

• Webpack Documentation
• Jest Documentation