116. 테스트 주도 개발 (TDD)
테스트 주도 개발 (Test Driven Development)
실제 코드를 작성하기 전에 테스트 코드를 먼저 작성함
테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성
TDD를 하면 좋은 점
- TDD를 하면 많은 기능을 테스트하기에 소스 코드에 안정감이 부여됨
- 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듬
- 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높음
117. React Testing Library
Create React App으로 리액트 앱을 생성하면 기본적으로 테스팅할 때 React Testing Library를 사용함
React Testing Library란?
DOM Testing Library는 DOM 노드를 테스트하기 위한 매우 가벼운 솔루션
React Testing Library는 이 DOM Testing Library 위에 React 구성요소 작업을 위한 API를 추가하여 구축됨
React Testing Library는 에어비앤비에서 만든 Enzyme를 대체하는 솔루션
Enzyme는 구성 요소의 구현 세부 정보를 테스트하는 반면, React Testing Library는 개발자를 React 애플리케이션의 사용자 입장에 둠
- Enzyme: 구현 주도 테스트 (Implementation Driven Test)
- React Testing Library: 행위 주도 테스트 (Behavior Driven Test)
118. Jest
Jest란?
FaceBook에 의해 만들어진 테스팅 프레임 워크
최소한의 설정으로 동작하며 Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인해줌. 단위(Unit) 테스트를 위해 이용
Jest가 Test 파일을 찾는 방법
- {filename}.test.js
- {filename}.spec.js
- "tests" 폴더 안에 테스트 파일을 넣기
119. Jest 파일 구조 및 사용법
- describe (과일)
- it 사과
- it 바나나
- it 복숭아
"describe" argument(name, fn)
여러 관련 테스트를 그룹화하는 블록을 만듬
"it" (=== "test") argument(name, fn, timeout)
개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명함
expect <---> matcher 로 구성
-
expect
expect 함수는 값을 테스트 할 때 마다 사용됨
혼자서는 거의 사용되지 않으며 matcher와 함께 사용됨 -
matcher
다른 방법으로 값을 테스트하도록 "매처"를 사용
ex) toBe, toBeCalledWith, toStrictEqual, toBeTruthy ...
121. 쿼리 함수
쿼리 함수란?
쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법
"get", "find", "query"가 있음. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지, 또는 Promise를 반환하고 다시 시도하는지 여부
-
"getBy..."
쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상일 경우 오류를 발생시킴. (둘 이상의 요소가 예상되는 경우 getAllBy 사용) -
"queryBy..."
쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환. 이것은 존재하지 않는 요소를 어션설하는데 유용. 둘 이상의 일치 항목이 발생되면 오류 발생. (대신 queryAllBy 사용) -
"findBy..."
주어진 쿼리와 일치하는 요소가 발견되면 Promise 반환. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 Promise가 거부됨. (둘 이상의 요소가 예상되는 경우 findAllBy 사용)
findBy = getBy + waitFor
- waitFor: 일정기간 동안 기다려야 할 때 (비동기 요청) waitFor를 사용하여 기대가 통과될때까지 기다림
