이번 글에서는 Rollup과 타입스크립트를 함께 사용하여 테스트 코드를 작성하는 방법에 대해 알아보겠습니다.

Rollup이란?

Rollup은 ES6 모듈 형식으로 작성된 코드를 더 작고 빠르게 만들기 위한 모듈 번들러입니다. Rollup은 플러그인 시스템을 통해 다양한 형식의 파일을 처리할 수 있으며, 최신 JavaScript 기능을 지원하는 등 현대적인 웹 개발에 적합한 도구입니다.

타입스크립트와 Rollup 설정

먼저, Rollup과 타입스크립트 설정을 완료해야 합니다.

패키지 설치

npm install --save-dev rollup rollup-plugin-typescript typescript

Rollup 설정 파일 (rollup.config.js)

import typescript from 'rollup-plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript()
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true
  }
}

위 설정에 따라 src 디렉토리에 index.ts 파일을 만들고, 해당 파일에 타입스크립트로 코드를 작성할 수 있습니다.

테스트 코드 작성

테스트 코드는 보통 src 디렉토리 내에 __tests__ 디렉토리를 생성하여 작성합니다.

// src/__tests__/example.test.ts

import { sum } from '../index';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Rollup으로 테스트 코드 번들링

Rollup을 사용하여 테스트 코드를 번들링하려면 rollup.config.js에 플러그인을 추가해야 합니다.

import typescript from 'rollup-plugin-typescript';
import multi from '@rollup/plugin-multi-entry';

export default {
  input: 'src/__tests__/*.test.ts',
  output: {
    file: 'dist/tests-bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript(),
    multi()
  ]
};

위 설정에 따라 src/__tests__ 디렉토리 내의 모든 테스트 파일이 번들링되어 dist/tests-bundle.js 파일로 생성됩니다.

이제 Rollup을 실행하여 번들링된 테스트 코드를 확인할 수 있습니다.

이렇게 함으로써 Rollup과 타입스크립트를 함께 사용하여 테스트 코드를 작성하고 번들링하는 방법에 대해 알아보았습니다. 함께 사용함으로써 모듈 번들링과 타입 안정성을 동시에 확보할 수 있습니다.