CI 환경과 마찬가지로 Coveralls도 리액트 컴포넌트 테스트를 할 때 필수는 아닙니다. Coveralls는 애플리케이션의 테스트 커버리지를 표시할 때 사용됩니다. 우리가 만든 리액트 애플리케이션의 테스트 커버리지를 어떻게 표시하는지 한번 시도해 보겠습니다. 먼저 Github 계정을 이용하여 Coveralls.io에 가입합니다 그리고 필요한 Github 저장소를 토글하여 동기화합니다.
그리고 'Details' 버튼을 누른 다음 repo_token 을 복사합니다. 보통은 이런 비밀 토큰을 바로 공개 프로젝트에 드러내고 싶진 않으실테니 Travis CI의 대시보드에서 저장소를 찾아 토큰을 추가합니다.
CI 설정에서 환경변수를 등록할 수 있습니다. coveralls_repo_token 이라는 이름으로 등록해줍니다.
이제 프로젝트의 설정을 변경해주면 됩니다. 맨 처음 coveralls 라이브러리를 개발 의존성으로 추가합니다.
npm install --save-dev coveralls
다음에 package.json 에 coveralls를 실행하는 스크립트를 추가합니다.
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js",
"test:unit": "mocha --require babel-core/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles 'src/**/*.spec.js'",
"test:unit:watch": "npm run test:unit -- --watch",
"test:snapshot": "jest --config ./test/jest.config.json",
"test:snapshot:watch": "npm run test:snapshot -- --watch",
"coveralls": "cat ./src/coverage/lcov.info | node node_modules/.bin/coveralls"
},세 번째로 Travis CI 설정을 바꿔서 coveralls.io 대시보드에 커버리지를 표시하도록 만듭니다. (역주: 튜토리얼에서는 Node.js 버전을 stable 로 지정하였지만, 튜토리얼 작성 시점과 달리 현재 안정화 버전은 10.1.0 입니다. 하지만 coveralls 패키지는 현재 노드 버전 10을 지원하지 않기 때문에 버전을 직접 고정해주시는게 좋습니다.)
language: node_js
node_js:
- 8.11.1
install:
- npm install
script:
- npm run test:unit -- --coverage && npm run test:snapshot -- --coverage && npm run test:cypress
after_script:
- COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls다 됐습니다. 변경 사항을 Github 저장소로 푸시하시면 빌드가 끝나고 coveralls.io 대시보드에 테스트 커버리지를 확인하실 수 있습니다.
커버리지가 생각보다 높진 않다는 것을 보실 수 있는데요. 테스트를 더 작성하여 커버리지를 높일 지는 하시기 나름입니다.
Travis CI의 뱃지를 추가할 때와 마찬가지로 Coveralls도 멋진 뱃지를 추가할 수 있습니다. coveralls.io 대시보드에 있는 뱃지를 클릭하여 추가하는 코드를 확인하실 수 있습니다. 이 코드도 README.md 파일에 추가합니다.
# React Application Test Example
[](https://coveralls.io/github/adhrinae/react-application-test-example?branch=master)저장소 주소가 제대로 되어있는지 다시 확인해주세요. 이렇게 마지막 과정으로 리액트 테스팅 환경에서 커버리지까지 확인해볼 수 있었습니다. 지금까지 작성한 예제보다 더 높은 테스트 커버리지를 노려보세요 :)
드디어 기나긴 리액트 테스팅 튜토리얼을 마칩니다. 여러분이 직접 자신만의 리액트 테스팅 환경을 구축하고, 첫 테스트를 작성한 뒤에 CI를 구축하여 배포 전에 애플리케이션의 안정성을 확인해 보는 방법을 배우셨길 바랍니다. 이번 튜토리얼의 예제 전체는 이 저장소에서 확인하실 수 있습니다. 한마디 더 말씀드리자면, 앞서 보신 간단한 테스트 패턴들은 리액트 애플리케이션 테스트를 작성할 때 짜증을 유발하기보다 더 습관에 가깝게 작성할 수 있도록 도우리라 생각합니다. 당장 여러분의 애플리케이션에 테스트 몇개 작성하는 것도 크게 어렵지 않을 겁니다. 리액트 애플리케이션 테스팅을 할 때 또 다른 팁이 있으시다면 언제든지 댓글로 의견을 남겨주세요. 읽어주셔서 고맙습니다 :)
처음 튜토리얼이 올라오고 원 저자인 Robin에게 허락을 받은 뒤 저장소를 만들고, 최종 결과물을 내기까지 거의 1.5개월이 걸렸습니다. 아무리 바쁜 나날을 보냈다 하더라도 조금은 더 빨리 마무리 할 수 있었으리라 하는 아쉬움이 있네요.
테스팅에 대해 기존에 여러 글을 번역했습니다만, 조금 더 밑바닥부터 설정하는 방법에 초점을 맞춘 글을 번역하거나 작성하진 못했습니다. 마침 이 글이 그 부분에서 크게 도움이 된다고 생각하여 번역을 진행했고, 저도 번역 과정에서 많은 내용을 공부할 수 있었습니다.
개인적으로 Mocha + Chai 설정을 하시기 보다 바로 Jest 설정을 하는 방법부터 진행하시는걸 추천하긴 합니다. 요즘 어지간해서는 Jest로 테스트 설정을 하니까요. 다만 이 튜토리얼은 Jest를 스냅샷 테스트하는데만 사용합니다. 공식 문서등을 참고해서 전반적인 테스트 설정하는 법을 보시는게 좋습니다.
컴포넌트를 테스트하는 일은 생각보다 복잡하거나 어려울 수 있습니다. 그래서 보통 스냅샷 테스트를 남발하는 경향이 있는데, 애플리케이션의 복잡성이 늘어날 수록 조금 더 구체적인 테스트를 작성하는게 도움이 되리라 생각합니다. 하지만 꾸준히 관리하는 스냅샷 테스트를 가지고 있는 프로젝트는 아예 테스트가 없는 프로젝트보단 확실히 낫겠지요.
그럼 앞으로도 테스트와 함께 버그 적은 애플리케이션을 작성하시길 바랍니다 :)