게으른개발너D

jest - 설치 및 튜토리얼 본문

개발/JavaScript

jest - 설치 및 튜토리얼

lazyhysong 2023. 10. 23. 17:33

https://github.com/jestjs/jest

 

GitHub - jestjs/jest: Delightful JavaScript Testing.

Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub.

github.com

 

1. jest

jest는 facebook에서 만든 테스팅 라이브러리다.

출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다.

비교적 사용이 간단하며 Babel, Typescript 등에 모두 사용할 수 있다.

 

zero config

jest는 zero configuration 철학을 가지고 있어서 별도의 설정 없이 빠르게 테스트 케이스를 작성가능하다는 장점이 있다.

(여기서 zero config는 별도의 설정 없이 바로 작업하는 것을 목표로 한다는 뜻이다.)

 

facebook은 다음과 같은 설계 목적에 맞춰 jest를 개발하였다.

  1. 단순함
    Jest는 설정이 거의 필요 없는 테스트 프레임워크를 목표로 하였습니다. 이로 인해 개발자는 복잡한 설정 절차 없이도 빠르게 테스트를 작성하고 실행할 수 있습니다. 이는 테스트 작성의 진입 장벽을 낮추고, 더 많은 테스트 코드 작성을 유도하여 코드 품질 향상에 기여합니다.
  2. 성능
    Jest는 매우 빠르게 테스트를 수행합니다. 이는 큰 프로젝트에서도 빠른 피드백을 받을 수 있게 해주므로, 효율적인 개발이 가능하게 합니다.
  3. 풍부한 기능
    Jest는 모의 함수, 타이머, 비동기 테스트 등과 같이 다양한 테스팅 기능을 제공합니다. 이들 기능은 단위 테스트와 통합 테스트를 간편하게 작성하는 데 도움을 줍니다.
  4. 배려
    Jest는 개발자가 최대한 적은 노력으로 테스트를 수행할 수 있도록 설계되었습니다. 예를 들어, Jest는 실패한 테스트를 먼저 실행하고, 관련 없는 테스트는 실행하지 않음으로써 테스트 수행 시간을 최소화합니다.
  5. 개방성과 커뮤니티
    Jest는 오픈 소스 프로젝트로, 커뮤니티의 기여를 적극적으로 받아들입니다. 이는 Jest가 끊임없이 발전하고, 다양한 요구 사항을 충족할 수 있게 해줍니다.

 

 

2. jest 설치

$ npm install jest --save-dev

개발할 때만 사용할 것이기 때문에 --save-dev를 붙여준다.

명령어를 실행한 후 package.json의 scripts에 해당 내용을 추가하면 된다.

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

 

3. 간단한 튜토리얼

1. 테스트 대상 파일 만들기

fn.js라는 파일을 만들어 fn이란 변수에 함수들을 모아두자.

const fn = {
  add: (num1, num2) => num1 + num2,
};

module.exports = fn; // test file에서 사용할 수 있도록 export 해줌

2. 테스트 파일 만들기

테스트할 파일과 똑같은 이름을 붙이고 그 뒤에 test.js라고 붙여주면 된다.

fn.test.js

npm test를 실행하면 프로젝트 내에 모든 test 파일을 찾아서 실행해 준다.

이렇게 .test.jsfh 끝나거나, __test__라는 폴더 안에 있는 파일들은 모두 test 파일로 인식해 준다.

만약 직접 선택한 파일만 테스트하고 싶다면 npm test 뒤에 파일명이나 경로를 입력하면 된다.

 

test를 위해 아까 만든 fn.js 파일을 불러오자.

fn.test.js

const fn = require('./fn');

test()를 적고 테스트할 내용 설명을 적어준다.

설명 뒤에 함수를 하나 만든 후 함수안에는 expect를 한 후 검증할 대상을 적어준다.

 

먼저 간단한 코드를 작성해 보자.

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

expect에 검증할 값을 넣고 toBe에 기대되는 값을 넣어준다.

 

fn.js에서 만든 add 함수를 이용해 보자.

test('2 더하기 3은 5이다', () => {
   expect(fn.add(2, 3)).toBe(5);
});

expect안에 add 함수를 실행하면 5가 리턴된다. 이 값을 기대되는 값 5와 비교하여 성공 실패 여부를 판단한다.

 

실패하는 케이스도 한번 만들어 보자.

test('3 더하기 3은 5이다', () => {
   expect(fn.add(3, 3)).toBe(5);
});

3. 테스트 실행

npm test를 통해 test 파일을 실행시켜보자.

이런식의 결과가 나온다.

실패한 것은 어느부분이 실패했는지 알려준다.

 

마지막에 적었던 틀린 test 코드를 맞게 수정해 보자.

test('3 더하기 3은 5가 아니다.', () => {
   expect(fn.add(3, 3)).not.toBe(5);
});

toBe 부분을 6으로 바꿔주지 않고 앞에 not을 붙여줄 수 있다.

 

toBe 부분에 사용하는 함수를 Matcher라고 한다.

toBe는 숫자나 문자 등 기본 타입 값을 비교하는데 사용한다.

해당 부분에 여러가지 matcher가 올 수 있다.

 

 

 

 

 

출처

https://www.youtube.com/watch?v=g4MdUjxA-S4

https://blog.imqa.io/testing-framework-jest/

'개발 > JavaScript' 카테고리의 다른 글

jest - 비동기 코드 테스트  (0) 2023.10.24
jest - Matcher  (0) 2023.10.23
[test] js test code 작성  (0) 2023.08.07
스코프(Scope)와 클로저(Closure)  (0) 2023.08.04
흐름제어 (Control Flow, Data Flow)  (0) 2023.08.04
Comments