[아티클 프로젝트 019] react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 / 비동기적으로 바뀌는 컴포넌트 UI 테스트

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

비동기적으로 바뀌는 컴포넌트 UI 테스트

 

비동기적으로 바뀌는 컴포넌트 UI 테스트

Async Utilities 함수를 사용
wait 

• 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기
• timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능)
• 리액트 16.8 버전 버그있음

waitForElement

• 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..)
• 프로미스가 끝날때 선택한 엘리먼트 resolve

waitForDomChange

• 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지 대기
• 프로미스가 resolve 되면 mutationList를 통해 DOM의 변화 정보를 알 수 있음

waitForElementToBeRemoved

• 특정 엘리먼트가 화면에서 사라질때까지 대기 

 

REST API 호출 테스트방법

• axios 설치, JSONPlaceholder를 통해 가짜 API 사용할 주소로 API 호출
• 이때 실제 요청하지 않고 node_modules를 mocking하는 방법 혹은 axios-mock-adapter라이브러리 사용

---

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

https://velog.io/@velopert/tdd-with-react-testing-library

 

비동기적으로 바뀌는 컴포넌트 UI 테스트

https://velog.io/@velopert/react-testing-library-%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9E%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8