Peep

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

TDD의 소개

TDD(Test Driven Development : 테스트 주도 개발)

• 테스트가 개발을 이끌어나가는 형태의 개발론
• 테스트 코드 작성, 후 구현
• 사이클을 반복적으로 돈다.
  • ->실패->성공->리팩터링-

실패

실패하는 테스트 케이스를 먼저 생성

성공

실패하는 테스트 케이스를 통과시키기 위한 통과 코드를 작성

리팩토링

중복 코드등의 코드 개선

테스트 케이스가 성공하는지 확인하기 위해 첫번째 절차인 실패로 돌아가서 테스트 케이스를 작성

TDD 장점

• 작은 단위로 테스트 케이스를 만들기 때문에 코드의 모듈화가 자연스럽다.
• 테스트 커버리지가 높아지면 리팩토링, 유지보수가 쉬워진다.
• 프로젝트 퀄리티가 좋아진다.
• 협업에 도움이된다.
• 버그를 줄일 수 있다.
• 요구사항 충족을 확인하기 쉽다.

원본

https://velog.io/@velopert/TDD%EC%9D%98-%EC%86%8C%EA%B0%9C