(번역) React Testing Library

💡 React Testing Library 공식문서의 소개 부분을 발췌하여 번역한 글입니다. https://testing-library.com/docs/react-testing-library/intro

React Testing Library 는 DOM Testing Library 를 기반으로 하고 있으며, API를 추가하여 React 컴포넌트에서 동작합니다.

Create React App 을 통해 생성된 프로젝트는 React Testing Library 를 기본적으로 지원합니다. 만약 그렇지 않은 상황이라면 npm 을 통해 다음과 같이 추가할 수 있습니다.

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

# yarn
yarn add --dev @testing-library/react

문제

React 컴포넌트에 대한 유지보수 가능한 테스트를 작성하고자 할 때, 이 목표의 일환으로 테스트가 컴포넌트의 구현에 대한 세부 정보를 포함하는 것을 피하고 테스트가 의도한 신뢰를 주는데 집중하길 원합니다. 이에 대한 일부로서 컴포넌트 리팩토링(기능을 제외한 구현에 대한 변경)이 테스트를 깨뜨리고 팀을 느리게 만들지 않도록 긴 시간 동안 유지보수 가능한 테스트베이스를 원합니다.

해결

React Testing Library 는 React 컴포넌트를 테스트하는 매우 가벼운 솔루션입니다. 더 나은 테스트 관행을 장려하는 방식으로 react-dom 과 react-dom/test-utils 위에 가벼운 유틸리티 기능을 제공합니다. 주요 가이드 원칙은 다음과 같습니다.

테스트가 소프트웨어 사용방식과 유사할 수록, 더 많은 신뢰를 줄 수 있습니다.

따라서 랜더된 React 컴포넌트 인스턴스를 처리하는 대신 테스트는 실제 DOM 노드에서 작동할 것입니다. 이 라이브러리가 제공하는 유틸리티들은 사용자 행동과 동일한 방식으로 DOM을 쿼리하는 것을 가능하게 합니다. 사용자들이 하는 것처럼 라벨 문자열을 통해 form 요소를 찾거나, 문자열을 통해 링크나 버튼을 찾습니다. 또한 텍스트 컨텐츠와 레이블이 의미가 없거나 실용적이지 않은 요소에 대한 “escape hatch”로서 data-testid를 통해 요소를 찾는 권장된 방법을 제공합니다.

이 라이브러리는 어플리케이션의 접근성을 높이고 사용자가 원하는 방식으로 구성요소를 사용하는 방식에 가까운 테스트를 수행할 수 있도록 하여 테스트를 통해 실제 사용자가 어플리케이션을 사용할 떄 어플리케이션이 작동할 것이라는 확신을 가질 수 있습니다.

이 라이브러리는 Enzyme 을 대체합니다. Enzyme 자체를 사용하여 이러한 지침을 따를 수는 있겠지만, Enzyme 이 제공하는 모든 추가 유틸리티(구현 세부 사항 테스트를 용이하게 하는 유틸리티) 때문에 이를 적용하는 것이 더 어렵습니다.

이 라이브러리에 해당되지 않는 것

1. 테스트 러너 혹은 프레임워크가 아닙니다.
2. 테스트 프레임워크를 한정하지 않습니다. (기본 설정으로 Jest를 권장하지만, 모든 라이브러리에서 작동합니다)

NOTE: 이 라이브러리는 DOM Testing Library 위에 만들어졌습니다.

튜토리얼

이 라이브러리 소개를 담고 있는 What is React Testing Library? 비디오를 보면 좋습니다. 또한 다음의 튜토리얼도 놓치지 마세요.