본문 바로가기
프론트엔드/Jest

[testing-library] 쿼리 사용 우선순위

by zzocco94 2023. 1. 14.

Intro

element를 선택하는 방법은 여러 가지가 있다. (getByTestId, getByText 등..)

테스트 코드 강의 여러 개를 보니 getByTestId로 하는 곳도 있고, ByRole로 하는 사람도 있길래

그냥 자기가 편한 걸 사용하면 되나? 생각했었다.

 

하지만, testing-library에서 권장하는 쿼리 사용 우선순위가 있다고 한다.

어떤 기준으로 우선순위를 정했는지 알아보자.

 

쿼리 사용 우선순위

공식 문서에 따르면, 테스트는

사용자가 코드(구성 요소, 페이지 등)와 상호 작용하는 방식과 최대한 유사해야 한다고 한다.

 

간단하게 말하자면, 사용자는 [등록 버튼]을 누르는 것이지

[id 가 submit-button-test인 요소]를 누르는 게 아닌 것이다.

 

이러한 이유로 공식 문서에는 getByTestId보다 getByRole을 권장한다고 나와있다.

getByRole과 같은 순위에 있는 다른 쿼리도 알아보고 싶다면 공식 문서를 참고해 보자 (링크)

 

// bad

<button 
  className="submit-button" 
  data-testid="submit-button-testid"
>
  등록
</button>

...

const button = screen.getByTestId("submit-button-testid");

 

// good 

<button className="submit-button">
  등록
</button>

...

// 한글 
const button = screen.getbyRole('button', { name: /등록/ })

// 영어일 경우 - 대소문자 구분하고 싶지 않으면 i 사용
const button = screen.getbyRole('button', { name: /submit/i })

 

getByRole의 단점

성능이 안 좋아서 테스트 속도가 느리다고 한다 (출처 : testing-library 사용팁)

해당 글에 따르면, codesandbox에서 테스트를 돌려보니 각각 2ms, 2ms, 11ms를 기록했다고 한다. 

 

document.querySelector('.submit-button') // jsdom에서도 querySelector를 사용할 수 있다.
screen.getByTestId('submit-button-testid')
screen.getbyRole('button', { name: /등록/ })

 

성능이 안 좋아도 사용해야 하는 이유

그래도 getByRole을 사용해야 하는 이유는

정확한 테스트를 할 수 있기 때문이다.

 

예를 들어 getByTestId는 오타를 내더라도 통과가 될 수 있다.

(ex. 등록 -> '등럭' / data-testid는 변경 없으므로 통과)

 

getByRole로 role와 name을 모두 써준다면

보다 정확하게 테스트를 할 수 있을 것이다.

 

 

참고 자료

- testing-library 공식 문서 (링크)

- testing-library 사용 팁 (링크)

- 인프런 강의 '따라하며 배우는 리액트 테스트'  (링크)

댓글