All Articles

리액트 테스팅 1탄


리액트 테스팅

테스트란?

테스트는 우리가 짠 코드가 잘 작동하는지 검증하는 작업입니다. 특정 기능이 잘 작동하는지 확인하려면, 우리는 직접 마우스로 눌러보고, 키보드로 입력해서 우리의 의도대로 잘 작동하는지 직접 확인합니다.

하지만 모든 기능을 사람이 수동으로 하나하나 확인하는 것은 정말 번거로운 일일테죠. 그래서 테스트 자동화라는 작업을 합니다. 테스트 코드를 작성해서 테스트 시스템이 자동으로 확인할 수 있는 것입니다.


테스트 자동화 장점

테스트 자동화는 다른 사람들과 협업을 하는 경우에 큰 도움이 됩니다. 내가 코드 A를 작성하고, 다른 개발자가 코드 B를 작성한 경우에, 내가 어느날 A코드와 B코드를 조금씩 수정했는데, 직접 확인한 결과 모두 잘 동작하는지 알았지만 B코드의 기능의 일부가 고장나있을 수 있습니다. 그걸 미처 캐치하지 못하고 서비스가 배포된다면 치명적인 버그로 사용자가 불편을 겪을 수 있습니다. 그렇기 때문에 테스트 자동화를 해서 자동으로 빠르게 검사를 할 수 있도록 하여 코드가 이전과 똑같이 동작하는지 아니면 고장났는지 쉽게 판단을 할 수 있습니다.

기존의 기능들을 실수로 망가뜨리는 것을 방지할 수 있습니다. 또한 개발하게 될 때 실제 발생할 수 있게 되는 상황에 대하여 미리 정해놓고 그에 맞춰 코드를 작성하게 되면 우리가 실수로 빠뜨릴 수 있는 사항들을 까먹지 않고 잘 챙길 수 있게 됩니다.

코드를 리팩토링 하는 경우에도 정말 도움이 됩니다. 테스트 코드가 존재한다면, 리팩토링 이후에 코드가 이전과 똑같이 동작하는지 검증하는게 매우 쉬어지기 때문에 코드의 질을 향상시키는 것에도 매우 도움이 됩니다.


단위 테스트와 통합 테스트

단위(Unit) 테스트

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

  • 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다.

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

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


통합(Integrated) 테스트

위의 단위 테스트는 각 기능들이 잘 동작하는지 확인하는 테스트라면, 통합 테스트는 기능들이 전체적으로 잘 동작하는지 확인하는 테스트입니다.

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

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

  • 리덕스와 연동된 컨테이너 컴포넌트의 DOM에 특정 이벤트를 발생시켰을 때 우리가 원하는 액션이 잘 디스패치 된다.


단위 테스트는 보통 한 파일만 불러와서 진행하는 반면, 통합 테스트는 여러 요소들을 고려하는 과정에서 여러 파일들을 불러와서 사용하게 될 수 있습니다. 한 파일에 있는 여러 기능들을 함께 사용하는 것도 통합 테스트로 간주됩니다.