Test Driven Development
실제 코드를 작성하기 전에 테스트 코드를 먼저 작성한다.
테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성한다.
*TDD를 하면 좋은 점
1. TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듭니다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올확률이 높습니다.
React Testing Library
Create React App 로 리액트 앱을 생성하면 기본적으로 테스팅
할 때 React Testing Library를 사용하는 것을 볼 수 있다.
공식문서
React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.
DOM Testing Library란 Dom 노드(Node)를 테스트하기 위한 매
우 가벼운 솔루션이다.
Create React App으로 생성된 프로젝트는 즉시 React Testing Library를 지원한다. 그렇지 않은 경우 다음과 같이 npm을 통해 추가할 수 있다.
리액트 컴포넌트를 테스트하는 가벼운 솔루션!
React Testing Library는 에어비앤비에서 만든 Enzyme을 대처하는 솔루션이다.
Enzyme이 구성 요소의 구현 세부 정보를 테스트하는 대신
React Testing Library는 개발자를 React 애플리케이션의 사용자 입장에 둔다.
구현 주도 테스트에서는 위의 UI를 테스트할 때 주로 <p> 태그가
쓰였고 Edit 등의 문자가 들어갔다는것을 테스트한다.
만약 <p>태그를 <h2> 태그로 바뀌면 에러가 날 것이다.
하지만 행동 주도 테스트에서는 사용자의 입장에서 테스트 하기에 <p>태그가 쓰이던 <h3> 태그가 쓰여서 글을 표현하는지가 중요한지 보다 어떠한 이벤트를 발생시켰을때 화면이 어떻게 변화가 되는지 같은 테스트가 더 주를 이룬다.
Jest
React Testing Library가 컴포넌트를 렌더링해주면 렌더링된 것을 Jest를 이용해서 테스트한다.
FaceBook에 의해서 만들어진 테스팅 프레임 워크이다.
최소한의 설정으로 동작하며 Test Case 를 만들어서 어플리케이션 코드가잘 돌아가는지 확인해준다.
단위 (Unit) 테스트를 위해서 이용한다.
Jest 시작하기
1. Jest 라이브러리 설치 npm install jest --save-dev
2. Test 스크립트 변경 "test" : "jest" or "jest --watchAll
3. 테스트 작성할 폴더 및 파일 기본 구조 생성
Jest 파일 구조 및 사용법
test랑 it는 같은 말
React Testing Library 주요 API
a를 누르면 다음과 같이 test가 진행된다.
q를 누르면 다음과 같이 test가 중단된다.
App.test.js에서 테스트가 진행되는 것이다.
learn React가 App 컴포넌트에 들어있는지를 test
(expect와 matcher 이용해서)
➡️ App.js에 들어있음
➡️ pass
✅ render 메소드를 이용해서 컴포넌트를 렌더링 해준 것이다.
렌더링이 되어 있어야 테스트가 가능하기 때문이다.
쿼리 함수
쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. 여러 유형의 쿼리("get", "find", "query")가 있다. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부이다. 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적절할 수 있다.
Prettier 설치 및 설정
테스팅할 때 matcher를 알맞게 쓰는지 확신이 들지 않을 때가 있으며, 코드의 형식이나 자바스크립트 문법 등을 올바르게 쓰지 못할 때가 있다. 그러한 부분을 도와주는 모듈을 설치해주겠다.
Prettier는 코드 형식을 맞추는데 사용한다. 테스팅을 위해서 특화된것은 아니지만 ESLint와 함께 자주 사용하기에 Prettier도 설치해보겠다.
원하는 기능을 추가, 삭제할 수 있다.
ESLint 설치 및 설정하기
eslint.jason
App.test.js
에러를 바로 체크할 수 있게 추가적으로 Error Lens를 설치해줬다.
