테스트 요소에 접근하는 방식

RTL에서는 테스트를 하는 방식으로서 요소에 접근하는 방식으로 screen 리더와 같은 기술로 접근하는 것을 권장합니다. 즉, 웹 접근성에 대해서 생각하게 됩니다. 스크린 리더에 친화적일 수록 웹이 웹 접근성이 더 좋아집니다.

RTL 쿼리 가이드

• https://testing-library.com/docs/queries/about/#priority

이 문서에서는 가상 DOM에서 요소를 찾을때 어떤 것을 우선순위로 사용해야하는지 가이드해줍니다.

1. 누구나 엑세스 가능한 쿼리 입니다.

• getByRole : 요소는 각 document에서 역할을 가지는데 button 과 같이 페이지에서 요소의 역할을 식별하는 것 입니다.

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByRole('link', { name : "리액트 배우기" });
// 각 html 요소에 대한 역할을 어떻게 알 수 있을까 ? 역할 : (위함수의 첫 번째 인수)
// 혹은 div에 role 요소를 추가하여 식별할 수도 있습니다.  
  expect(linkElement).toBeInTheDocument();
});

https://www.w3.org/TR/wai-aria/#role_definitions

• getByLabelText : 폼 요소안에 있는 요소를 접근할 때 스크린리더가 접근 가능하게 해줍니다.

• getByPlaceHolder : 입력요소인 경우 placeHolder를 사용하여 접근할 수 있게 해줍니다.

• getByText : 일반적인 요소인 경우 텍스트내용을 통해서 정규식이나 문자열을 통해서 요소를 식별합니다.

• getByDisplayValue : 요소가 가진 value 값으로 요소를 식별하는 방식입니다.

2. Semantic Query : 위의 방식으로 접근이 불가능하다면

• getByAltText : alt 속성을 사용하는 요소인 img, area, input인 경우에 alt 값을 식별하여 요소를 구분합니다.
• getByTitle : title 속성은 일반적으로 스크린리더가 일관되게 읽지 않습니다. 시각이 있는 사용자에게는 보여주지 않습니다. 이러한 title 속성으로 요소를 구분합니다.

3. Test IDs : 최후의 수단

• 사용자가 볼 수도, 스크린 리더도 액세스 할수가 없어서 꼭 필요한 경우에만 사용해야 합니다.