테스트 커버리지(Test Coverage)는 소프트웨어 테스트의 효과를 측정하는 방법 중 하나입니다. Webpack은 JavaScript 프로젝트의 번들링 작업을 도와주는 강력한 도구로, 테스트 커버리지 측정에도 유용하게 사용될 수 있습니다.
Webpack으로 테스트 커버리지를 측정하기 위해 istanbul-instrumenter-loader를 사용할 것입니다. 이 로더는 코드를 instrument(코드에 추적을 위한 추가 로직을 삽입)하는 작업을 수행하고, istanbul 라이브러리를 사용하여 커버리지를 계산합니다.
1. istanbul-instrumenter-loader 설치하기
먼저 프로젝트에 istanbul-instrumenter-loader를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.
npm install istanbul-instrumenter-loader --save-dev
2. Webpack 설정 수정하기
Webpack 설정 파일(webpack.config.js)에서 테스트 커버리지를 측정하기 위한 로더를 추가해야 합니다. 아래의 예제 코드를 참고하여 설정 파일을 수정해주세요.
const path = require('path');
module.exports = {
entry: './src/main.js', // 엔트리 포인트 설정
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // node_modules와 bower_components 폴더는 제외
use: [
{
loader: 'istanbul-instrumenter-loader',
options: {
esModules: true, // ES6 모듈 사용 여부 설정
},
},
'babel-loader',
],
},
],
},
};
3. 테스트 스크립트에 커버리지 측정 명령어 추가하기
테스팅 프레임워크에 따라 커버리지 측정 명령어를 추가해야 합니다. 주로 npm script를 사용하여 테스트 스크립트를 실행하는 방법이 일반적입니다. 아래는 Jest를 사용하는 예제입니다.
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage"
},
위의 예제에서 npm run test:coverage 명령을 실행하면, 테스트 커버리지를 같이 출력해주는 Jest가 실행됩니다.
4. 테스트 커버리지 결과 확인하기
테스트를 실행하고 나면 커버리지 결과를 확인할 수 있습니다. 일반적으로 터미널에서 테스트 결과를 확인할 수도 있고, HTML 레포트를 생성하여 브라우저에서 확인할 수도 있습니다.
테스트 결과에는 각 파일별 커버리지 정보와 전체 커버리지 정보가 포함됩니다.