Jest로 테스트 코드 작성하기 (기본 사용법)

Jest란?

 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 현재 대세라고 말할 수 있다.

☞ all-in-one 테스팅 라이브러리

 

아래 링크에서 더 자세한 설명과 설치법을 볼 수 있다.

https://jestjs.io/docs/getting-started

Getting Started · Jest

 

 

 

 

 

 

 

 

설치

npm install -D jest //개발 의존성으로 설치

 

 

 

 

 

 

test 스크립트 수정하기 (package.json)

...

"scripts": {
	"test": "jest",
},

...

package.json에서 scripts 부분을 수정하면 된다.

이 후에 npm test를 입력하면 jest 커맨드를 실행할 수 있다.

 

 

 

 

 

 

 

테스트 코드 작성하기

test("테스트 설명", () => {
  expect("검증 대상").toXxx("기대 결과");
});

toXxx 부분에서 사용되는 함수를 흔히 Test Matcher라고 한다. 보통 이 부분에 toBe(), toEqual() 등이 사용된다.

이 부분에서 검증 대상과 기대 결과를 비교할 때 사용된다.

 

Jest는 기본적으로 test.js로 끝나거나, __test__ 디렉터리 안에 있는 파일들은 모두 테스트 파일로 인식한다. 만약 특정 테스트 파일만 실행하고 싶은 경우에는 npm test [파일명 or 경로]를 입력하면 된다.

 

 

 

 

 

 

 

기초 문법

• describe
  • 테스트 단위를 묶는 가장 큰 단위
  • 테스트 시 describe에 설명된 내용으로 테스트 단위를 크게 분류해준다.
• test(), it()
  • 기본 테스트를 한다.
• expect
  • 테스트할 변수나 값을 넣는다.
  • 이후 toBe나 toEqual을 이용해 예측값과 비교한다.
• toBe
  • 단순 비교
• toEqual 
  • 배열이나 객체 내부까지 깊은 비교를 해준다
• beforeEach 
  • test()가 실행될 때마다 실행해주는 전처리기
• afterEach 
  • test()가 종료될 때마다 실행해주는 후처리기

https://jestjs.io/docs/expect

Expect · Jest

위의 링크를 통해 다른 요소들도 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

간단한 적용 예제

index.js

const sum = (a, b) => {
  return a + b;
};

module.exports = {
  sum,
};

 

index.test.js

const { sum } = require('./index');

describe('test index.js file', () => {
  it('sums a and b', () => {
    let result = sum(1, 2);
    expect(result).toBe(3);
    result = sum(3, 4);
    expect(result).toBe(7);
  });
});

index에서 sum 함수를 가져온다.

describe 내부에서 sum 함수에 대한 test 코드를 작성한다.

 

위처럼 우리가 확인하고자 하는 값과 기대값을 추가함으로써 테스트 코드를 작성할 수 있다.

 

 

 

 

 

 

 

추가로 공부해볼 것들

• Mock 함수를 만들어 테스트하기
  • 비동기 함수, 특히 API를 Call하는 함수를 테스트할 때 백엔드 서버의 상황에 따라 테스트 결과가 달라질 수 있다는 문제가 있다. 이러한 문제를 Mock 함수로 해결할 수 있다.fetch와 같은 함수를 제공하지 않는다.
  • 따라서 fetch를 임의로 만들어주면 테스트 환경에서의 fetch는 내가 만든 가짜 fetch가 실행된다.
• 마우스 클릭의 좌표가 테스트에 필요한 경우가 있다.
  • 이런 경우 MouseEvent 객체를 만들어서 사용하면 된다.
• jest에서 setTimeOut 테스트를 하려면 jest.useFakeTimers()로 처리해야 한다.

기타 여러 테스트 코드를 추가로 공부할 예정이다.

 

비동기 코드 관련 참고할 블로그

https://www.daleseo.com/jest-async/

Jest로 비동기 코드 테스트 작성하기

 

 

 

 

 

 

 

 

 

 

 

---

테스트 코드라는 걸 말로만 들어보고 한 번도 직접 작성해본 적이 없는데, 이번 기회에 열심히 배울 수 있을 듯 하다. (프리크스 2주차에 있음)

Jest도 알아가는 중인데, 테스트 코드라고 말하니까 뭔가 두려운 기분이다.

내가 구현한 기능들에 대한 테스트를 해보는 건데 왜 이렇게 어려워 보이지...?ㅋㅋㅋㅋㅋ

공부해야 할 부분들이 아직 많은 듯 하다. 저기 추가로 적어놓은 것들과 직접 구현해보고 느낀 점도 추가로 글로 적어야겠다.