종류가 넘 많군
DOM 테스트의 경우 document.body 에서 찾는 것이 일반적이므로, DOM Testing Library 는 document.body 에 미리 바인딩된 쿼리가 들어있는 screen object 를 내보낸다.
Render/Screen
@testing-library/react 의 render 와 비슷하게 동작한다. 다른점이라면 render 함수의 경우 option 값을 이용하여 동작을 제어 할 수 있다.
단순히 검색만 필요한 경우 screen 을 사용 할 수 있다.
Screen.debug
테스트 편의를 위해 debug 메서드를 사용 할 수 있다.
screen.logTestingPlaygroundURL
testing-playground 를 사용하여 디버깅을 할 수 있게 메서드를 지원한다.
ByLabel
getByLabelText, queryByLabelText, getAllByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText
TextMatch 와 일치하거나 요소를 찾고 해당 요소와 관련있는 요소를 찾는다.
screen.getByLabelText(/reg/) 의 경우 reg 에 해당하는 label 을 찾아 줄 것처럼 생겼으나 찾은 label 과 관련있는 요소를 찾는다.
id, for 같은 form 요소를 이용해서도 찾게되는데 form 요소가 아닌 (예를 들면 section 같은) 값들은 무시된다.
selector option 을 이용하여 요소를 특정 할 수 있다.
getByPlaceholder
getByPlaceholderText, queryByPlaceholderText, getAllByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText
TextMatch 와 매칭되는 placeholder 속성을 가지고있는 요소를 찾는다.
getByText
getByText, queryByText, getAllByText, queryAllByText, findByText, findAllByText
TextMatch와 매칭되는 text node 를 가진 요소를 찾는다.
getByAlt
getByAltText, queryByAltText, getAllByAltText, queryAllByAltText, findByAltText, findAllByAltText
TextMatch 와 매칭되는 alt text 를 가진 요소를 찾는다. image, input, area 의 alt 만 유효하다.
getByTitle
getByTitle, queryByTitle, getAllByTitle, queryAllByTitle, findByTitle, findAllByTitle
TextMatch 와 매칭되는 title 속성을 가진 요소를 찾는다.
SVG 의 title 도 찾을 수 있다.
html 의 title 속성을 사용해본 경험이 없는 것 같아 찾아보았다.
html 요소가 title 을 가지고 있다면 마우스를 올렸을 때 title 내용이 툴팁으로 노출된다.
ByDisplayValue
getByDisplayValue, queryByDisplayValue, getAllByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue
TextMatch 와 매칭되는 display value 를 가진 input , textarea , select 를 찾는다.
getByRole
getByRole, queryByRole, getAllByRole, queryAllByRole, findByRole, findAllByRole
역할을 가진 요소를 찾는다.
예를들어 <button/> 의 경우 특별한 설정없이 button 역할을 가진다.
요소들이가진 기본 역할은 아래 링크에서 확인 할 수 있다.
role 및 area-* 속성은 이미 브라우저에 의해 설정되어있기 때문에 따로 설정을 하는것은 권장되지 않는다.
렌더링된 컨텐츠에 동일한 역할을 가진 요소들이 존재 할 때, 접근 가능한(ex. area-label) 이름을 이용하여 요소를 특정 할 수 있다.
단일 요소를 특정하는경우 getByText 보다 getByRole(role, {name: '홍길동'}) 을 사용하는 것이 더 좋다.
hiddenhidden 이 true 인 경우 접근성 트리에서 요소가 제외된다.
이는 테스트 쿼리에서도 마찬가지로 적용된다.
selected
selcetd:true / false 를 설정하여 요소를 필터링 할 수 있다.
checked
checkted: true / false 를 설정하여 요소를 필터링 할 수 있다.
pressed
버튼은 눌린 상태 값을 가질 수 있다. pressed: true / false 를 설정하여 필터링 할 수 있다.
expanded
expanded: true / false 를 설정하여 요소를 필터링 할 수 있다.
queryFallbacks
기본적으로 첫번째 역할을 가지고 찾는다.
대체 역할을 사용하고 싶다면 queryFallbacks: true 를 설정하여 찾을 수 있다.
보통 하나의 요소는 하나의 역할을 가진다.
이런 배경을 가지고 역할 평가시 왼쪽에서 오른쪽순으로 평가된다.
level
heading 역할을 가진 요소는 getByRole('heading') 또는 level 옵션을 사용하여 레벨별로 찾을 수 있다.
보통 level 옵션은 시멘틱 HTML 구성에 의해 결정된다.
ByTestId
getByTestId, queryByTestId, getAllByTestId, queryAllByTestId, findByTestId, findAllByTestId
container.querySelector(`[data-testid=”${yourId}”] 의 축약이다.
byTestId 함수는 기본적으로 data-testId 를 기반으로 동작한다.
소프트웨어의 기본 동작과 같지 않기 때문에, 다른 쿼리들의 사용이 적합하지 않은 경우에만 사용하는 것이 좋다.
DOM 구조, 스타일을 위한 클래스 이름을 기반으로 찾는 것 보다는 testId 를 사용하게 찾는 것이 좋다.
이미 testid 를 프로젝트에서 사용하고 있다면
configure({testIdAttribute: ‘data-my-test-attribute’}) 을 이용하여 오버라이드 할 수 있다.
