React Testing Library Query 우선순위

CGH96·2023년 2월 3일
0

testing

목록 보기
1/3

공식문서를 번역한 글입니다.

1. 누구나 접근 가능한 쿼리

마우스를 사용하고 화면을 시각적으로 보며 스크린 리더와 같은 보조 기술(assistive technology)를 사용하는 사람이라면 누구나 접근 가능.

1) getByRole

getByRole은 모든 요소들에 쿼리하기 위해 사용된다.
예) `getByRole('button', {name: /submit/i})
role에 대한 정의

2) getByLabelTest

form필드에서만 사용된다. 하지만 사용자들이 보통 이런 요소들을 우선적으로 찾기 때문에 최우선적으로 작성되어야 한다.

3) getByPlaceholderText

placeholderlabel을 대체할 수 없다. 하지만 placeholder만 존재한다면 이걸 사용해야 한다.

4) getByText

Form밖의 텍스트들은 사용자가 요소를 찾는 주요한 방법이다. 이 방법을 사용하여 대화형이 아닌 요소들(div, span, p ...)를 찾을 수 있다.

5) getByDisplayValue

form의 현재 값은 값이 채워진 페이지를 탐색할 때 유용할 수 있다.



2. Semantic Queries

HTML5 및 ARIA 호환 selector. 이러한 속성과 상호 작용하는 사용자 경험은 브라우저와 보조 기술에 따라 크게 다르다.

1) getByAltText: 요소가 alt 텍스트('img', 'area', inputcustom elements)를 지원하는 요소인 경우 이를 사용하여 해당 요소를 찾을 수 있다.

2) getByTitle: title속성은 screenreader에서 일관성 있게 읽히지 않는다. 그리고 이 title속성은 눈이 보이는 사용자들에게는 표지되지 않는것이 default이다.



3. TEST IDs

getByTestId: 사용자는 TEST ID를 보거나 들을 수 없다. TEST ID는 role이나 text로 일치할 수 없거나 의미가 없는 경우(ex: 텍트스가 동적으로 변하는 경우)에 권장된다.

0개의 댓글