4. RTL 이해하기

지금까지 소프트웨어 테스트와 TDD에 대한 일반적인 개념을 살펴보았습니다.

이제 해당 개념들을 기반으로 React에서 수행하는 테스트 방법을 알아보겠습니다.

RTL(React Testing Library) 소개

RTL은 React에서 소프트웨어 테스트 방법론을 적용할 수 있게 도와주는 라이브러리입니다.

RTL을 사용하여 개발자는 다양한 관점의 테스팅을 리액트 기반으로 쉽게 수행할 수 있습니다.

리액트의 동작 원리를 생각해봅시다.

그림2과 같이 개발자가 리액트 컴포넌트를 JSX로 작성하면 JSX는 Babel 등을 통해 트랜스파일링 되고, 최종적으로 번들링 작업을 거쳐 브라우저에 전달됩니다. 브라우저는 번들링된 JS 파일을 읽고 화면에 UI를 출력합니다.

여기서 중요한 점은 JSX 파일로 만들어진 컴포넌트를 브라우저에서 곧바로 읽을 수 없는 것입니다.

이것은 테스트 코드 작성 과정에서 중요하게 생각할 내용입니다.

저희가 테스트 코드를 작성할 대상은 JSX가 아닌 브라우저에서 최종적으로 출력된 DOM입니다. 하지만 IDE에서 있는 컴포넌트는 JSX입니다. 어떻게 하면 테스트를 수행할 수 있을까요?

당장 아래 두 가지 정도의 방법이 떠오릅니다.

위 방법들로도 지난 시간에 살펴본 테스트 방법론을 적용할 수 있겠지만, 문제는 절차가 너무 복잡하고 무엇보다 React 테스트에 어울리지 않은 방법입니다.

그렇다면 RTL에서는 어떻게 이를 해결할까요?

RTL에서는 가상의 DOM을 생성하는 기능을 내장하고 있습니다. 그리고 이 기능을 사용하여 브라우저 없이 리액트 프로젝트를 시뮬레이션 할 수 있습니다.

시뮬레이션되는 DOM안에는 RTL을 통해 window나 document 같은 전역 객체들이 내장되어 있습니다. 그리고 RTL에서 제공하는 다양한 API를 통해 요소를 찾고 조작하는 등 다양한 테스트 동작을 수행할 수 있습니다.

RTL은 테스트를 위한 가상 돔을 생성하고, 상호작용 할 수 있는 함수를 제공하여 브라우저 없이 리액트 테스트를 가능하게 해준다는 것을 알게 되었습니다.

그렇다면 구체적으로 어떤 테스트가 가능할까요?

지난 시간 살펴보았던, 소프트웨어 테스트 방법론을 리액트 테스트로 대입해보면 다음과 같습니다.

유닛 테스트
- 컴포넌트를 단위로 테스트 하는 것 컴포넌트 내부만 테스트하고 다른 컴포넌트와의 상호작용은 테스트 하지 않는다.
통합 테스트
- 여러 컴포넌트들의 상호작용을 테스트
기능 테스트
- 프로그램의 특정 기능을 테스트(코드가 아닌 기능에 중점)
- 예) 회원가입 버튼을 클릭하면 회원이 등록되고 로그인 화면으로 이동한다.
회귀 테스트
- 특정 모듈 개발이 완료되면 이전에 개발된 모듈들도 다시 테스트가 수행된다.

지금까지 RTL을 이해하기 위한 기본적인 내용을 살펴보았습니다.

RTL에 대해 더 구체적으로 알고 싶다면 아래 첨부한 공식사이트에 방문하세요