TDD(Test Driven Development)란?
테스트 주도개발이란, 실제 코드 작성하기 전 테스트코드를 작성하는 단계이다.
테스트 코드 작성 후 해당 테스트 코드를 Pass할 수 있는 실제 코드를 작성한다.
즉, 정리하면
테스트하고자하는 기능의 테스트 코드 작성 -> 테스트실행 Fail ->
테스트 코드에 맞는 실제 코드 작성-> 테스트 실행 Pass
의 순서로 진행된다.
이걸 왜 할까?
TDD를 하므로 많은 기능을 테스트하기에 소스 코드에 안정감 부여
디버깅 시간 감소 및 실제 개발 시간 감소
더욱 클린한 코드 작성
React Testing Library란?
구성 요소 작업을 위한 API를 추가해 DOM Testing Library 위에 구축된다.
*DOM Testing Library: DOM 노드를 테스트하기 위한 매우 가벼운 솔루션이다.
npx create-react-app ./으로 현재 작업 폴더에 리액트 앱 생성하고 테스팅할 때 React Testing Library를 사용하는데,
create react app으로 생성된 프로젝트의 경우 별도 설치 없이 사용 가능하다.
설치하려면 위와 같이 설치 명령어 입력한다.
테스팅 라이브러리에는 Enzyme과 React Testing Library가 있다.
Enzyme: 구현 주도 테스트
React Testing Library: 행위 주도 테스트
*구현 주도 테스트->UI 테스트시 p태그가 쓰였고 어떤 문자가 들어갔고 등등 구현 요소들에 대해 테스트한다.
만약 p태그를 h2태그로 바꾸게 되면 구현에 사용한 태그가 달라 에러가 날 것이다.
*행위 주도 테스트: 사용자의 입장에서 테스트. 어떤 이벤트가 발생시켰을 때 화면이 어떻게 변화하는지 등 사용자 관점에서의 event 발생시의 변화에 대한 테스트가 더욱 주를 이룸.
Jest란?
FaceBook이 개발한 테스팅 프레임 워크이다.
Test Case를 만들어 어플리케이션 코드가 잘 돌아가는지 확인해준다.
보통 Unit 테스트를 위해 사용한다.
Jest 사용을 위한 환경 세팅
1. 모듈 설치
npm install jest --save-dev
2. Test 스크립트 변경
"test" : "jest" or "jest --watchAll"
3. 테스팅 작성할 폴더 및 파일 기본구조 생성
Jest는 파일에 아래와같은 키워드(test, spec, tests)를 보고 Test파일을 찾는다.
Jest 파일 구조
describe 안에 test(it) 블록들이 나열된 구조이다. 위 코드에서 it은 test를 의미한다.
*describe(name,fn)는 여러 관련 테스트를 그룹화 하는 블록을 만든다.
*it은 개별 테스트를 수행하는 곳으로, 각 테스트를 작은 문장처럼 설명한다.
각 테스트블록은 expect와 matcher를 쌍으로 가진다.
*expect 함수: 값을 테스트할 때마다 사용되며 matcher함수와 쌍으로 붙어다닌다.
*matcher: 다른 방법으로 값을 테스트하도록 matcher함수를 이용한다.
테스트블록 실행시 올바른 테스트이므로 passed가 출력된다.
React Testing Library 주요 API
-> 테스팅 라이브러리들 설치
*render함수: DOM에 컴포넌트를 렌더링 하는 함수로, 인자로 렌더링할 컴포넌트를 넣어 사용한다.
expect-match 코드에서는 screen객체를 이용해 learn react라는 요소를 가져오는데 성공한다면 text는 성공할 것이다.
리액트 앱 설치 후 App.js파일에 들어가보면 learn react라는 문구가 실제 생성되어있다.
Query 함수에 대해서
https://testing-library.com/docs/queries/about/
About Queries | Testing Library
Overview
testing-library.com
쿼리 함수는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다.
쿼리유형은
-> 요소가 발견되지 않은 경우 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부를 기준으로 나눠짐.
[쿼리 유형]
-getBy: 쿼리에 대해 일치 노드가 없다면 오류 발생시킴
-findBy: 쿼리에 대해 일치 노드가 없다면 null을 반환
-queryBy: 주어진 쿼리와 일치하는 요소 발견시 Promise반환 + 기본 제한 시간 지난 후(waitFor 사용)에는
요소가 발견되어도 악속 거부됩니다. -> findBy=getBy + waitBy를 합쳐놓은 성질이다.
코딩시 편리성을 더해주는 모듈들
[Prettier]
주로 코드 형식을 맞추는데 사용한다.
VSCode Extension 가면 설치할 수 있다.
npm으로도 설치할 수 있는데, 이렇게 하면 여러 개발자와 같은 포맷을 유지하기에 좋다.
설치 후 Settings를 보면 Tab 간격, double or single quote 사용 등을 설정할 수 있다.
[ESLint]
개발자들이 특정 규칙을 가지고 코드를 일관성있고 깔끔하게 짤 수 있게 도와주는 라이브러리다.
자바스크립트 쓸 때 가이드라인, 문법 오류 메시지 보충(?)등의 역할을 한다.
주요 기능은 문법 오류 잡는것이다.
예를 들면 아래와 같은 코드를 작성했을 때 ESLint를 설치하지 않았다면 해당 코드에 대한 자세한 에러메시지 설명이 뜨지 않는다. 하지만 ESLint를 설치하면 에러 메시지에 대해 더 자세히 설명해준다.
ESLint를 설치하면 eslintrc.json 설정파일을 생성하고, package.json에서 eslintConfig 부분 지우고 생성한 eslint 설정파일에 붙여넣는다. -> PROBLEMS 탭에서 ESLint가 제공하는 경고들을 확인할 수 있게 함.
그리고 ESLint Testing Plugins를 설치한다. -> eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다. 아래 두 모듈을 설치해주면 -> react관련 린트설정 + react hooks에 관련된 규칙 적용 가능케 함.
->json파일에 플러그인에 대한 코드도 추가해준다.
아래 코드로 lint가 잘 작동하는지 확인한다.
