React Testing Library
- RTL(React Testing Library)은 세부적인 구현 사항보다 실제 사용자 경험과 유사한 방식의 테스트를 작성하길 권고한다.
- 어떤 결과가 나와야 하는지, 최종적으로 유저가 어떤 UI를 볼 수 있어야 하는지에 초점을 둔다.
- CRA로 React 프로젝트를 만들었을 경우, 기본적으로 내장되어 있다.
- RTL은 Jest를 포함한다.
-Jest: 자바스크립트 테스팅 프레임워크.
-RTL: Jest + React 컴포넌트 test util 제공. 리액트의 동작을 Jest만으로 테스트하기에는 어려움이 있어, UI를 렌더링하는 부분을 책임지는 react-dom 라이브러리에서 제공해주는 기능과 결합하여 테스트를 수행해야 한다. 렌더링, 요소 접근의 기능을 수행.
사용하기
describe: 같은 맥락의 테스트들을 그룹화.it: 개별 테스트를 수행.test메서드와 동일.render: 테스트를 위해 특정 컴포넌트를 jsdom에 렌더링.
Queries
쿼리는 엘리먼트를 찾기 위한 메소드이다.
-
쿼리 타입
-get(All)By: 동기적. 타겟을 찾지 못할 시 에러.
-query(All)By: 동기적. 타겟을 찾지 못할 시null.
-find(All)By: 비동기적.Promise를 반환하고 타겟을 찾지 못할 시reject된다. -
타겟 유형:
getByRole,getByLabelText,getByPlaceholderText,getByText...
Firing Events
얻어온 타겟을 이용해 이벤트를 발동시킨다.
fireEvent(node: HTMLElement, event: Event): 문제는 브라우저가 일반적으로 하나의 인터랙션에 대해 하나 이상의 이벤트를 트리거 한다는 것.userEvent: 권장. 내부적으로fireEvent를 사용하며 실제 유저 행동과 흡사한 기능 제공. 구체적인 이벤트 대신 유저 인터렉션을 묘사하게 한다. 브라우저에서 유저 인터렉션이 하는 것처럼 DOM을 조작한다.
Assertion
expect: 유효성 검증.
비동기적인 코드 테스트
axios, fetch 등을 사용할 때 가독성을 위해 find 메서드를 사용.
- FE에서 테스트를 할 때에는
api 응답 결과에 따라 컴포넌트가 어떻게 반응하는지에 초점을 둘 것! - 로딩 중일 경우 '로딩 중' 컴포넌트가 잘 나타나는지
- 데이터 로드가 완료되었을 경우 해당 컴포넌트가 잘 나타나는지
참고
