[javascript] Webpack으로 테스트 코드 번들링하기

29 Nov 2023

javascript

테스트 코드는 소프트웨어 개발에서 매우 중요한 부분입니다. Jest나 Mocha와 같은 테스트 프레임워크를 사용하여 테스트를 작성하고 실행할 수 있습니다. 하지만 테스트 코드를 작성할 때마다 매번 모든 파일을 일일이 로드해야한다는 번거로움이 있습니다. 이러한 문제를 해결하기 위해 Webpack을 사용하여 테스트 코드를 번들로 묶을 수 있습니다. 이번 글에서는 Webpack을 사용하여 자바스크립트 테스트 코드를 번들링하는 방법에 대해 알아보겠습니다.

Webpack 설치하기

먼저, Webpack을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 Webpack을 설치합니다.

npm install webpack --save-dev

Webpack 설정하기

Webpack을 설치했다면, 다음으로 Webpack 설정 파일을 생성해야 합니다. 프로젝트의 루트 디렉토리에 webpack.config.js 파일을 생성하고 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  entry: './src/test.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

위의 설정에서 entry 속성은 테스트 코드의 진입점을 지정하고, output 속성은 번들된 파일의 이름과 경로를 지정합니다.

테스트 코드 작성하기

이제, src/test.js 파일에 테스트 코드를 작성해봅시다. 다음은 간단한 테스트 코드의 예입니다.

const sum = (a, b) => a + b;

test('sum function should return the sum of two numbers', () => {
  expect(sum(1, 2)).toBe(3);
});

테스트 코드 번들링하기

Webpack을 사용하여 테스트 코드를 번들링하려면, 다음 명령어를 실행합니다.

npx webpack

위의 명령어를 실행하면 Webpack이 설정 파일을 읽고 테스트 코드를 번들링하여 dist/bundle.js 파일을 생성합니다.

테스트 실행하기

마지막으로, 번들된 테스트 코드를 실행해봅시다. dist/bundle.js 파일을 HTML 파일에 추가하고, 테스트 실행 스크립트를 추가해주면 됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

페이지를 열면 테스트 결과가 출력됩니다.

이제 당신은 Webpack을 사용하여 테스트 코드를 번들링하고 실행할 수 있습니다. 테스트 코드를 작성할 때마다 Webpack을 사용하여 번들링하면 코드를 로드하는 것에 대한 수고를 덜 수 있습니다.