테스트 코드가 얼마나 견고하게 작성되어 있고, 어느 부분이 부족한지
한 눈에 쉽게 확인하는 방법이 있다.

소스코드 링크

프로젝트 설정 (추가)

npm i -D nyc

nyc 는 테스트 커버리지를 시각화해주는 툴이다.
단순히 시각화에서 그치지 않고 실제 코드에 대한 진단까지 보여주는 아주 유용한 툴이다.

테스트 커버리지 툴 사용하기

터미널을 열고 다음 명령어를 입력한다.

npx nyc npm test

다음과 같은 화면을 보게 된다.

테스트 커버리지 100% 달성하기

내가 작성한 코드는 전부 성공했지만
소스코드에서 테스트에 포함하지 않은 부분이 존재한다고 알려주고 있다.

src/rest-api.js 파일로 가서 101번 라인으로 가서 확인해보니
PATCH /api/tasks/:id 요청을 처리하는 서비스에서
completed 라는 boolean 타입의 필드를 업데이트 하는 경우에 대한 테스트 코드가 존재하지 않았다.

이를 다음과 같이 수정했다.

// test/rest-api.js
...
describe("Tasks API", function () {
  ...
  
  // * PATCH
  describe("PATCH /api/tasks/:id", function () {
    ...
    
    it("should PATCH a task of specific id including completed property", function (done) {
      const taskId = 1;
      const task = {
        name: "Task 1 patched successfully",
        completed: true,
      };
      chai
        .request(server)
        .patch(`/api/tasks/${taskId}`)
        .send(task)
        .end(function (error, response) {
          expect(response).to.have.status(200);
          expect(response.body).to.be.a("object");
          expect(response.body).to.have.property("id");
          expect(response.body).to.have.property("name");
          expect(response.body).to.have.property("completed");
          expect(response.body).to.have.property("id").to.be.eq(1);
          expect(response.body).to.have.property("completed").to.be.eq(true);
          expect(response.body)
            .to.have.property("name")
            .to.be.eq("Task 1 patched successfully");
          done();
        });
    });
    
    ...
  });
  
  ...
});

위에서 사용한 명령어로 테스트 커버리지를 확인해보면

npx nyc npm test

테스트 커버리지 파일로 추출하기

nyc documentation

nyc에는 테스트 커버리지 분석 결과를 파일로 내보내는 기능이 있다.

먼저 package.json 파일의 scripts 프로퍼티 항목에
test, coverage 두 가지 내용이 있도록 수정한다.

  "scripts": {
    ...
    
    "test": "mocha",
    "coverage": "nyc --reporter=html npm test"
    
    ...
  },

이 부분은 선택사항이지만
.gitignore 파일을 열어서 이 내용을 추가한다.
.nyc_output/, coverage/ 두 개의 폴더는 nyc 를 파일로 추출했을 때 생기는 폴더이다.

.nyc_output/
coverage/

이제 터미널 창을 열어서 다음을 실행한다.

npm run coverage

coverage/index.html 파일을 열어서 확인해보면
다음과 같은 화면을 보게 된다.

여기서 VSCode Live Share Extension 사용하는 것을 추천한다.
안 써도 상관은 없지만
테스트 커버리지 리포트를 새로고침 하지 않아도 실시간으로 업데이트 해서 확인할 수 있다.

현재는 테스트 커버리지가 100% 이므로 특별히 확인할 내용은 없다.
여기서 DELETE 에 대한 Test Suite 를 주석처리 한 후에

npm run coverage

명령어를 실행한 후에
다시 테스트 커버리지 리포트 화면으로 가면
다음과 같이 src 폴더의 테스트 커버리지가 80% 대로 줄어든 걸 확인할 수 있다.

src > rest-api.js
차례대로 클릭하고 들어가면
src/rest-api.js 소스코드가 화면에 펼쳐지게 된다.
맨 밑에 DELETE /api/tasks/:id URL 을 처리하는 서비스 코드로 가 보면 이렇게 표시된 것을 확인할 수 있다.

빨간색으로 표시된 부분이
테스트 코드가 작성되지 않았다는 걸 말해준다.

DELETE 에 대한 테스트 코드를 다시 주석해제, 저장하고
아래 명령어를 다시 실행한다.

npm run coverage

이제는 소스코드 화면이 전부 초록색으로 표시된다.
테스트 커버리지도 다시 100%가 된다.