[React] React Testing Library

Create React App로 리액트 앱을 생성하면 기본적으로 테스팅 할 때 React Testing Library를 사용한다.

 

React Testing Library

• React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.
• DOM Testing Library는 Dom Node를 테스트하기 위한 가벼운 솔루션이다.
• Create React App으로 생성된 프로젝트는 즉시 React Testing Library를 지원한다. 그렇지 않은 경우 다음과 같이 npm을 통해 추가할 수 있다.

npm install --save-dev @testing-library/react

 

리액트 컴포넌트를 테스트하는 가벼운 솔루션

React Testing Library는 에어비앤비에서 만든 Enzyme을 대처하는 솔루션이다. Enzyme이 구성 요소의 구현 세부 정보를 테스트하는 대신 React Testing Library는 개발자를 React 애플리케이션의 사용자 입장에 둔다.

<p>
  Edit <code>src/App.js</code> and save to 
  reload...
</p>;

구현 주도 테스트에서는 위의 UI를 테스트할 때 주로 <p> 태그가 쓰였고 Edit 등의 문자가 들어갔다는것을 테스트한다. 그래서 만약 <p> 태그를 <h2> 태그로 바꾸면 에러가 난다. 하지만 행동 주도 테스트에서는 사용자의 입장에서 테스트 하기에 <p> 태그를 쓰든 <h3> 태그를 쓰든 글을 표현하는 게 중요한 게 아니라 어떤 이벤트를 발생시켰을 때 화면이 어떻게 변화되는지와 같은 테스트가 더 주를 이룬다.