(TIL)Javascript에서 단위 테스트하기(Jest 기본 사용법)

단위 테스트(Unit Test)란?

유닛 테스트(unit test)는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다. 즉, 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차를 말한다. 이를 통해서 언제라도 코드 변경으로 인해 문제가 발생할 경우, 단시간 내에 이를 파악하고 바로 잡을 수 있도록 해준다.

Jest란?

페이스북에서 만든 자바스크립트 테스팅 라이브러리입니다. 기존에는 조금씩 다른 기능의 여러 테스팅 라이브러리를 조합해서 사용하곤 했는데 Jest는 한 번의 설치만으로 대부분의 테스팅 기능을 사용할 수 있게 해줍니다.
이번 포스팅에서는 Jest의 기본적인 사용법에 대해 알아보도록 하겠습니다.

설치 && 설정

먼저 프로젝트를 생성한 후 jest를 설치해 줍니다

npm init -y
npm i -D jest

그 후 package.json 파일의 script property에서 다음의 명령어를 추가해 줍니다

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

• scripts에 --watchAll flag를 추가해주면 새로운 코드를 저장할 때마다 자동으로 test를 실행합니다.
• --coverage flag를 추가하면 테스팅되고 있는 코드의 커버 범위를 알려줍니다.

첫 Jest 코드 작성

설정까지 끝났으면 test.js 라는 파일을 만든 후 다음과 같이 코드를 입력합니다.

// 테스트할 코드
export const add = (x, y) => x + y;

// 테스팅 코드
describe("add", () => {
  test("should add two numbers", () => {
    expect(add(1, 1)).toBe(2);
	expect(add(1, -4)).toBe(-3);
  });

설명

• describe는 여러 테스팅 코드를 하나로 묶을때 사용합니다.
  - describe(name,fn)
• test(혹은 it) 실제로 테스팅을 실행하는 코드입니다.
  - describe와 마찬가지로 test(name, fn)
  -test에 들어 가는 함수는 expext(테스트할 함수).(toBe,toEqual 같은 matcher)의 형태입니다.

테스트 통과

테스트가 통과 됐다면 초록색 글씨로 다음과 같이 나옵니다.

테스트 실패

실패 했다면 빨간색으로 다음과 같이 표시됩니다.

• 어떤 테스트가 실패했는지, 예상값과 실제로 받은값, 실패한 코드의 위치를 알려줍니다.

한 걸음 더

함수를 만들고 싶은데 이 함수는 다음의 두 가지 조건을 지켜야합니다.
1. 두 매개변수의 값을 더해준다
2. 오직 number 타입의 매개변수만 받아야 한다
먼저 두 조건을 만족하는 테스트를 작성해 봅시다.

테스트 코드

describe("add", () => {
  it("should add two numbers", () => {
    expect(add(1, 2)).toBe(3);
  });

  it("should only add numbers ", () => {
    expect(add(2, "2")).toBe(undefined);
    expect(add(2, {})).toBe(undefined);
    expect(add(2, [])).toBe(undefined);
  });
});

• 먼저 첫 번째 테스트에서 두 매개변수가 더해지는지 확인하고
• 두 번째 테스트에서 number이외의 data가 더해질때 undefined가 출력되는지 확인 합니다.
  (참고로 자바스크립트에서는 2 + {}를 하면 NaN,undefined가 아닌 "2[object object]"가 출력됩니다)

테스트할 코드

이제 완성한 테스트 코드를 준수하는 코드를 작성해봅시다.

export const add = (x, y) => {
  if (typeof x === "number" && typeof y === "number") {
    return x + y;
  }
};

• 두 매개변수의 type이 number면 값을 더해주고, 아니라면 undefined를 출력해주는 함수입니다.

이와같이 테스트를 먼저 작성하고 그 조건에 맞춰서 코드를 작성하는 것을 Test-driven development(테스트 주도 개발)이라고 합니다.

마치며

Jest를 사용한 자바스크립트 단위 테스트와 TDD의 기본을 알아 보았습니다. 다음 포스트에서는
자주 사용되는 Matcher와 async 데이터를 테스트 하는 법을 알아 보겠습니다.