사이드 프로젝트를 하면서 React Testing-Library를 사용해보려고 한다. React Testing-Library는 Jest 기반으로 가장 많이 사용하기 때문에 Jest의 기초를 배워보고 내 사이드 프로젝트에 어떻게 적용했는지를 글로 작성하려고 한다.
0. Jest란?
- Jest는 React를 만든 Facebook에서 선보인 Testing 도구이다.
- Jest는 Zero Config의 특징을 가지고 있어서 별도의 설정 없이 바로 작업하는 것을 목표로 한다.
- 현재 가장 많이 사용되고 있는 Testing 도구이다.
1. JS에서 Jest 설치
mkdir jestTest
npm init
npm install jest -save-dev
// package.json
"script": {
"test": "jest"
}파일명에 xxx.test.js로 저장하고 터미널에 npm start 명령어를 입력하게 되면 프로젝트 내에 모든 테스트 파일을 찾아서 테스트를 수행한다. 만약 선택한 파일만 테스트를 수행하고 싶다면
2. Jest의 기본적인 패턴
숫자를 2개 받아서 두 숫자를 더해주는 함수가 있다고 가정해보자. 다음과 같이 테스트를 작성할 수 있다.
const fn = require('./fn');
test('1은 1이야.', () => {
expect(1).toBe(1);
})
test('2 더하기 3은 5야.', () => {
expect(fn.add(2, 3)).toBe(5);
})
test('3 더하기 3은 5야.', () => {
expect(fn.add(3, 3)).toBe(5);
})위와 같이 2개의 성공 case와 1개의 실패 case로 test를 작성할 수 있다. 결과는 다음과 같다. toBe로 기대되는 결과값을 적어주면 된다.
예상 했던 대로 1개의 실패가 발생한 것을 확인할 수 있다. toBe 앞에 not을 붙이면 기대되는 결과값이 아닌 값을 넣었을 때 pass한다.
test("테스트 설명", () => {
expect("검증 대상").toXxx("기대 결과");
});Jest는 기본적으로 위와 같은 패턴을 띄고 있는 것을 확인할 수 있다. toXXX 부분에서 사용하는 함수를 Matcher라고 한다. 위의 예시에서 사용된 toBe는 숫자나 문자등 기본 타입을 비교할 때 사용한다. 이 부분에는 여러가지 Matcher가 올 수 있다.
3. 자주 사용되는 Matcher
- toBe(): 예측 값이 Primitive Value일 때 사용된다. 해당 값이 일치하면 pass를 반환한다.
- toBeCloseTo(): 예측 값이 소수점일 때는(JS는 부동소수점을 이용하기 때문에 toBe로 비교하면 같은 값이어도 통과되지 않기 때문에) toBeCloseTo를 이용해야함.
- toEqual(): 객체, 배열을 비교할 때. 해당 값 포함하면 pass를 반환한다.
- toStrictEqual(): toEqual에서 더 엄격한 비교를 할 때 사용한다. 객체의 모든 property 값이 같아야 pass를 반환한다.
- toBeNull(): Null인 경우 통과된다.
- toBeUndefined(): undefined인 경우 통과된다.
- toBeDefined(): defined인 경우 통과된다.
- toBeTruthy(), toBeFalsy(): toBeTruthy()는 검증 대상이 true로 간주되면 테스트 통과이고, toBeFalsy()는 반대로 false로 간주되는 경우 테스트가 통과된다.
- toBeGreaterThan(): 입력한 값보다 크면 통과된다.
- toBeGreaterThanOrEqual(): 입력한 값보다 크거나 같으면 통과된다.
- toBeGreaterThan(): 입력한 값보다 작으면 통과된다.
- toBeGreaterThanOrEqual(): 입력한 값보다 작거나 같으면 통과된다.
- toMatch(): 정규식 기반의 테스트가 필요할 때, toMatch() 함수를 사용하면된다.
- toContain(): 배열에서 특정 요소가 있는지 확인하고 싶을때 사용한다. 특정 요소가 있다면 통과된다.
- toThrow(): 예외 발생 여부를 테스트해야할 때는 toThrow() 함수를 사용하면 된다. toThrow() 함수는 인자도 받는데 문자열을 넘기면 예외 메시지를 비교하고 정규식을 넘기면 정규식 체크를 해준다.
toThrow를 사용할 때는 다른 Matcher들과 다르게 expect() 함수에 넘기는 검증 대상을 함수로 한 번 감싸주어야 한다. 그렇지 않으면 예외 발생 여부를 체크하는 것이 아니라, 테스트 실행 도중 정말 그 예외가 발생하기 때문에 그 테스트는 항상 실패하게 된다. 다음과 arrow function을 이용하여 감싸주면 된다.
// 무조건 실패하는 코드
expect(getUser(-1)).toThrow();
// 올바른 코드
expect(() => getUser(-1)).toThrow();4. 마치며
이외에도 다양한 matcher가 존재한다. matcher에 대해 더 알고 싶다면 Jest 공식문서를 참고하면 될 것이다.
