getByRole, queryByRole, findByRole, getAllByRole, queryAllByRole, findAllByRole

API

getByRole(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  role: TextMatch,
  options?: {
    exact?: boolean = true,
    hidden?: boolean = false,
    name?: TextMatch,
    description?: TextMatch,
    normalizer?: NormalizerFn,
    selected?: boolean,
    checked?: boolean,
    pressed?: boolean,
    current?: boolean | string,
    expanded?: boolean,
    queryFallbacks?: boolean,
    level?: number,
  }): HTMLElement

// example
screen.getByRole('button', { name: 'ok!' });

설명

주어진 역할(role)을 가진 요소를 쿼리합니다. (TextMatch도 허용합니다.)

접근 가능한 이름 또는 설명으로 반환된 요소를 쿼리할수 있습니다.

접근 가능한 이름은 다음과 같은 단순한 경우입니다.

양식 요소의 레이블(Label), 버튼의 텍스트 내용 또는 aria-label 속성의 값, 동일한 역할을 가진 여러 요소가 렌더링된 콘텐츠에 있는 경우 특정 요소를 쿼리하는 데 사용할 수 있습니다.

<aside> 💡 접근 가능한 이름이란?

• element의 콘텐츠 사용
• element의 속성 사용
• element의 연결된 요소 사용 ( ex) label과 input과의 연결 ) </aside>

What is an accessible name? - TPGi

*getByText('The name')를 사용하여 단일 요소만 쿼리하는 경우*

*getByRole('img', { name: 'The name' }) 을 사용하는 것이 종종 더 좋습니다.*

*접근 가능한 이름 쿼리는 *ByAlt 또는 ByTitle 과 같은 다른 쿼리를 대체하지 않습니다.

즉, 접근 가능한 이름은 이러한 특성과 같을 수 있지만 이러한 특성의 기능을 대체하지는 않습니다.