React Testing Tutorial(4) - RTL Queries

RTL Queries는 React Testing Library (RTL)에서 제공하는 DOM 요소를 선택하고 검증하기 위한 함수들을 의미한다.

RTL은 React 컴포넌트의 UI와 상호작용을 테스트하기 위해서 사용되는 라이브러리로 이 라이브러리의 핵심 기능 중 하나가 queries이다.

RTL에서 제공하는 주요 queries

1. getBy

• 조건에 맞는 단일 요소를 반환, 찾지 못하면 테스트가 실패한다.

// 'submit' 텍스트를 포함하는 요소를 반환
getByText('submit')

2. queryBy

• 조건에 맞는 단일 요소를 반환, 찾지 못하면 'null'을 반환
• 요소가 1개 이상 있을 경우 에러를 발생한다.

// 'submit' 텍스트를 포함하는 요소를 반환하거나 null을 반환
queryByText('submit')

3. findBy

• 비동기적으로 단일 요소를 찾으며, Promise를 반환
• 요소를 찾으면 해당 요소를 반환하고, 찾지 못하면 에러 발생

// 비동기적으로 'submit' 텍스트를 포함하는 요소를 찾는다.
findByText('submit')

4.getAllBy

• 조건에 맞는 모든 요소를 배열로 반환
• 하나도 없을 경우 테스트가 실패한다.

//'submit'텍스트를 포함하는 모든 요소를 배열로 반환
getAllByText('submit')

5. queryAllBy

• 조건에 맞는 모든 요소를 배열로 반환
• 요소가 없으면 빈 배열을 반환

// 'submit'텍스트를 포함하는 모든 요소를 배열로 반환
// 없으면 []
queryAllByText('submit')

6. findAllBy

• 비동기적으로 조건에 맞는 모든 요소를 배열로 반환한다.
• Promise를 반환한다.

// 비동기적으로 'submit'텍스트를 포함하는 모든 요소를 반환
findAllByText('submit')

실제 사용하기

실제 쿼리를 형성하기 위해서는 예시에서 본 것처럼 접미사를 포함하여 작성해야 한다.

접미사는 Role, LabelText, PlaceHolderText, Text, DisplayValue, AltText, Title, TestId 가 있다.

접미사를 포함한 예시

getByRole()
queryByLabelText()
findByPlaceholderText()
getAllbyText()
queryByDisplayValue()
findAllByAltText()
getByTitle()
getByTestId()

 

getByRole() queryByLabelText() findByPlaceholderText() getAllbyText() queryByDisplayValue() findAllByAltText() getByTitle() getByTestId()