[테스트 코드 - Jest] Test Code 작성 및 Jest 설정 추가

[Jest] Test Code 작성 및 Jest 설정 추가

Test Code 작성하기

이전 게시글 Jest 설치 및 기본 셋팅에서는 간단한 소개와 셋팅만 하였습니다. 이번 게시글에서는 아주 간단한 Test Code를 작성해보겠습니다. 그리고 추가적인 Jest 설정에 대해 알아보도록 하겠습니다. (이전에 같이 하면 좋았지만 코드를 작성하여 이해가 쉬워서 여기서 추가하였습니다.)

간단하게 프로젝트 폴더 구조를 보여드리면 아래와 같습니다.

src 폴더 아래 add.js 파일이 있습니다. 그리고 test 폴더 아래 add.test.js 파일이 있습니다. 마지막에 작성해둔 프로젝트 코드 보기 링크로 확인하시면 더 편합니다.

Test Code 작성 (add function)

아주 간단한 add 함수 구현 및 테스트 코드 작성해봅시다. 우선 add 함수는 아래와 같습니다.

function add(num1, num2) {
  return num1 + num2;
}

module.exports = add;

아주 간단한 코드여서 설명할 필요는 없어보입니다. 그리고 test code를 작성하는 방법은 간단합니다.

test("설명", () => {
  // 원하는 테스트
  expect("테스트 ...").toBe("기대값");
});

test 함수는 jest에서 제공하는 test용 함수입니다. expect 함수 내에 원하는 테스트를 작성하고 toBe에 기대한 값을 작성하면 됩니다. 한번 작성해봅시다.

const add = require("../add.js");

test("add-1", () => {
  expect(add(2, 2)).toBe(4);
});

test("add-2", () => {
  expect(add(2, 2)).toBe(4);
});

성공과 실패하는 경우를 비교하기 위하여 총 2개의 test code를 작성하였습니다. add-1 test code가 성공, add-2 test code는 실패입니다. Test code는 작성하였으니 실행을 해보아야겠죠? 아래 명령어를 입력해봅시다.

Test code 실행 명령어 : yarn run test

위 명령어를 입력하면 아래와 같은 결과가 나옵니다.

add-1은 성공, add-2는 실패하였다고 표시됩니다. Test code는 이게 끝입니다. 우리가 원하는 대로 원하는 결과가 표시되었습니다. 다음 게시글에서 test code에 대해 더 자세히 알아보고 추가적으로 해주어야할 setting에 대해 알아봅시다.

Jest 추가 셋팅

◆ coverage 정보 숨기기

위 결과 이미지를 보면 밑에 표 형식으로 추가적인 정보가 표시됩니다. 이것이 있으면 파일이 많아지는 경우 매번 보이면 불편할 수 있으니 보이지 않게 수정해봅시다.

jest.config.js 파일에 들어가셔서 collectCoverage: true로 되어 있는 값을 false로 변경해주시면 됩니다. 그럼 이제 yarn run test 명령어를 실행하셔도 표가 표시되지 않습니다. 만약 해당 정보가 보고 싶으면 어떡하냐? 그럼 명령어 뒤에 --coverage 만 붙이시면 됩니다. yarn run test --coverage 이렇게 실행하시면 정상적으로 표가 표시됩니다.

◆ 저장 시 test code 실행하기

지금은 파일 수정 후 다시 명령어를 입력하여야 test code가 실행됩니다. 수정 시 자동으로 test code가 실행되면 편하겠죠? script 명령어를 수정해봅시다.

// script 수정 전 코드 
"scripts": {
  "test": "jest"
}

// script 수정 후 코드 
"scripts": {
  "test": "jest --watchAll"
}

위와 같이 --watchAll option을 추가하면 수정할 때마다 test code가 재실행됩니다. 그런데 test code가 2,000개가 있다고 생각해봅시다. 그렇다면 2,000개가 재실행되겠죠? 이것을 방지하기 위해 commit 된 것은 제외하는 방법이 있습니다. 아래처럼 수정해봅시다.

"scripts": {
  "test": "jest --watch"
}

위와 같이 --watch option을 하면 commit이 되어 있는 test code는 재실행하지 않습니다.

참고자료

• Jest 공식 홈페이지
• 프로젝트 코드 보기 (못 따라오신 분은 여기서 clone 하시면 됩니다.)

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.