RTL 메소드 중 ByRole 작동방식에 대해서...
- RTL에서 제공하는 ByRole 메소드(getByRole, queryByRole, findByRole...)는 기본적으로 접근성 트리를 활용한 요소 접근 방식을 사용하고 있습니다.
- 저희가 사용하는 getByRole 메소드의 경우, 첫 번째 인자로 role. 즉, 역할을 넘기고 두 번째 인자의 옵션에서
name으로 버튼 내부에 있는 실제 노출되는 텍스트를 넘기게 되는데요, 여기서name이 바로 접근 가능한name인accessible name이 됩니다. - byRole이 요소 쿼리를 위해 사용하는 접근성 트리는, 당연하게도 사용자가
실제로 접근할 수 없는 요소들에 대해서 제외하고 있습니다.
접근성 트리에서 제외되는 조건들은 다음과 같습니다.
- 상위 Element 혹은 Element 자체에 다음과 같은 css가 있을 때
display:none, visibility:hidden - Element에 role="presentation" or role="none" 을 명시적으로 선언하여 Element의 암시적인 시멘틱을 제거할 때
- Element에 aria-hidden="true" 선언 (부모 요소의 hidden:true가 자식 요소의 hidden:false보다 우선)
css 등을 활용해 실제로 유저에게 노출되지 않거나, 접근성 attribute를 사용해서 명시적으로 숨기는 경우에는 접근성 트리에서 제외되는 것을 알 수 있습니다.
저희는 보통 display:none;을 활용해서 반응형에 따른 조건부 렌더링 및 dropdown 등을 구현하고 있기 때문에, 이 경우에는 getByRole만 사용해도 요소가 정상적으로 유저에게 노출이 되고 있는지 검증이 가능합니다.
앞으로 테스트 코드 작성시에 이 부분 참고하면 더 적은 코드로 정확한 테스트가 가능할 것 같습니다 :)