[React] 벨로퍼트와 함께하는 React Testing - 개요

들어가며

바로 어제 테스팅 게시글을 하나 작성했는데, 

이번에 또 좋은 글을 하나 더 발견해서 추가로 작성하려고 한다. 

 

테스트란? 

테스트 개발에서 테스트는 우리가 작성한 코드가 잘 동작하는지 검증하는 것을 의미한다. 

 

솔직히 프론트엔드에서의 테스트는 어제 글을 작성했지만서도 실행해서 직접 확인하면 되는 거니 

필요성을 못느꼇다. 

하지만 테스트를 수동으로 하나하나하는 것은 번거로운 일이다. 이것을 자동화한다면 편하게 검증이

가능하다. 

 

테스트 자동화의 이점 

협업을 하다보면 내가 작성한 코드를 다른 사람이 수정해야하는 경우가 있고, 내가 다른사람의 코드를 

수정하는 경우가 있다. 

규모가 점차 커지면 커질수록 수동으로 확인하는 일에 많은 시간을 사용하거나 특정 상황을 고려하지 

못한 경우 기능의 일부가 고장날 수 있다. 

 

자동화를 사용하면 수정 전과 똑같이 작동하는지 쉽게 판단이 가능하다. 

 

비슷한 의미로 리팩토링을 진행할 때 실수로 빠뜨린 사항도 쉽게 테스트가 가능하다. 

 

유닛 테스트와 통합 테스트 

유닛 테스트

유닛 테스트는 작은 단위로 작성이 된다. 

▶ 컴포넌트가 잘 렌더링된다.

▶ 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다. 

▶ 리덕스의 액션 생성 함수가 액션 객체를 잘 만들어낸다.

▶ 리덕스이 리듀서에 상태와 액션 객체를 넣어서 호출하면 새로운 상태를 잘 만들어준다. 

 

프로젝트의 기능을 잘게 쪼개면 각각의 기능이 잘 동작하는지는 확인 할 수 있다. 

하지만 전체적으로 잘 동작하는지 확인은 불가능 할 수 있다. 

통합 테스트

기능들이 전체적으로 잘 동작하는지 확인하기 위해 사용하는 테스트이다. 

▶ 여러 컴포넌트들을 렌더링하고 서로 상호 작용을 잘 하고 있다. 

▶ DOM 이벤트를 발생 시켰을 때 우리의 UI에 원하는 변화가 잘 발생한다.

▶ 리덕스와 연동된 컨테이너 컴포넌트의 DOM에 특정 이벤트를 발생시켰을 때 우리가 원하는

     액션이 잘 디스패치 된다. 

 

정리

유닛 테스트는 하나에 초점을 둔다면, 통합 테스트는 여러 요소를 고려해서 테스트한다. 

일반적으로 유닛 테스트는 한 파일만 불러와서 진행하지만, 통합 테스트는 필요하면 여러 파일을

불러와서 사용할 수 있다.