[Jest 입문] Jest를 왜 사용할까?? && Jest의 Matcher

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄Jest는 페이스 북에서 관리하는 JavaScript 테스트 프레임워크이다.🦄
🦄Jest를 통해 개발자가 작성한 코드가 그 의도대로 동작하는지, 돌발상황에도 대처가 가능한지 확인할 수 있다.🦄

 

 

개요

---

페이스북은 못 하는게 뭘까??

 

앞서 말했듯, Jest는 페이스북이 만든 프론트엔드 테스트 프레임워크다. 테스트 프레임워크라고 하니 참 감이 안오는데, 말 그대로 코드가 제대로 동작하는 test를 위한 프레임워크라는 뜻이다.

 

사실 이전부터 Jest가 뭐하는 친구인지는 알고 있었고, 앞으로의 내 개발 커리어에 꼭 필요하다는 사실도 알고 있었지만 막상 별로 배우고 싶지는 않았다. 왜냐하면, 아직까지 이 친구의 필요성을 느끼지 못했기 때문이다. 비록 console.log 하나 하나 찍어가며 낑낑거리면서 디버깅을 해왔지만, 어떻게든 버그를 항상 잡아내었을뿐만 아니라, 그 원시적인 싸움에서 승리했을 때 오는 쾌감이 장난이 아니였기에 딱히 테스트 없이도 잘 살아왔기 때문이다.

 

그런데, 친구 A군과 내 은사님께서 정말 우연히도 같은 시기에 테스트의 필요성을 강력히 설파하였기에, 이번 기회를 통해 배워보려고 한다. 이건 내 직감인데, 이렇게 주변사람이 강력하게 권하는 데는 뭐든 이유가 있다. 처음 주변인들의 추천으로 타입스크립트를 시작했을때도 "아 나한텐 이거 이른거 같은데 이거 왜 하는거야 ㅡㅡ" 이런 마인드 였는데, TS에 익숙해진 지금은 JS로 코드를 짜는 사람들을 보면 "와 저 사람들은 무슨 자신감으로 저 똥통에서 코딩을 하는거지?"라는 생각이 든다.

 

이러한 경험이 있기에, 이번에도 주변인들의 추천에 따라 Jest를 공부해보려고 한다.

Jest를 배움으로서 기대하는 효과는 2가지이다.

 

1. 코드가 올바르게 동작하는지 쉽게 확인할 수 있다.
2. 동료 개발자들에게 내 코드의 안정성을 쉽게 확인받고, 그 기능을 확인받는다
3. 기초적인 버그들을 사전에 차단한다.

 

사설이 너무 길었다. 본격적으로 시작해보자.

 

 

Jest 시작하기

---

Jest를 시작하기 위해, 적당한 이름의 폴더를 만들고 vscode를 실행하자. 그리고 커맨드 창에 아래와 같은 명령어를 쳐주자.

 

 

npm init

* npm init : 프로젝트에 package.json을 생성하는 명령어

 

항상 cra로 프로젝트를 만들다보니까 이런 명령어가 생소하다. 아무튼 이 명령어를 치면 프로젝트 이름을 정하고, 버전을 정하고 등등 많은 것을 하게 되는데, 적당히 다 엔터치고 넘어가자. 

 

npm i jest -D

이후 이 명령어를 통해 jest를 설치해주자.

우리는 개발단계에서만 jest를 사용할 것이므로, -D 옵션을 붙여주자.

 

(추가: cra 환경에서는 jest가 자동으로 깔려있어서, 이번처럼 따로 jest를 깔아줄 필요는 없다.)

 

//package.json
{
  "name": "jest_pr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^27.0.6"
  }
}

마지막으로 package.json의 scripts 중 test를 치면 jest가 실행될 수 있도록 바꿔준다.

 

그럼 이제 npm test 스크립트를 사용하여 프로젝트내에 있는 테스트 코드들을 모두 실행 할 수 있게 되는데, 이 테스트 코드를 어떻게 구분 짓느냐. 간단하다. 

 

 

