TDD

TIL | Testing Library Queries

Testing Library Queries

Queries

  • Testing Library 에서의 쿼리는, 페이지에서 요소들을 찾기위해 필요한 메서드이다.
  • 쿼리는 get,find,query 3가지 타입이 존재하며, 그 차이점은 찾고자 하는 요소가 없을때 에러를 발생시키는지, 혹은 프로미스를 반환하고 다시 실행하는 여부에 차이가 있다.
  • 선택하고자 하는 페이지의 컨텐츠에 따라 쿼리들이 적절하게 사용어야 하므로, priority guid를 참고하여 사용하고자 하는 쿼리를 지정하자.
Type of Query 0 Matches 1 Match > 1 Matches Retry(Async/Await)
Single Element        
getBy... Throw error Return element Throw error No
queryBy... Return null Return element Throw error No
findBy... Throw error Return element Throw error No
Multiple Elements        
getAllBy... Throw error Return array Return Array No
queryAllBy... Return [] Return array Return Array No
findAllBy... Throw error Return array Return Array Yes

 

  • Single Element
    • getBy...: 쿼리에 대해 일치하는 노드를 반환하며, 일치하는 요소가 없거나 일치하는 요소가 1개 이상 존재할 경우 에러를 반환한다.
    • queryBy...: 쿼리에 대해 일치하는 노드를 반환하며, 일치하는 요소가 없을때 null을 반환한다. 때문에 화면에서 사라질 수 있는 요소에 적용하는데 적절하다. 일치하는 요소가 1개 이상 존재할 경우에는 에러를 반환한다.
    • findBy...: 쿼리에 대해 일치하는 노드를 반환하며, 주로 비동기적인 요소를 처리할때 사용된다. 일치하는 요소가 없거나, 혹은 1개 이상 존재할 경우 rejected된 promise를 반환한다.
      • findBy... 메서드는 getBy... 쿼리와 waitFor 키워드의 조합이다.
  • Multiple Elements
    • getAllBy...: 쿼리에 대해 일치하는 노드들을 배열 형태로 반환하며, 일치하는 요소가 없을 경우 에러를 반환한다.
    • queryAllBy...: 쿼리에 대해 일치하는 노드들을 배열 형태로 반환하며, 일치하는 요소가 없을 경우 빈 배열을 반환한다.(에러발생 X)
    • findAllBy...: 쿼리에 대해 일치하는 노드들을 배열 형태로 반환하며(resolved된 promise), 일치하는 요소가 없을 경우 rejected된 promise를 반환한다.

 

Reference

  1. Testing Library Queries docs