TDD (3) 썸네일형 리스트형 Mock Service Worker MSW(Mock Service Worker의 약자, API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 합니다. 백 엔드에서 데이터를 가져오는 부분을 테스트하기 위해서는 실제로 서 버에 호출하는 end-to-end 테스트를 할 수 있지만 여기서는 서버에 요청 을 보낼 때 그 요청을 가로채서 Mock Service Woker라는 것으로 요청을 처리하고 모의 응답(mocked response)을 보내줍니다 MSW 작동 방식 브라우저에 서비스 워커를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지합니다. 그리고 그 요청을 실제 서버로 갈 때 중간에 가로채서 (intercept) MSW 클라이언트 사이드 라이브러리로 보냅니다. 그 후 .. react-testing-library query 함수 다양한 쿼리 render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있는데요, 이 쿼리 함수들은 react-testing-library 의 기반인 dom-testing-library 에서 지원하는 함수들입니다. 이 쿼리 함수들은 Variant 와 Queries 의 조합으로 네이밍이 이루어져있는데요, 우선 Varient 에는 어떤 종류들이 있는지 봅시다. Variant getBy getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다. getAllBy getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 하나도 없으면 에러가 발생합니다. queryBy queryBy* 로 시작하는 쿼리.. react에서 react-testing-library , jest를 사용해 TDD react-testing-libraryr에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않습니다. react-testing-library는 이 점을 중요시 여겨서, 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트의 내부 구현 방식이 많이 바뀌어도 테스트가 실패하지 않도록 설계되었습니다. 추가적으로, Enzyme 은 엄청나게 다양한 기능을 제공하는 반면, react-testing-library 에는 정말 필요한 기능들만 지원을 해줘서 매우 가볍고, 개발자들이 일관성 있고 좋은 관습을 따르는 테스트 코드.. 이전 1 다음
