React Testing Library을 사용하여 테스트2 - Queries

맨날·2021년 5월 8일

React TDD

React Testing Library 사용하기

목록 보기

2/3

쿼리함수란

쿼리함수는 페이지에서 요소를 찾을 수 있도록 도와주는 함수입니다. 쿼리함수의 종류에는 크게 3가지가 존재합니다.

get
query
find

쿼리함수 타입

쿼리 함수는 아래의 타입과 쿼리를 조합하여 요소를 찾습니다.

getBy
- 쿼리에 해당하는 하나의 요소를 반환하며, 요소를 찾지 못할 경우 에러가 발생
queryBy
- 쿼리에 해당하는 하나의 요소를 반환하며, 요소를 찾지 못하면 null을 반환
- 존재하지 않는 요소를 검증할때 유용하게 사용가능
findBy
- 쿼리 실행 후 Promise를 반환
- 요소를 찾은 경우 resolve, 찾지 못하거나 2개이상 찾은 경우 reject
getAllBy, queryAllBy, findAllBy
- 이 3가지 타입은 1개이상의 요소를 찾을 때 사용가능

쿼리 종류	0 Matches	1 Match	> 1 Matches
getBy	Throw error	Return element	Throw error
queryBy	Return null	Return element	Throw error
findBy	Promise	Promise	Promise

쿼리 종류

getByLabelText

getByLabelText는 label의 텍스트 값으로, label과 연결된 input 태그를 찾아줍니다. 그래서 input과 연결되지 않은 label의 text를 사용하면 요소를 찾지 못합니다.

<lable for="id">getByLabelText</label>
<input id="id" />

const input = screen.getByLabelText('getByLabelText');

getByPlaceholderText

getByPlaceholderText는 placeholder 값으로 input 또는 textarea를 찾습니다.

<input placeholder="input password">

const input = screen.getByPlaceholderText('input password');

getByDisplayValue

getByDisplayValue는 input의 form 요소(input, textarea, select)의 현재 값을 기준으로 요소를 찾습니다.

<input value="default-value">

const input = screen.getByDisplayValue('default-value');

getByText

getByText는 요소가 가진 text 값으로 요소를 찾습니다.

<div>getByText</div>

const div = screen.getByText('getByText');

getByAltText

getByAltText는 alt 속성의 값으로 요소를 찾습니다.

<img src="image.png" alt="이미지 입니다.">

const image = screen.getByAltText('이미지 입니다.');

getByTitle

getByTitle는 title 속성의 값으로 요소를 찾습니다.

<div title="TIP">title은 툴팁으로 표시가 되고, 요소에 대한 정보를 나타내줍니다.</div>

const div = screen.getByTitle('TIP');

getByTestId

getByTestId는 요소에 testid 속성값을 부여해서 요소를 찾는 방법입니다. 이 방법은 위의 쿼리로 요소를 찾기 힘든 경우에 차선책으로 사용할 수 있습니다.

다른 쿼리를 사용하여 요소를 찾을 수 있는 경우에는 그 방법을 사용하자!

<div data-testid="testid">Element</div>

const div = screen.getByTestId('testid');

getByRole

getByRole는 role 속성의 값으로 요소를 찾습니다. 직접 role 속성을 지정할 수도 있지만, 기본적으로 role을 가지고 있는 요소도 있습니다.

<button>버튼</button>
<h1>타이틀</h1>
<div role="html"></div>

const button = screen.getByRole('button');
const heading = screen.getByRole('heading');
const div = screen.getByRole('html');

쿼리 좀더 알아보기

지금까지는 쿼리함수를 사용할 때 첫번째 파라미터로 문자열을 사용하였습니다. 문자열 이외에도 정규식, 콜백 함수를 사용할 수도 있습니다.

text 값에 정규식 사용

기본적으로 문자열을 사용하는 경우에는 text값과 완전일치하는 요소만 찾을 수 있습니다.

<div>Hello World!</div>

screen.getByText('Hello World!'); // 정상
screen.getByText('hello wrold'); // Throw Error

정규식을 이용하면 다양한 조건으로 요소를 찾을 수 있습니다.

<div>Hello World!</div>

screen.getByText(/hello/i); // 정상
screen getByText('hello', { exact: false }); // 정상

option으로 { exact: false }을 사용하면 첫번째 파라미터로 문자열을 사용해도 text값이 일부만 일치하는 경우에도 요소를 찾을 수 있습니다. 추가로, 대소문자도 구분하지 하지 않습니다.

콜백함수 사용하기

좀 더 커스텀하게 요소를 찾고 싶은 경우에는 콜백함수를 사용할 수 있습니다. 찾는 요소와 일치하면 true, 일치하지 않으면 false를 반환해주면 됩니다.

getByText((content, element) => {
	return true or false
})

content는 사용하는 쿼리에 따른 content이다.
EX) getByText이면 요소의 text값, getByTitle이면 요소의 title 속성값

<div>16</div>
<div>안녕하세요</div>

const div = getByText((content, element) => {
	return content && content % 4 === 0;
});

Normalizer

요소를 찾을 때 기본적으로 요소의 값에 trim을 적용합니다. 그리고 문자열 사이에 공백이 있을 경우 하나만 적용합니다.

<div>    Hello        World       </div>

const div = screen.getByText('Hello World'); // 정상

만약 trim, 공백 설정을 적용하고 싶지 않은 경우 option값을 사용하면 됩니다.

<div>    Hello        World       </div>

const div = screen.getByText('    Hello        World       ', {
	normalizer: getDefaultNormalizer({
		trim: false,
		collapseWhitespace: false
	})
}); // 정상