React Testing Tutorial(5) - getByRole, getByRole option

getByRole

접근성 트리를 통해 요소를 찾아내는 데 사용하는 메서드이다.
사용자가 페이지에서 상호작용 할 수 있는 요소를 찾아내는 데 도움을 준다.

주요 개념

1. 역할 기반 탐색

getByRole은 HTML의 role 속성에 따라 요소를 찾아낸다. 이 role은 스크린 리더와 같은 접근성 도구가 웹 페이지를 해석할 때 사용하는 중요한 속성이다.

2. 일치 기준

기본적으로 역할 기반으로 찾지만 추가적으로 name옵션을 사용하여 요소의 텍스트나 aria-label과 같은 접근성 속성도 검사할 수 있다.

3. 다양한 HTML 요소 탐색

버튼, 링크, 이미지, 체크박스 등 다양한 HTML 요소를 탐색할 수 있다.
<button>, <a>, <input type='checkbox'> 등은 각각 button, link , checkbox와 같은 역할을 한다.

 

'getByRole'을 사용하는 이유

접근성을 테스트하기 위해서 가장 권장되는 메서드이기 때문에 getByRole을 사용한다.
getByRole메서드를 사용하면 접근성 트리를 기반으로 요소를 찾기 때문에 실제 사용자 경험과 가장 가까운 테스트를 작성할 수 있다.

getByRole Option - name

getByRole('textbox')를 통해서 input 태그를 찾을 수 있다.
하지만 테스트하는 요소에서 input과 textarea 2개를 동시에 쓸 경우 테스트에서 실패를 한다.
그 이유는 input과 textarea는 text를 입력할 수 있는 동일한 역할로 인식하기 때문이다.

getByRole은 요소 한 개를 찾는 메서드이기 때문에 여러 요소를 찾게 되면 테스트에서 결과를 실패로 반환한다.

해결하기 위해서

이러한 문제를 해결하기 위해서 getByRole의 옵션 추가로 작성하여 해결할 수 있다.

• name 옵션 이용하기
• ex) getByRole(role, {name: ""})

 

접근 가능한 name

1. label

<label for="username">Username</label>
<input id="username" type="text"/>

이 경우, input 요소의 접근 가능한 이름은 "Username"이다.
대소문자를 구분하기 때문에 주의해서 사용해야 한다.

// pass
getByRole('textbox',{
    name: 'Username'
})

//fail
getByRole('textbox',{
    name:'username'
})

//(정규식을 사용해서 대소구분 없이 사용가능하다 : /username/i)
getByRole('textbox', { 
    name: /username/i   // 정규식 사용, 대소문자 무시
})

2. 버튼의 텍스트 콘텐츠

<button> , <a>, <input type="button"> 과 같은 요소의 텍스트 콘텐츠는 그 요소의 접근 가능한 이름이 된다.

<button>Submit</button>

이 경우, 버튼의 접근 가능한 이름은 "Submit" 이 된다.

getByRole('button', {name:"Submit"})

3. aria-label 속성

aria-label속성은 요소의 접근 가능한 이름을 명시적으로 정의한다.

<input aria-label="Search" type="text" />

이 경우, input 요소의 접근가능한 이름은 "Search"가 된다.

getByRole('textbox', { name: 'Search' });

 

 

getByRole Option - level

<>
    <h1>Job application form</h1>
    <h2>Section 1</h2>
</>

h1~h6의 경우 heading을 이용해서 요소를 찾을 수 있다.

하지만 위에서의 h1~h6는 모두 heading의 역할을 가지고 있기 때문에 구분을 해줘야 한다.

 

이 경우, 사용할 수 있는 option으로 level이라는 것이 있다.

h1~h6까지 차례로 level 1~6이다.

// <h1>Job application form</h1>
getByRole('heading', {
    level:1 
})


// <h2>Section 1</h2>
getByRole('heading', {
    level:2
})

 

여러 가지 options

getByRole에는 위에서 말한 2가지 옵션뿐 아니라 여러 가지가 더 있다.
name, level, hidden, selected, checked...

모두 비슷한 맥락으로 해당 요소를 찾을 수 있도록 도와주는 역할이고 option을 이용해서 더 명확한 요소를 지정할 수 있다는 것을 알고 있으면 될 것 같다.

더 자세한 옵션은 공식문서를 참고하면 된다.

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