2019년 리액트 테스팅 레시피

이번 튜토리얼에서는 리액트 프로젝트에서 TDD (Test Driven Development·테스트 주도 개발)을 하는 방법에 대하여 알아보겠습니다. TDD 를 쉽게 표현해내자면, 테스트를 먼저 만들고 해당 테스트들을 통과시키기 위하여 코드를 작성하는 것 입니다.

테스트란?

테스트란, 해당 코드가 잘 작동하는 것을 검증하는 것을 의미합니다. 우리는 어떤 기능이 잘 작동하는지 확인하기 위해서 직접 마우스로 눌러보고 키보드로 입력해서 우리가 의도하는대로 잘 작동하는지 확인 할 수 있습니다. 하지만 프로젝트의 모든 기능에 대하여 사람이 수동으로 하나하나 확인하는 것은 정말 번거로운 일입니다. 그래서 우리는 테스트 자동화라는 작업을 합니다. 사람이 직접 확인을 하는 것이 아니라 테스트를 하는 코드를 작성해서 테스트 시스템이 자동으로 확인을 해줄 수 있게 해주는 것이죠.

테스트 자동화를 함으로서 어떤 이점을 얻을 수 있을까요? 만약 여러분들이 프로젝트를 다른 사람들과 협업을 하게 되는 경우 테스트 코드를 작성하는 것은 매우 큰 도움을 줍니다. 예를들어 어러분이 코드 A 를 작성하고 다른 개발자가 코드 B 를 작성했다고 개발해봅시다. 어느 날 여러분이 코드를 수정하면서 A 코드와 B 코드를 조금씩 건들였는데, 여러분이 직접 확인 할때는 모두 잘 작동하는지 알았는데 알고보니 여러분이 사소한 실수를 해서 B 코드가 고장나버렸습니다. 그런데 그걸 캐치하지 못하고 서비스가 배포되어 치명적인 버그가 있는 상태로 사용자에게 제공되었다고 가정해봅시다. 매우 안타까운 일이죠? 만약 우리가 테스트 자동화를 했더라면 우리가 준비해놓은 상황에 대하여 자동으로 빠르게 검사를 해주기 때문에 코드가 고장났는지 고장나지 않았는지 확인 할 수 있기에 이런 일을 사전에 방지 할 수 있습니다.

하지만, 테스트 코드를 작성한다고 해서 우리가 100% 의 실수를 잡을 수 있는 건 아닙니다. 정말 예기치 못한 상황이여서 테스트 자동화를 통하여 제대로 실수를 못잡아 낼 수도 있겠죠. 그런 상황이 발생하게 된다면, 해당 상황에 맞춘 테스트 코드를 추가해주면 됩니다. 그렇게 하면, 미래에 동일한 실수를 하는 것을 완벽히 방지 할 수 있다는 큰 장점이 있고, 이를 통해 우리가 작성하는 코드가 더욱 견고해질 수 있게 됩니다.

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

유닛 테스트와 통합 테스트

테스트 코드는 크게 두 종류로 나뉘어 질 수 있습니다.

첫번째는 유닛 테스트 입니다. 유닛 테스트는 아주 조그마한 단위로 작성됩니다. 한번 유닛 테스트들의 예시를 확인해볼까요?

• 컴포넌트가 잘 렌더링 된다.
• 컴포넌트의 특정 함수를 실행하면 state 가 우리가 원하는 형태로 바뀐다.
• 리덕스의 액션 생성 함수가 액션 객체를 잘 만들어낸다.
• 리덕스의 리듀서에 상태와 액션 객체를 넣어서 호출 했을 때 원하는대로 새 상태를 만들어준다.

두번째는 통합 테스트입니다. 유닛 테스트는 기능을 아주 작게 쪼개서 테스트 하는 반면에 통합 테스트는 여러 기능들을 함께 사용하여 프로젝트가 정말 잘 작동하는지 확인합니다.

한번 통합 테스트의 예시를 확인해봅시다.

• 여러 컴포넌트들을 렌더링하고, 서로 상호작용을 잘 하고있다.
• 실제 DOM 이벤트를 발생 시켰을 때 UI 에 우리가 원하는 변화가 발생한다.
• 리덕스와 연동된 컨테이너 컴포넌트의 DOM 에 특정 이벤트를 발생시켰을 때 우리가 원하는 액션이 디스패치 된다.

서로간의 차이는 간단합니다. 유닛 테스트는 하나에 초점을 둔다면 통합 테스트는 이름이 그러하듯 여러 요소들을 고려하여 작성합니다.