TIL - 20220517

 오늘은 코드숨 리액트 3주차 과정 피드백과 React Testing Library에 대해 공부했다.

 3주차 과제를 진행하며, React는 UI 요소들을 나누어 컴포넌트로 다루고 컴포넌트 각각의 요소에 테스트를 진행하면 컴포넌트를 한 곳에 모아 둔 App 컴포넌트는 테스트를 할 필요가 없지 않을까?라고 생각해서 이 질문을 윤석 님께 드렸다. 10초 움짤이 내 질문에 대한 명쾌한 답변을 해줄 수 있었다.

그렇다. 위 움짤과 같이 두 잠금 기능은 정상 작동을 하지만 통합 테스트를 하면 엉망이 될 수 있는 결과가 생길 수 있다. 그러니, 각 기능에 대한 테스트도 진행해야 하지만 통합 테스트도 해야 함을 반드시 명심해야겠다.

 

 다음으로, 과제를 진행하며 testing library에서 getByRole, getByLabelText, getByText 등 메서드의 종류가 다양했고, 어떤 메서드에서 가능한 기능이 다른 메서드에서도 불가능하진 않았기 때문에 많이 헷갈렸다. 그래서 오늘은 이 부분에 대해 추가적으로 공부했다. 공식 문서에서 우선순위를 다음과 같이 정해줬다.

 

모두에게 접근 가능한 쿼리

1. getByRole: textbox, button과 같이 역할을 요소로 찾는 메서드
2. getByLabelText: label 태그의 텍스트로 요소를 찾는 메서드
3. getByPlaceholderText: placeholder의 값을 요소로 찾는 메서드
4. getByText: form 태그 바깥에서 텍스트 콘텐츠를 요소로 찾을 때 좋은 메서드
5. getByDisplayValue

의미론적 쿼리

1. getByAltText
2. getByTitle

Test IDs

1. getByTestId

우선순위를 공식 문서에서 정해주니 확실히 편한 것을 체감할 수 있었다. 앞으로 testing library를 이용하여 코드를 작성할 때, 다음과 같은 우선순위를 최대한 지켜가며 코드를 작성해야겠다.