[Jest] Jest의 기본 메소드

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 이번 포스트에서는 JavaScript의 테스트 프레임워크인 Jest의 기본적인 문법에 대해서 해설하고자 한다. Vue Test Utils는 Jest에 맞춰서 움직이기 때문에 먼저 Jest의 기본 분법을 이해해둘 필요가 있다.

 

제일 기본적인 3개의 메소드 (describe, it, expect)

---

 Jest로 테스트를 할 때에 빠트릴 수 없는 기본 메소드 세 가지를 소개하도록 하겠다.

• describe
• it(test)
• expect

 

describe

describe 메소드는 관련된 몇 가지 테스트를 묶는 블록을 작성하기 위한 메소드이다.

인수	데이터형	설명
제1인수(필수)	String	테스트 블록의 설명
제 2인수(필수)	function	테스트 케이스를 기재하기 위한 콜백 함수

사용법은 다음과 같다. 예를 들어, 인수로 받은 값을 제곱하여 출력하는 함수가 있다고 하자.

const double = (arg) => arg**2;

 이 double 함수의 테스트를 만들 경우, describe 메소드에 double 함수에 관한 블록을 다음과 같이 작성하게 된다.

describe('double함수', () => {
  // 여기에 테스트 케이스를 추가
})

 

it(test)

 it 메소드는 실제 테스트를 기재하는 메소드이다. it말고 test라고 작성해도 동일하게 동작한다.

인수	데이터형	설명
제1인수(필수)	String	테스트의 설명
제2인수(필수)	function	테스트 내용을 기재하기 위한 콜백 함수
제3인수(임의)	Number	타임아웃(단위:밀리초)  ※ 기본값은 5초

 아까 작성한 describe 메소드의 제2인수의 콜백 함수 안에 쓴다. 예를 들어, double 함수의 테스트 케이스를 3개정도 추가해봤다.

describe('double함수', () => {
 it('인수로 2를 전달하면 4가 반환된다', () => {
   // 여기에 테스트케이스를 작성
 })
  
 it('인수로 10을 전달하면 100이 반환된다.', () => {
   // 여기에 테스트케이스를 작성
 })
  
 // test라고 작성해도 동작한다.
 test('안수에 100을 전달하면 10000이 반환된다.', () => {
   // 여기에 테스트케이스를 작성
 })
})

 

expect

expect 메소드는 테스트 결과를 평과하는 메소드이다. expect 하나만 쓰는 것보다는 matcher을 호출하는 평가 함수를 메소드 체인에 연결하여 사용한다.

인수	데이터형	설명
제1인수(필수)	-	평가한 값

 방금의 it 샘플 코드에 expect랑 match를 추가하면 테스트가 완성된다.

describe('double함수', () => {
 it('인수로 2를 전달하면 4가 반환된다', () => {
   const result = double(2);
    // result가 4인가
   expect(result).toBe(4);
 })
  
 it('인수로 10을 전달하면 100이 반환된다.', () => {
   const result = double(10);
    // result가 100인가
    expect(result).toBe(100);
 })
  
 // test라고 작성해도 동작한다.
 test('안수에 100을 전달하면 10000이 반환된다.', () => {
   const result = double(100);
   expect(result).toBe(10000);
 })
})

 

matchers

 앞서 expect는 matcher랑 사용한다고 설명했다. matcher란 무엇인지 그리고 어떤 종류가 있는지 대해서 알고 싶다면 공식 사이트를 참고하길 바란다.  여기서는 많이 사용되는 몇 가지에 대해서만 소개하도록 하겠다.

toBe : 값이 동일한가.

 toBe는 값이 동일한지를 검사한다. 보다 상세하게 설명하면, 원시적 값을 비교하거나, 오브젝트 인스턴스의 참고 ID를 확인한다.

 toBe의 인수에 오브젝트를 전달한 경우, Object.js로 비교하게 된다.

const obj = {
  name: "Jest Sample",
  num: 12,
};

describe("toBe의 샘플", () => {
  it("obj의 num속성값이 12이다.", () => {
    expect(obj.num).toBe(12);
  });

  it("obj의 name속성값이 'Jest Sample이다.", () => {
    expect(obj.name).toBe("Jest Sample");
  });
});

not : 부정

 not은 expect의 메소드 체인에 연결된 검증 함수의 반대 테스트를 한다. 말로 설명하면 복잡해지므로, 샘플코드를 참고해주길 바란다.

describe("not의 샘플", () => {
  it("1의 2제곱은 2가 아니다.", () => {
    expect(1**2).not.toBe(2);
  });
});

toEqual : 값이 동일한가.

 toEqual은 오브젝트 인스턴스의 모든 속성이나 배열 모든 요소를 재귀적으로 동일한지 테스트한다. toBe와 다른점은 toBe 메소도를 이용한 오브젝트 판정 경우, 주소를 참조하지만, toEqual은 각 값을 ===로 판정한다.

const obj1 = {
  name: "홍길동",
  age: 20,
};
const obj2 = {
  name: "홍길동",
  age: 20,
};
const obj3 = obj2;

describe("toBe와 toEqual의 차이", () => {
  it("속성의 일치까지 확인", () => {
    expect(obj1).toEqual(obj2);
  });

  it("주소가 일치하지 않는 것을 확인", () => {
    expect(obj1).not.toBe(obj2);
  });

  it(주소가 일치하는 것을 확인", () => {
    expect(obj2).toBe(obj3);
  });
});

toHaveBeenCalled(toBeCalled) : 모크 함수가 호출됐는가.

toHaveBeenCalled은 모크 함수가 호출됐는지 아닌지를 테스트한다. toBeCalled도 동일한 테스트를 한다.

/**
 * 함수가 호출된 것을 로그에 출력한 후에 함수를 실행한다.
 */
const callFunction = (f) => {
  console.log("call function");
  f();
};

describe("toHaveBeenCalled", () => {
  it("모크 함수가 호출된 것을 확인한다.", () => {
    // 모크함수의 작성
    const mockFunction = jest.fn();
    callFunction(mockFunction);

    expect(mockFunction).toHaveBeenCalled();
  });
});

---

참고자료

https://zenn.dev/tentel/books/08b63492b00f0a/viewer/27c963