[Jest] 자바스크립트 테스트 프레임워크 : test 코드로 JS 의 기능 및 로직 점검하기 - React 테스트 코드

 

Jest란?

Jest는 페이스북에서 만든 JavaScript testing framework이다. config를 따로 설정하지 않아도 빠르게 테스팅 환경을 만들 수 있다는 것이 큰 장점이다. 2 장에서의 기본 개념과 코드는 코딩앙마님의 Jest 강의와 유데미의 JS 강의중 테스팅 모듈 파트를 참고하여 작성하였다.

 

 

1. Install Jest

npm install --save-dev jest

개발자 도구이므로 개발환경에서만 사용할거기 때문에 --save-dev를 붙여 설치한다.

 

2. Test 실행

package.json
  "scripts": {
    "test": "jest"
  },

스크립트 test 부분을 'jest'로 변경해준다

 

3. 테스트 코드 작성 (파일 생성)

파일명.test.js

또는 __tests__

 

test 파일을 생성하면

npm test시에 모든 .test.js 파일들을 다 불러와 실행한다.
직접 원하는 파일만 테스트 하고싶을 경우 파일명이나 경로 입력

//fn.test.js 파일 작성

const 함수명 = require('./파일명')

test('함수 설명 적어줌', ()=>{
	expect(검증할 대상 작성).toBe(원하는 결과값)
})

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

module.exports = fn;

npm test 실행시

Tests:에 test 결과값이 나옴, 1failed, 2passed, 3 total  이런식으로

 

-> toBe 함수를 Matcher라고 한다:문자나 숫자등 기본 타입값을 비교할때 사용한다

-> 객체나 배열은 toEqual 을 사용해 줘야한다.

 

2.1 유용한 matchers

Matcher는 테스트 대상 함수에서 반환된 값을 예측하기 위해 사용한다.

2.1.1 Primitive value

예측하는 값이 원시값(number, string, boolean 등)일 때는 다음의 macher를 자주 사용한다.

• toBe() : 해당 값과 일치하면 통과
• toBeNull() toBeUndefined() toBeDefined() : Null, Undefined, Defined인 경우 통과
• toBeTruthy() toBeFasly() : boolean 값 판별
• toBeGreaterThan()크다, toBeGreaterThanOrEqual() 크거나 같다, toBeLessTan() 작다, toBeLessThanOrEqual()작거나 같다 : 이상, 이하, 초과, 미만
• toBeCloseTo() : 소수점 계산 시 사용
• toMatch(/H/) : 정규 표현식으로 문자열 판단(포함되어 있는지 - 대소문자 구별 | 구별 없애려면 toMatch(/H/i)

2.1.2 Reference value

• toEqual() : 참조값(객체, 배열)을 비교할 때. 해당 값 포함하면 true
• toStrictEqual() : 더 엄격한 비교. 완전히 똑같아야 true
• toContain() : 배열에서 아이템 포함되어 있는지
  • ex) expect(["a", "b", "c"]).toContain("a")

2.1.3 Error 발생 여부

테스트에서 throw new Error("Error msg") 등의 에러 발생 여부를 체크하기 위해서는 아래와 같은 코드를 작성한다. 에러 메시지를 특정하여 잡아내는 것도 가능하다.

// fn.test.js // 테스트 코드
const fn = require("./fn");

test("에러가 발생하나요?", () => {
  expect(()=> fn.throwErr()).toThrow() // 어떤 내용이던 상관없이 예외가 발생하면 passed가 된다: 결과 true
});
// 특정 error인지 확인하기 위해서는 .toThrow(원하는error)
test("에러가 발생하나요?", () => {
  expect(()=> fn.throwErr()).toThrow("oo") // 결과는 false, 같은 에러메시지어야 true
});


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

module.exports = fn;