React Testing Library & Jest
react testig libraray(이하 RTL) 과 jest 는 테스트 코드를 작성할 때 사용하는 테스트 도구이다. RTL 과 jest 함께 사용해야 한다. 테스트 도구 중에 jest 대신 RTL 을 쓴다(또는 그 반대로)라는 개념이 아니라 함께 사용한다는 개념이 맞다. 왜냐하면 둘의 역할은 다르기 때문이다.
RTL 과 jest 의 역할
RTL 공식 홈페이지에는 다음과 같이 나와있다.
RTL은 Test runner 가 아니다.
Jest 가 Test runner 이다.
RTL 은 Test runner 를 위한 공간(Virtual DOM) 을 제공한다.
다른 말로, 테스트가 필요한 react 컴포넌트를 렌더링 하는 역할을 한다.
example 이라는 컴포넌트에서 버튼을 눌렀을 때 기능이 동작하는지 테스트를 한다고 가정해보면 테스트 하기 위해 example 컴포넌트를 렌더하고, 컴포넌트에서 버튼을 찾는 것이 RTL의 역할이고 버튼이 동작을 테스트하는 것이 jest의 역할이라고 생각하면 될 것 같다.
test code 작성법
기본적으로 테스트는 위의 이미지처럼 코드를 작성한다.
'테스트를 설명합니다.' 부분은 개발자가 현재 진행되는 테스트의 목적이 무엇인지, 어떤 테스트인지 알기위해 작성하는 부분이다. 이는 테스트 실패시 터미널에서 볼 수 있다.
'테스트 코드를 작성합니다.' 부분은 실제로 테스트를 진행하는 코드를 작성하는 부분이다.
test 대신 it, describe 를 사용할 수 있는데
test 가 개별 테스트를 진행한다면 describe 는 테스트들을 그룹화합니다.
it 는 test 와 같습니다.
RTL, find test target
테스트 코드를 작성한다는 것은,
컴포넌트에서 테스트가 필요한 대상을 찾고
그 대상이 예상대로 동작하는지 테스트 해보는 것이다.
컴포넌트 렌더, 테스트 대상 찾기
컴포넌트 코드
테스트 코드
- testing-library/react 에서 render 와 screen 을 import 한다.
- render 메서드를 통해 테스트가 필요한 컴포넌트를 render 한다.
- screen 메서드를 통해 테스트 대상을 찾을 수 있다.
(render가 완료된 가상의 화면(screen) 이라고 생각하면 될 것 같다.)
screen 메서드와 querie 를 함께 사용하여 컴포넌트의 테스트대상을 찾는다.
(예시에서 사용된 getByText 가 쿼리이다.)
Querie
Queries are the methods that Testing Library gives you to find elements on the page.
쿼리는 render가 된 페이지에서 element를(테스트 대상) 찾는 것을 도와준다.
쿼리는 다음과 같은 형태이다.
get(쿼리타입)All(타겟의 수)ByRole(찾는방법, 조건)
쿼리 타입
쿼리타입에는 get, query, find 가 있다.
get
- 조건에 맞는 요소를 찾았을때 query에 일치하는 노드를 반환
- 조건에 맞는 요소를 못 찾았을때 에러를 반환
query
- 조건에 맞는 요소를 찾았을때 query에 일치하는 노드를 반환
- 조건에 맞는 요소를 못 찾았을때 null을 반환
find
- 조건에 맞는 요소를 찾았을때 resolved Promise 반환
- 조건에 맞는 요소를 못 찾았을때 rejected Promise 반환
get과 query 의 경우 조건에 맞는 요소가 없을 경우에 반환하는 값이 다르다. query 를 사용하는 경우는 popover 와 같이 처음엔 보이지 않지만 유저의 액션을 통해 나타나는 경우에 사용할 수 있다.
타켓의 수
타겟이 여러개일 경우엔 'all' 을 사용한다.
getAll, queryAll, findAll
찾는 방법, 조건
주로 byRole 과 byText 을 많이 사용한다.
byRole
getByRole(button, {name: 'text'})
- 테스트 대상에 주어진 role 를 통해 찾는다.(button, checkbox 등)
- 옵션으로 주어진 name 을 활용하여 같은 role 을 가진 대상에서 세분화하여 찾는다.
- role 을 작성할 수 있으나 기본적으로 특정 태그는 role을 가지고 있다.
참고 링크 : https://www.w3.org/TR/html-aria/#docconformance
byText
getByText('해당 텍스트를 가진 대상을 찾는다.')
- '해당 텍스트를 가진 대상을 찾는다.' 와 일치하는 모든 대상을 찾는다.
Jest, test run
테스트 할 대상을 찾았으면 대상이 어떤 동작을 하는지 테스트한다.
expect(대상).matchers('matchers 인자')
expect 는 기대하다라는 테스트 대상을 인자로 받는다.
matchers 는 기대하는 값, 행위라 생각하면 된다.
즉, 대상이 이것을 할 것이다.(matchers) 라고 작성하는 것이며 이게 맞으면 테스트에 통과하고 틀리면 테스트는 실패하게 된다.
- 테스트 대상 testButton 을 찾고 이를 expect의 인자로 넘기다.
- testButton 은 다음에 따라오는 matchers 를 실행(?), 비교해본다.
- 여기서 사용된 matchers 는 'toBeInTheDocument' 이며 이는 테스트 대상(testButton)이 document에 있는지의 여부를 물어본다.
render 가 된 Example 컴포넌트에는 test button(getByRole의 name) 이라는 버튼이(getByRole의 button) 있으므로 이 테스트는 통과하게 된다.
추가. queryByRole 을 컴포넌트에 없는 버튼 찾기.
위의 테스트에선 render 된 Example 컴포넌트에 존재하지 않는 버튼을 찾아 해당 버튼이 컴포넌트에 없는지를 확인하다.(이런 테스트는 아마 하지 않을 것이다.)
- get 이 아닌 query 를 사용하였다.
- get 을 사용한 경우, render된 컴포넌트에 일치하는 대상이 없으므로 테스트에서 에러가 발생하고 테스트는 실패하게 된다.
- matchers(toBeInTheDocument) 에 not 을 붙여 해당 matchers 의 반대되는 개념을 테스트하였다.(document에 존재하지 않는다.)
참고
RTL 공홈 : https://testing-library.com/
