[React] RTL의 screen 객체가 가진 쿼리 메서드(query Methods)

screen 객체

screen은 React Testing Library(RTL)의 주요 객체 중 하나입니다. 테스트 대상이 되는 컴포넌트를 가리키는 역할을 합니다. screen 객체는 DOM 요소에 접근하고, 요소를 검색하고, 상태를 확인하는 데 사용됩니다.

 

screen 객체의 주요 메서드 중 하나가 "query" 메서드인데요! screen.query 메서드는 주어진 선택자를 사용하여 DOM에서 요소를 찾습니다. 

 

→ 요소가 존재하지 않으면 null

→ 요소를 찾으면 해당 요소 return

 

이를 통해 테스트에서 화면에 특정 요소가 있는지 확인하거나 상태를 검증할 수 있는 것입니다!

 

React Testing Library의 screen 객체에는 다양한 메서드가 있으며, 필요에 따라 적절한 메서드를 사용하여 테스트를 작성할 수 있습니다. 이번 글에서는 우선으로 사용할 쿼리들에 대해 알아보려고 합니다 :)

 

command[All]ByQueryType

command

✔️ get : 요소가 DOM에 있을 것을 expect

✔️ query : 요소가 DOM에 없을 것을 expect 

✔️ find : 요소가 비동기적으로 나타날 경우를 expect

[All]

✔️ 포함O : 하나 이상의 매치를 expect하는 경우, 매처(Matcher)를 이용해 전체 배열을 얻을 수 있음  

✔️ 포함X : 하나의 매치만 expect하는 경우

QueryType

QueryType은 무엇으로 검색을 하는지를 의미합니다.

✔️ Role : 코드의 접근성을 보장하기 위해 가장 선호되는 방법

✔️ AltText : 이미지를 찾기 위한 방법

✔️ Text : 요소를 디스플레이하기 위한 방법. 특정한 역할이 없는, 비상호작용적인 디스플레이 요소에 대해 사용하기도

✔️ PlaceholderText, LabelText, DisplayValue : Form 요소를 찾기 위한 방법

 

이들을 섞어서 사용하면 됩니다. 예를 들어 getAllByText, 혹은 findByAltText, queryAllByLabelText로 사용하는 식이죠! 이런 식으로 DOM에서 찾고자 하는 내용에 가장 적절한 방식으로 섞어서 사용하는 겁니다!

 

만약 Document에서 어떤 문장을 찾는다고 한다면 아래와 같겠죠?

const termsAndConditions = screen.getByText(/terms and conditions/i);

 

공식 문서에는

공식 문서에는 다양한 조합들이 소개되어 있기도 합니다. 위 조합이 무엇이든 관련 내용이 정리되어 있습니다. 무엇을 반환할지, 오류를 발생시킬지 등의 내용이 있습니다.

https://testing-library.com/docs/queries/about/

About Queries | Testing Library

https://testing-library.com/docs/react-testing-library/cheatsheet/

Cheatsheet | Testing Library

https://testing-library.com/docs/queries/about/#priority

About Queries | Testing Library