소개

커버리지의 정보를 실시간으로 에디터에 반영할 수 있게 했을 때의 메모.

필자의 환경

yarn

node.js 8.10

nyc 1

atom

테스트 실행 시 커버리지 출력

nyc 설치

yarn add nyc --dev

package.json에 yarn test 런타임 script 작성

package.json

  "scripts": {
    "test": "nyc -r lcovonly -r text mocha --recursive test/unit/**/"
  },

테스트 실행

테스트 실행

yarn test

coverage/ 부하에 커버리지가 출력되게 된다.

λ tree coverage
coverage/
└── lcov.info

맨끝 전시:

소스 코드에 변경 사항이 있을 때마다 테스트 코드 실행

onchange 2 설치

yarn add onchange --dev

이제 코드 변경을 모니터링하고 변경 사항이있을 때마다 테스트를 실행합니다.

onchange lib/**/*.js test/unit/**/*.js -- yarn test

모처럼이므로 yarn 스크립트에 등록합니다.

package.json

  "scripts": {
    "test": "nyc -r lcovonly -r text mocha --recursive test/unit/**/",
    "watch": "onchange lib/**/*.js test/unit/**/*.js -- yarn test"
  },

커버리지 정보를 실시간으로 편집기에 반영

Atom의 확장에는 Coverage Merkers 3라는 것이 있었다.
네이티브 확장이므로 재빌드의 필요가 있지만, 무언가의 확장 package 가 node-gyp 를 사용하고 있는 것 같고, Python 3.x 계이면 빌드에 실패한다. 어쩔 수 없으므로 python 2.7로 전환하여 설치합니다.

pyenv locla 2.7.15
apm install coverage-markers
apm rebuild

Mac의 경우, Opt + Ctrl + O 로 행 단위의 커버리지의 표시/숨기기를 토글할 수 있다. .

Atom 편집기 화면:



테스트 코드가 커버되지 않은 행의 왼쪽에 빨간색 원이 표시됩니다.

참고

htps : // 기주 b. 코 m / is s tanbu ljs / nyc  ↩

htps : // 기주 b. 코 m / 쿠 rd / 온 찬  ↩

htps : // 나중에 m. 이오 / 파 쿠 케이 s / 코 ょ 라게 마 r rs  ↩