[JavaScript][Vue]Istanbul을 vue-cli(3.0)에 적용해서 커버리지테스트하기

Istanbul은 js에서 테스트 커버리지를 제공해준다.

필자 블로그에 Istanbul을 사용하는 예제가 있다.

위 포스팅을 참조하는것도 좋다.

정말 좋은데 그냥 적용시키는 방법은 쉽다. 그런데 vue-cli(3.0에) 함께 사용하고 싶은 경우가 있다.

이 경우 어떻게 사용해야하는지에 대해서 가장 간단한 레이어 까지만 언급하겠다.

프로젝트구조는 위와같다. vue-cli의 mocha를 사용하려면 위처럼 프로젝트를 짜야한다.

tests안에 있는 프로젝트를 자동으로 실행하기 때문이다.

길게 말고 util만 테스트할 것이다.

export default {
    hi() {
        return 'hi';
    },
    sum(a, b) {
        if (a > b) {
            return a + b;
        } else {
            return a + b - 1;
        }
    },
    sub(a, b) {
        return a - b;
    }
};

코드의 구조는 위와 같다.

//util.spec.js
import {
    expect
} from 'chai'

import util from '../../src/util'

describe('util', () => {
    it('function', (done) => {
        const result = 'hi';
        expect(result).to.equal(util.hi());
        done();
    })
    it('sum', (done) => {
        const value1 = 10;
        const value2 = 15;
        const result = 24;
        expect(result).to.equal(util.sum(value1, value2));
        done();
    })
});

테스트코드는 위와 같다. 근데 뭐 중요한건 아니다.

"devDependencies": {
  "@vue/cli-plugin-babel": "^3.9.0",
  "@vue/cli-plugin-e2e-nightwatch": "^3.9.2",
  "@vue/cli-plugin-eslint": "^3.9.0",
  "@vue/cli-plugin-unit-mocha": "^3.9.0",
  "@vue/cli-service": "^3.9.0",
  "babel-eslint": "^10.0.1",
  "babel-plugin-istanbul": "^5.2.0",
  "chai": "^4.2.0",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "nyc": "^14.1.1",
  "vue-template-compiler": "^2.6.10"
},

package.json을 잘 보면 몇가지가 눈에 띈다.

먼저 unit-mocha는 테스트를 위해서 반드시 필요하다. 필자는 mocha를 chai와함께 사용한다.

그 다음 필요한것은 바로 babel-plugin-istanbul과 nyc이다.

nyc는 istanbul을 command line interface를 제공해준다.

// babel.conf.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    "istanbul"
  ]
}

이제 babel엔 플러그인으로 istanbul을 적용해준다.

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "nyc --reporter=lcov --reporter=text vue-cli-service test:unit"
},

package.json에는 test:unit을 조금 바꿔주자. 없으면 위처럼 만들면 되는데 설명을 좀하자면 --reporter를 위처럼 정하면 실행하고 결과를 웹으로 내보내준다.

만약 그게 싫다면 --reporter를 제거하고 사용하면 된다.

그럼 이제 실행해보자.

npm run test:unit

이제 유닛 테스트를 실행하자.

이제 커버리지가 보여진다.

그러면 저런 두개의 폴더가 추가로 생성된다.

이 두 폴더는 .gitignore를 해주는게 좋다.

그러면 위와 같이 생성된다.

이제 index.html을 보도록 하자.

그러면 위처럼 커버리지를 인터넷 상에서 볼 수 있다.