Testing Library

Testing Library에서 페이지 요소를 찾기 위해 Query 사용Query를 받아 이벤트를 발생시키거나, jest를 사용해 element 테스트 가능getBy... => 쿼리에 일치하는 노드가 딱 하나만 있을때 이를 반환하고, 없거나 2개 이상이면 오류를 발생시

HTML에 있는 role 속성을 활용해 쿼리를 작성할 수 있음role은 따로 명시하지 않아도 태그마다 암묵적으로 가지고 있는 속성이 있음 (ex: Button => button)같은 페이지에 동일한 역할을 하는 엘리먼트가 여러개 있으면 옵션을 사용해 특정 요소만을 가

placerholer에 있는 텍스트를 가져오는 쿼리 메서드

text node가 있는 모든 element의 텍스트를 검사하는 메서드ignore: 스크립트, 스타일 태그에 같은 값이 있을 때에 이를 반환하지 않도록 하는 옵션출처:https://testing-library.com/docs/queries/bytext

input, textarea, select element에서 실제 표시되는 값과 일치되는 엘리먼트를 반환하는 메서드출처:https://testing-library.com/docs/queries/bydisplayvalue

alt 속성이 있는 개체의 alt text가 일치하는지 확인하는 메서드

엘리먼트의 title을 찾는 메서드출처:https://testing-library.com/docs/queries/bytitle

DOM에 직접적으로 이벤트를 전달하는 방식가능하다면 user-event 메서드 사용 권장이벤트를 앞에 key값으로 작성해도 됨전달한 이벤트에 속성이 포함되어있는 경우 테스트 중 해당 노드에 속성을 포함시킴초기화되지 못하는 이벤트 속성과 함께 사용할때 레퍼런스 객채만을

getBy 쿼리와 waitFor 메서드를 겨랍한 형태엘리먼트가 나오지만 즉시 변화되지 않는 경우에 활용 가능일정 시간동안 기다리게 하고자 하는 경우 waitFor 메서드 호출 가능동기 함수의 경우 조건이 만족될 때 까지 interval 간격마다 함수를 재호출하게 됨프로

fireEvent는 유저가 상호작용하는 것과 완벽히 일치하지 않음가령 fireEvent.click 메서드를 버튼에서 실행하는 경우 실제 유저 행동에서 나오는 아래의 5단계 동작을 실행하지 않음fireEvent.mouseOverfireEvent.mouseMovefireE

테스트 진행시 실제 타이머를 사용하면 테스트가 불안정해지고 느려질 수 있음이러한 문제를 해결하고나, 코드의 타임스탬프에 테스트가 의존하는 경우 가짜 타이머를 사용할 수 있음일반적으로 가짜 타이머는 beforeEach에 설정하며, 설정이후 모든 코드는 가짜 타이머를 사용