React Test

React Test

React 개발을 접하면서 가장 신세계이고 귀찮게(?) 느꼈던 것이 테스트 코드 작성입니다. 이전에 C++로 개발할 때는 QA로 넘어가기 전에 미리 작성한 테스트 케이스들을 따라 기본 동작 테스트를 했습니다. 이 과정은 익숙해져도 30분 정도가 소요되고, 사람이 하는 일이다 보니 누락되는 케이스가 발생하는 문제가 있었습니다. 더군다나 QA 넘기기 전인데 기본적인 동작에서 오류가 발생한다면 급하게 처리해야 했기 때문에 골치가 아팠습니다.

그래서 React 개발을 접하면서 테스트 코드가 정말 신세계였습니다. 자동으로 테스트가 가능하고, 매 commit마다 테스트를 할 수 있기 때문에 오류 코드를 미연에 방지할 수 가 있습니다. 문제는 정말 귀찮다는 것입니다. 기능 하나를 구현한다 하면 테스트 코드도 작성해야 하기 때문에 작성할 코드가 2배 이상 늘어납니다. 간혹 라이브러리에 따라 mock 설정까지 해줘야하는 상황이 발생하면 작업 시간이 늘어나기도 합니다. 그래도 안정적인 제품 개발을 위해 테스트 코드는 필수입니다.

테스트 방법론

테스트 코드 작성시 방법론이 두가지로 나뉩니다. 구현 주도 테스트 (Implementation Driven Test), 행위 주도 테스트 (Behavior Driven Test)가 있습니다.

방법론 비교 예시

예시로 두 방법론이 어떻게 다른지 보겠습니다.

<h2 class="title">제목<h2>

"제목"이라는 부분이 화면에 잘 보이고 있는지 테스트하는 상황을 생각해보겠습니다. 만약에 h2가 h3로 변경되는 코드를 작성했을때 방법론에 따라 테스트 결과가 달라지게 됩니다.

구현 주도 방법론에서 테스트 코드를 작성한다면 h2 태그가 생성되었는지 확인할 것입니다. 그런데 h2가 h3로 변경된다면 h2가 없어졌기 때문에 테스트 결과가 FAIL이 됩니다. 행위 주도 방법론에서 테스트 코드를 작성한다면 "제목"이라는 텍스트가 생성되었는지 확인할 것입니다. 사용자가 보는 것은 h2 태그가 아니라 "제목"이라는 텍스트이기 때문입니다. 따라서 h2가 h3로 변경되더라도 텍스트는 그대로이기 때문에 테스트 결과가 PASS가 됩니다.

React 개발을 시작하면서 조사했던 테스트 방법론을 정리해봤습니다. 1년전에 적어둔 내용이라 업데이트가 필요할 수 있습니다. 나중에 여유가 된다면 테스트 코드 작성 주제로도 써보도록 하겠습니다.