[React] React Testing Library (RTL)에 대해 알아보자

React Testing Library(RTL) 소개

React Testing Library는 세부적인 구현 사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것은 권고합니다. 예를 들어 <div>Hello world</div> 라는 코드가 있다면 RTL은 <div> 태그를 사용하는지보다 Hello world 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 구현보다는 기능에 초점을 맞춘 테스트 방식이라고 할 수 있습니다 :)

RTL은 이름 그대로 React 컴포넌트를 테스트 하기 위해 만들어진 도구이기 때문에, 기본적으로 CRA에 내장되어 있습니다.

 

RTL의 역할

- 테스트를 위한 가상 DOM을 생성

- DOM과 상호 작용하기 위한 유틸리티도 제공

- 브라우저 없이도 테스트를 가능하도록

 

테스트 유형

✔️ 유닛 테스트(Unit Testing)

보통 함수나 별개의 React 컴포넌트 코드의 한 유닛 혹은 단위를 테스트하는 것입니다. 다만, 한 유닛이 다른 코드의 유닛과 상호 작용하는 것은 테스트하지 않습니다.

✔️ 통합 테스트(Integration Testing)

통합 테스트는 여러 유닛이 함께 작동하는 여러 유닛이 함께 작동하는 방식을 테스트해서 유닛 간의 상호 작용을 테스트하는 겁니다. 예를 들면 컴포넌트 간의 상호작용을 테스트하거나 마이크로 서비스 간의 상호 작용을 테스트합니다.

✔️ 기능 테스트(Functional Testing)

기능 테스트는 소프트웨어의 특정 기능을 테스트하는 겁니다. 헷갈릴 수 있는게 function은 영어로 함수에서 입력값을 취하고 출력값을 제공하는 소프트웨어 단위(Unit)를 의미할 수 있고 동작을 의미할 수도 있는데 이 경우에는 동작과 관련한 의미에 해당합니다. 특정 코드 함수가 아닌 소프트웨어의 일반적인 동작을 의미합니다. 여기서 일반적인 동작이라고 한다면, 데이터를 폼에 입력하고 제출을 클릭하면 소프트웨어가 특정 테스트 세트로 바르게 작동하는 기능을 확인해야 합니다. 여러 유닛이 있는 통합 테스트일 수도 있지만 유닛 테스트인 기능 테스트일 수도 있습니다. 입력란에 잘못된 데이터를 입력하면 빨갛게 변하는지 보는 테스트일 수도 있죠! 유닛 테스트에 가깝지만 여전히 기능 테스트입니다. 기능 테스트의 개념은 코드가 아닌 동작을 테스트하는 것입니다.

✔️ E2E 테스트(End to End Testing)

이 테스트는 실제 브라우저가 필요하고 애플리케이션이 연결된 서버가 필요합니다.  보통 Cypress나 Selenium과 같은 특별한 도구가 필요합니다. 그리고 이 테스트는 RTL을 위해 설계된 테스트는 아닙니다. 

 

➕ 기능(Functional) 테스트 vs 유닛(Unit) 테스트

유닛 테스트

1. 격리

유닛 테스트는 테스트를 최대한 격리합니다. 그래서 함수나 컴포넌트를 테스트할 때 의존성을 표시합니다. 즉, 다른 의존성이 있거나 컴포넌트에 의존하는 다른 함수가 있으면 실제 버전 대신 테스트 버전을 사용합니다. 따라서 문제가 발생하거나 테스트에 실패 시 생태계의 다른 어떤 것이 아니라 테스트에 실패하게 만드는 특정 유닛이 문제인 것입니다.

⭐ 그래서 격리된 유닛에서 실패를 쉽고 정확하게 파악할 수 있다.

😵‍💫 사용자가 소프트웨어와 상호 작용하는 방식과 거리가 멀어, 상호 작용하는데 문제가 없어도 테스트에 실패할 수 있습니다.

😵‍💫 리팩토링으로 실패할 가능성도 있다. 보통 유닛 테스트로 소프트웨어어가 어떻게 작성됐는지 테스트하기 때문에 작성 방식을 변경하면(리팩토링) 동작이 변경되지 않아도 테스트에 실패할 수 있습니다.

기능 테스트

기능 테스트는 테스트하는 특정 동작이나 유저 플로우와 연관된 모든 단위를 포함합니다.

⭐ 사용자가 소프트웨어와 상호 작용하는 방식과 밀접하다. 즉, 테스트에 통과하면 사용자에게 문제가 없고 테스트에 실패하면 사용자에게 문제가 발생할 가능성이 높다는 것을 의미합니다.

⭐ 테스트가 견고하다. 코드 작성 방식을 리팩토링하면 동작이 동일하게 유지되는 한 테스트도 통과할 것입니다.

😵‍💫 디버깅하기 어렵다.  코드가 테스트와 유닛 테스트처럼 밀접하게 연결되어 있지 않아 어떤 부분의 코드가 테스트 실패의 원인인지 정확히 알 수 없습니다.