Testing Library의 Queries

📍참고

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

About Queries | Testing Library

 

📍Queries

✅testing-library 에서 제공하는 API

- Element를 찾을 수 있게 도와주는 역할

- DOM API의 querySelector 와 비슷하다

- 예시

  // <input> 을 모두 찾을 때
  const inputs = screen.getAllByRole("textbox");
  
  // <button> 을 1개 찾을 때
  const button = screen.getByRole("button");

 

✅Query Type

 

✅Query Priority

- getByRole : aria-role 기반으로 탐색

- getByLabelText : <label> 을 기반으로 탐색 (form 에서 유용)

- getByPlaceholderText : placeholder 어트리뷰트로 탐색

 

등등..

 

특히, getByRole Query를 이해하려면, ARIA Role을 짚고 넘어가야 한다

 

📍ARIA Role

ARIA Role 은 스크린 리더를 위해 HTML Element의 목적을 명시한다

- role은 명시적으로 부여될 수도 있고 (role 어트리뷰트)

- 자동으로 할당될 수도 있다 

 

✅참고

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

WAI-ARIA Roles - Accessibility | MDN

 

✅예시

heading : <h1> ~ <h6>

list : <ul>,  <li> 등

button : button

link : <a>

textbox : <input type="text">