본문 바로가기
FrontEnd/Test

[Test] Jest 기본 사용법

by 위그든씨 2024. 1. 9.

https://www.daleseo.com/jest-basic/

 

Jest로 기본적인 테스트 작성하기

Engineering Blog by Dale Seo

www.daleseo.com

1. jest란

 Jest는 테스트 과정에서 필요한 Test Runner, Matcher, Mock을 한 번에 해결해 줄 테스팅 프레임워크로 불리운다.

npm i -D jest

2. 실행

package.json 스크립트 옵션에서 아래와 같이 작성하여 npm test 라고 입력시 jest가 실행되도록 함

jest는 test.js로 끝나는 파일이나 , __test__ 디렉터리 안에 있는 파일은 모두 테스트 파일로 인식해줌.

( 특정 테스트 파일만 실행하고 싶으면 npm test <파일명 || 경로> 입력

 "scripts": {
    "test": "jest"
  },

3. 테스트 라이브러리를 실행함에 있어 필요한 사전지식(?)

  1. 매처 (Matcher):
    • 매처는 테스트 중에 특정 값이나 조건을 검증하는 데 사용되는 표현입니다. 이들은 테스트 코드 내에서 기대값(expected value)을 실제 값(actual value)과 비교하는 데 사용됩니다.
    • 예를 들어, Jest 같은 테스팅 프레임워크에서 expect(value).toBe(42)라는 코드는 value가 42와 정확히 일치하는지 확인하는 매처입니다. 여기서 .toBe(42)가 매처의 역할을 합니다.
    • 매처는 등가성 비교, 타입 검사, 배열의 길이 확인 등 다양한 형태로 존재할 수 있으며, 테스트의 의도를 명확하게 표현하는 데 중요한 역할을 합니다.
  2. 러너 (Runner):
    • 테스트 러너는 테스트 케이스를 실행하고 결과를 보고하는 소프트웨어입니다. 테스트 러너는 테스트 스위트를 관리하고, 각 테스트 케이스를 순차적으로 실행하며, 성공, 실패, 오류 등의 결과를 사용자에게 표시합니다.
    • 예를 들어, Jest, Mocha, Jasmine 등은 자바스크립트 환경에서 널리 사용되는 테스트 러너입니다. 이들은 테스트 코드를 구동하고, 결과를 개발자에게 알려주며, 종종 명령줄 인터페이스(CLI)를 통해 추가적인 테스트 옵션을 제공합니다.
    • 테스트 러너는 테스트 환경을 설정하고, 테스트 실행 순서를 관리하며, 종합적인 테스트 보고서를 생성하는 데 중요합니다.
  3. 목 (Mock):
    • 목은 실제 객체를 테스트 목적으로 모방한 객체입니다. 이들은 실제로 복잡하거나 예측 불가능한 외부 시스템(예: 데이터베이스, API, 복잡한 로직)과의 상호작용을 단순화하기 위해 사용됩니다.
    • 예를 들어, API 호출을 하는 함수를 테스트할 때, 실제 API 서버에 요청을 보내는 대신 목 객체를 사용하여 API 응답을 모방할 수 있습니다. 이렇게 하면 네트워크 지연이나 불안정한 외부 요인으로부터 독립적으로 테스트를 진행할 수 있습니다.
    • 목은 테스트 대상 코드가 외부 요소와 어떻게 상호작용하는지를 제어할 수 있도록 하며, 테스트의 신뢰성과 일관성을 높이는 데 도움을 줍니다.

4. 자주 사용되는 Matcher

// toEqual(), toMatch()

function getUser(id) {
    return {
        id,
        email: `user${id}@test.com`,
    };
}

// toEqual() 를 통해 위의 함수를 테스트,
// toMatch() 를 통해 정규표현식 체크

test('return a user object', () => {
    expect(getUser(1)).toEqual({
        id: 1,
        email: `user1@test.com`,
    });
    expect(getUser(1).email).toMatch(/.*test.com/);
});

 

// toBeFalsy() , toBeTruthy()

test('number 0 is falsy but string 0 is truthy', () => {
    expect(0).toBeFalsy();
    expect('0').toBeTruthy();
});

/**
 숫자 1이 true로 간주되고, 숫자 0이 false로 간주되는 것과 같이 모든 타입의 값들을 true 아니면 false 간주하는 규칙이 있음. 
 toBeTruthy()는 검증 대상이 이 규칙에 따라 true로 간주되면 테스트 통과이고, 
 toBeFalsy()는 반대로 false로 간주되는 경우 테스트가 통과됩니다.
 
 참고로 "0" 은 0이 아니므로 true로 간주 되어서 패스 되는겨
 */

 

// toHaveLength(), toContain() 배열에 특정 길이를 갖는 요소가 있는지, 특정 원소가 있는지 존재 여부

test("array", () => {
  const colors = ["Red", "Yellow", "Blue"];
  expect(colors).toHaveLength(3);
  expect(colors).toContain("Yellow");
  expect(colors).not.toContain("Green");
});

 

// toThrow(), expect() 함수에 넘기는 검증 대상을 함수로 한 번 감싸줘야함
// 그렇지 않으면 예외 발생 여부를 체크하는 것이 아니라, 
// 테스트 실행 도중 정말 그 예외가 발생하기 때문에 그 테스트는 항상 실패하게 됨 (id가 음수여서가 아닌 다른 예외로 발생하기 때문에 실패함)

function getUser(id) {
    if (id <= 0) throw new Error('Invalid ID');
    return {
        id,
        email: `user${id}@test.com`,
    };
}

test('throw when id is non negative', () => {
    expect(() => getUser(-1)).toThrow();
    expect(() => getUser(-1)).toThrow('Invalid ID');
});

 

저작자표시 변경금지

티스토리툴바