OOO.test.js 꼴로 파일 이름을 지정해주면 해당 파일이 테스트 코드임을 인식한다.

 

 

테스트 파일을 만들기 전에 먼저 아래와 같은 피시험 테스트 함수를 하나 만들어주자.

 

const fn = {
  add : (num1, num2) => num1 + num2,
  makeUser : (name,age) => ({name,age,gender: undefined}),
  throwErr :()=>{
    throw new Error("xx")
  },
}

module.exports = fn

 

이제 이 함수를 모듈화 해서 export 하자. 그럼 test.js 파일에서 사용할 수 있게 된다.

 

const fn = require('./fn')

test ('1은 1이다',()=>{
  expect(1).toBe(1)
})

test('2 더하기 3은 5야.',()=>{
  expect(fn.add(2,3)).toBe(5) // toBe 부분은 Matcher라는 부분입니다.
})

fn 함수를 테스트하기 전에, jest가 어떻게 동작하는지 확인해봅시다.

 

기본적으로 jest의 문법은 test ( '테스트에 대한 설명', 검증할 함수) 로 이루어져있습니다.

 

이 함수가 어떤 동작을 할 지 예상 (expect)하고, 그 예상값과 실제 함수의 동작을 비교하는 것이 jest의 핵심입니다.

첫 번째 테스트는 "1은 1이다"라는 테스트에서 1은 1이 될 것 (toBe)라는 결과를 예상했고, 두 번째 테스트는 2와 3을 더하면 5가 될 것이라는 것을 예상합니다.

 

이러한 상태에서 npm test를 실행하면 아래와 같은 문구를 터미널에서 볼 수 있습니다.

 

개발자가 예상한 결과와 실제 동작한 코드의 결과가 동일하다는 결과로 PASS를 보여줬습니다. 예상값과 실제값을 비교한다는 점에서 약간 도박같기도 한데, 원래 개발이라는게 도박이랑 비슷하지 않겠습니까ㅎㅎ

 

 

Matcher

---

Matcher란 Jest에서 실행 값이 예상 부와 어떻게 일치하는지를 정의하는 메서드 입니다. 

 

대표적인 Matcher는 아래와 같습니다.

 

Matcher	설명
A.toBe(B)	A의 결과가 B가 되면 pass, 아니면 Fail
A.toEqual(B)	A의 결과가 B와 동일하면 pass, 아니면 Fail
A.toBeNull()	A의 결과가 Null이면 pass, 아니면 Fail
A.toBeUndefined()	A의 결과가 undefined이면 pass, 아니면 Fail
A.toBeDefined()	A의 결과가 정의되어있다면(언디파가 아니라면 pass
A.toBeTruthy()	A의 결과가 Truthy한 값이면 pass
A.toBeFalsy()	A의 결과가 Falsy한 값이면 pass
A.toBeGreatThan(B)	A의 결과가 B보다 크면 pass
A.toBeGreaterThanOrEqual(B)	A의 결과가 B보다 크가나 같으면 pass
A.toBeLessThan(B)	A의 결과가 B보다 작으면 pass
A.toBeLessThanOrEqual(B)	A의 결과가 B보다 작거나 같으면 pass
A.toBeCloseTo(B)	A의 결과가 B와 유사하면 pass (소숫점 단위 검증에 사용)
A.toThrow('xx')	A의 결과가 "xx"라는 에러가 발생하면 pass (xx 에러가 아니라 oo 에러가 나도 fail임. 단, 해당 칸을 비워놓으면 모든 에러에 대해 pass)
A.matcher.not.	matcher의 결과가 fail일 경우에 pass

 

뭔가 정리하다보니까 약간 SQL 느낌도 난다.

 

아직까지는 이 친구들을 어떻게 react에 적용해야할지 모르겠지만, 뭐 이제 첫 숟갈 뜬거 아니겠는가.

계속 열심히 해보자