RTL Varient, Queries 종류 + jest Matcher

render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있다.

이 쿼리 함수들은 Variant와 Queries의 조합으로 이루어져있다.

 

 

RTL 공식사이트에서는 다음 우선순위에 따라 사용할 것을 권장한다.

1. getByLabelText
2. getByPlaceholderText
3. getByText
4. getByDisplayValue
5. getByAltText
6. getByTitle
7. getByRole
8. getByTestId

( ** 아래 Queries 리스트 순서대로임)

 

Variant

Variant명	기능
getBy	getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다.
getAllBy	getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 하나도 없으면 에러가 발생합니다.
queryBy	queryBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.
queryAllBy	queryAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 존재하지 않아도 에러가 발생하지 않습니다.
findBy	findBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나가 나타날 때 까지 기다렸다가 해당 DOM 을 선택하는 Promise 를 반환합니다. 기본 timeout 인 4500ms 이후에도 나타나지 않으면 에러가 발생합니다.
findAllBy	findBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개가 나타날 때 까지 기다렸다가 해당 DOM 을 선택하는 Promise 를 반환합니다. 기본 timeout 인 4500ms 이후에도 나타나지 않으면 에러가 발생합니다.

 

Queries

Queries명	기능	예시
ByLabelText	<label이 있는 input>의 label 내용으로input 을 선택	<label for="username-input">아이디</label> <input id="username-input"/> const inputNode = getByLabelText('아이디');
ByPlaceholderText	placeholder 값으로 input 및 textarea 를 선택	<input placeholder="아이디"/> const inputNode = getByPlaceholderText("아이디");
ByText	엘리먼트가 가지고 있는 text 값으로 DOM을 선택	<div>Hello World!</div> const div = getByText("Hello World!") 또는 (정규식) const div = getByText(/^Hello/)
ByDisplayValue	input, textarea, select가 지니고 있는 현재 값을 가지고 엘리먼트를 선택	<input value="text">; const inputNode = getByDisplayValue('text')
ByAltText	alt속성을 가지고 있는 엘리먼트(주로 img)를 선택	<img src="/abc.png" alt="awesome image"/>; const imgNode = getByAltText('awesome image')
ByTitle	title 속성을 가지고 있는 DOM 혹은 title 엘리먼트를 지니고 있는 SVG를 선택	<span title="React">리액트</span> <svg><title>Delete</title></svg> const spanNode = getByTitle('React') const svgNode = getByTitle('Delete')
ByRole	특정 role 값을 지니고 있는 엘리먼트 선택	<span role="button"></span> const spanNode = getByRole('button')
ByTestId	다른 방법으로 선택하지 못할 때 사용.. --->> testid를 달아서 선택함.	<div data-testid="commondiv"></div> const divNode = getByTestId('commondiv')

 

 

 

 

참고사이트

velog.io/@velopert/react-testing-library

react-testing-library 를 사용한 리액트 컴포넌트 테스트

 

 

jest 메소드 - 공식홈페이지

jestjs.io/docs/expect

 

tobeNull() 같은 메소드를 matcher 라고 한다.

자주쓰는 매쳐 정리

grownfresh.tistory.com/200