Jest
공식 홈페이지 : https://jestjs.io
페이스북에서 개발, 관리하는 javascript 테스트 프레임워크
단순함에 집중
React.js, Typescript, Node.js, Angular.js, Vue.js 등 여러 js 기반 라이브러리 또는 프레임워크에서 사용할 수 있다.
다른 js 테스트 프레임워크? Mocha, Jasmine, Karma
장점
1. 제로 설정
다른 테스트 프레임워크들과 다르게 Jest는 여러 설정들을 지양하고 테스트에 집중할 수 있게 제로 설정을 지향하고 있다.
2. 스냅샷
테스트를 하다 보면 값들을 일일이 확인하기 힘든 큰 js 객체들이 있다. Jest에서는 이 객체를 그대로 저장한 후에 추후에 값이 변경되면 에러를 표시한다.
React.js에서는 스냅샷 기능을 통해 렌더링된 컴포넌트의 변경 사항이 있는 지를 체크한다.
3. 모의 객체(Mocking)
Jest에서 Mock 객체를 생성할 수 있다. 이를 통해 테스트 범위를 벗어나는 객체들을 간단하게 Mock 객체로 만들어서 실제로 테스트해야할 부분을 집중하여 테스트할 수 있도록 한다.
4. 테스트 코드 분리
Jest에서의 테스트 코드는 완전히 분리되어 있으며, 이를 애플리케이션과 동시에 실행할 수 있게 하여 빠른 성능을 보장할 수 있다.
5. 간단한 API
Jest에서는 쉽고 간단한 테스트를 할 수 있는 API를 제공한다. 추가로 --coverage 옵션을 통해 코드 커버리지(Code coverage)를 간단하게 확인할 수 있다.
샘플 js 프로젝트 생성
파워쉘을 열어서 jest-test라는 프로젝트 폴더를 만들어 npm init을 입력하여 js 프로젝트를 생성한다.
그리고 npm install --save-dev jest Jest를 설치한다.
※ 위의 두 명령어를 입력을 할 때, 파워쉘이 아닌 vscode 내 터미널에서 해도 좋다.
vscode를 열어서 package.json에서 명령어를 모아둔 scripts 필드 내 test 필드에 jest --watchAll로 수정한다.
※ 원래 책에서는 jest --watch인데, 이는 해당 폴더에 git repo 설정이 되어 있어야 한다. (해당 프로젝트 내에 "git init"을 입력) 그리고 git 상에서 바뀐 파일들만 테스트할 수 있게 된다.
터미널에서 npm run test을 입력하면 다음과 같은 결과 화면을 볼 수 있다.
o를 누르면 jest --watch처럼 동작하며, 엔터를 누르면 모든 테스트를 실행할 수 있다.
사용 방법
프로젝트 루트 폴더에 index.js 파일을 만들어 다음과 같은 간단한 함수를 만든다.
그 다음에 index.js를 Jest로 테스트하기 위해 index.test.js 파일을 생성하여 다음과 같이 작성한다.
터미널에서 npm run test를 입력하면 작성한 index.test.js에 대한 테스트 성공 결과를 확인할 수 있다.
만약 index.js 내 a + b 함수를 a * b로 바꿔서 저장하면 테스트가 실패하는 결과 화면을 확인할 수 있다.
Matcher
Jest에서 제공하는 함수이며, 결과값을 비교하여 테스트의 성공 여부를 판단할 때 사용한다.
toEqual
Obejct를 비교할 때 사용된다.
index.js에 person Object를 반환하는 함수를 추가한다.
index.test.js에 다음과 같이 person Object를 검증한다. (여러 필드가 들어 있는 Object를 비교할 때는 toEqual을 이용!)
1번 라인에 const에 person 추가
toBeTruthy, toBeFalsy
참(true)/거짓(false) 값인 Boolean을 체크할 때 사용하는 Matcher이다.
1번 라인에 const에 toggle 추가
toContain
배열(Array)에 특정값이 포함되어 있는 지 확인할 때 사용한다.
1번 라인에 const에 range 추가
Other Matchers?
다른 Matcher를 확인하고 싶으면 다음 링크를 확인해 본다.
Link : https://jestjs.io/docs/en/expect
코드 커버리지
코드 커버리지는 테스트 대상이 되는 소스 코드 중 테스트 코드를 통해 검증된 코드 비율을 의미한다.
코드 커버리지를 통해 테스트 코드가 얼마나 많은 소스 코드를 테스트하고 있는지 나타내는 중요한 지표이다.
프로젝트 루트 폴더 터미널에 npx jest --coverage를 입력하면 확인할 수 있다.
위의 결과를 통해 index.js 파일의 모든 함수에 관한 테스트 코드를 index.test.js에 작성했으므로 코드 커버리지가 100%라는 것을 확인할 수 있다.
그러면 index.test.js에서 마지막 테스트를 주석 처리하면 어떻게 될까?
index.test.js에 작성한 테스트 코드는 모두 통과했으나, index.js 파일에 테스트가 실행되지 않은 라인(17-21)을 감지하여 코드 커버리지가 100%가 아님을 알 수 있다.
이를 통해서 Jest의 코드 커버리지를 통해 개발자가 실제로 작성하는 코드에 대한 테스트 코드가 얼마나 많이 작성되어 있거나 작성되어 있지 않는 부분은 어디인지 한눈에 확인할 수 있다.
참고
Jest에 대한 더많은 기능을 알고 싶으면 공식 문서를 확인해 본다.
