작성한 코드를 '테스트'하는 코드를 작성(!)하자!
React에 초점을 맞춰 Automated Testing의 세계로 뛰어들어 보자! 🏊🏻♂️
알아보게 될 것들
1. 테스팅(Testing)이란 정확히 무엇일까? 왜 하는 것일까?
2. Unit Test를 이해해보자
3. 리액트 컴포넌트를 테스트하고 build해보자
'Testing'이란?
-
Manual(수동) Testing
작성한 코드를 먼저 브라우저상에서 확인하고 테스트 하는 것(언제나 그렇듯).
이 단계에서 보게 되는 것이 결국 사용자가 경험하게 되는 결과물이기에
아주 중요한 과정임은 말할 것도 없다.하지만 이런 manual testing은 오류가 발생하기 쉽다.
복잡한 작업물(여러개의 pages, features) 위에 새로운 feature를 추가하거나
기존 로직을 변경하게 된다면, 모든 경우의 수를 테스트 해보지 않는 이상
버그를 잡아내기는 쉽지 않다.
(그리고 그렇게 적어내려간 나의 코드 한줄이 App breaker가 되고..)
-
Automated(자동) Testing
그렇기 때문에 우리는 Automated Testing을 한다😃
그렇다고 수동 테스트가 대체되는 것은 아니다. Manual testing는 기본적으로 행해져야할 중요한 절차이고, automated testing은 추가적인 작업의 개념(이지만 표준절차)이다.Automated testing을 통해 app의 개별 요소에 대한 테스트 진행은 물론 결과적으로 모든 요소(전체 app)를 한번에 테스트 해 볼 수 있게 된다.
그렇기 때문에..
Manual Testing과 Automated Testing을 함께 진행하면
에러를 일찍 알아챌 수 있고, App을 위한 더 나은 코드 작성이 가능하다.
더 본격적으로 알아보기 전에 Automated Test의 종류에 대해 이해해 보도록 하자.
첫 번째, Unit Test(단위 테스트)
가장 작은 단위에 대한 테스트를 작성하는 것 (e.g) Functions, components..
결과적으로 Unit test는 제일 기본적이고 중요한 테스트이며, 프로젝트는 보통 많은 Unit test를 가지게 된다.
모든 개별 단위를 테스트 하여 문제가 없다면 전체 app도 이상 없이 작동된다는 개념이다.
두 번째, Integration Test(통합 테스트)
(하지만 Unit test만으로 방심할 순 없지)
전체 app이 실제로(정말) 문제가 없는지 확인하기 위해 Integration Test를 하게 된다. 모든 단위(unit)을 모아 통합적으로 테스트를 하는 것이다.
여러 개의 구성 요소를 조합하여도 의도대로 잘 작동을 하는지 확인하는 작업이다.
세 번째, End-to-End(e2e) Test
사용자가 App을 사용하며 경험하게 될 전체적인 workflow를 테스트한다.
(e.g) 사용자가 로그인하여 특정 페이지로 이동..
하지만 Unit test나 Integration test만큼 수가 많아지지는 않는다.
위의 두가지 테스트에서 App이 잘 작동한다면, 전체적으로도 문제 없이 구동된다고 확신할 수 있기 때문이다. (그리고 Unit/Integration 과정이 상대적으로 test하기도 쉽다)
그렇다면 테스트 코드는 어디에 작성하고, 어떻게 실행시킬까?
이를 위해서는 추가적인 tool과 setup이 필요하다.
이와 관련해서는 앞으로 리액트에 집중하여, 단위테스트 위주로 알아보도록 하겠다.
Tools
테스트를 위한 여러 tool들이 존재하지만, 앞으로 알아볼 내용에서는 아래를 사용하도록 한다.
- 테스트 결과를 확인하고 그에 따른 성공/실패 여부 판단 : Jest
- React app(및 component)를 Automated Test와 상호 작용시킴(클릭, 입력 등의 실제 사용자 이벤트를 쉽게 시뮬레이션 가능) : React Testing Library
위 두가지는 create-react-app으로 프로젝트를 생성한다면 자동적으로 setup되어 있다!
넘어가기 전에 아래의 내용도 살펴보면 도움이 될 듯 하다.
왜 React Testing Library인가?
...(중략)
과거에는 React 컴포넌트를 테스트하기 위해 Enzyme을 사용했을 수 있다. React Testing Library가 Enzyme과 다른 점은 테스트를 렌더링 할 때 React 컴포넌트의 인스턴스가 아닌 실제 DOM 노드를 사용한다는 점이다.
이건 사용자가 웹 브라우저에서 애플리케이션을 실행하는 실제 환경과 유사한 환경에서 테스트 케이스가 실행된다는 것을 의미한다. 테스트 환경이 사용자가 애플리케이션을 사용하는 환경과 비슷할수록 테스트를 더욱 신뢰할 수 있다.
[참고] https://ui.toast.com/weekly-pick/ko_20210630
다음 글에서는 실제로 테스트를 실행해보도록 하겠다...!
