[POB#10] Assignment 3: 자란다 기업 과제 기술 정리. Jest를 이용한 test 작성

dongwon·2021년 8월 3일

원티드-프리온보딩

목록 보기

7/25

Assignment 3 과제를 통해 얻은 지식 정리 글입니다.
과제 레파지토리 : https://github.com/POB-Coconut/Assignment-3

🎯 Assignment 3 : 자란다

이번 기업 과제는 요구 사항이 많아 2번에 걸쳐 제출하는 방식입니다.
저는 이번에 관리자 로그인을 하면 등록한 계정 정보를 볼 수 있는 테이블 컴포넌트, 테이블 페이지 네이션, utils 함수 분리 및 Jest를 이용한 Test 작성을 맡았습니다. 이번 글은 Jest를 이용한 test 작성에 대한 글입니다.

❓ 테스트 작성을 해야 하는 이유

미들 레벨 개발자가 되기 위해 !

사실 프론트엔드를 공부하며 Jest를 이용해 test 작성을 해보진 않았습니다. 하지만 utils 폴더에 있는 함수 같은 경우 입력과 반환값을 테스트하기 위해 작성할 필요성을 느꼈습니다.

🧪 Jest를 이용한 Test

Jest는 테스팅 프레임워크라고 불립니다. 그만큼 다른 테스트 라이브러리와는 차이점이 있고 무엇보다 CRA에 자동 생성되기 때문에~~ㅎㅎ..~~ Jest를 사용했습니다.

💡 Test 방법

기본적으로 CRA로 프로젝트를 설정하면 Jest 관련 설정도 한 번에 설치가 됩니다. 저희는 somthing.test.js와 같이 2중 확장자를 사용하여 테스트를 작성합니다. 후에 테스트 명령어 ( CRA 같은 경우 yarn test )를 실행하면, Jest가 test 확장자를 식별해 테스트를 진행해 줍니다.

📄 Test 작성

테스트 파일 관리

먼저 저는 테스트할 파일들의 위치에 test 폴더를 생성에 한 번에 관리하였습니다.

Test 작성 방법

getTotalPageNum.js : test할 함수가 있는 파일

export const getTotalPageNum = (totalUserData, DataPerPage) => {
  return Math.ceil(totalUserData / DataPerPage);
};

getTotalPageNum.test.js : test 파일

1️⃣// getTotalPageNum.test.js
2️⃣import { getTotalPageNum } from "../getTotalPageNum";

3️⃣describe("return 체크", () => {
  4️⃣test("값 오름 오름 체크", () => {
    5️⃣expect(getTotalPageNum(5, 2)).6️⃣toEqual(3);
  });

    test('정수 체크', () => {
    expect(getTotalPageNum(4, 2)).toEqual(2);
  });
});

1. 테스트 파일을 생성합니다.
2. 테스트할 함수를 import 합니다.
3. describe를 이용해 test들을 한 번에 여러 개 묶을 수 있습니다.
4. test를 콜백 함수를 이용해 실질적으로 테스트할 수 있습니다.
5. 콜백 함수에는 expect를 이용해 기댓값을 구하고,
6. Matcher 함수를 통해 비교할 수 있습니다.

Matcher 함수

Matcher 함수는 expect를 이용한 기댓값을 비교할 수 있게 해주는 함수입니다. 여기선 tobe와 toEqual에 대해 정리하겠습니다.

✔️ toEqual

toEqual은 정확한 객체의 값을 테스트하기 위해 사용합니다.
아래와 같은 경우, 함수의 기댓값과 정확한 값을 비교하기 위해 사용합니다.

currentUsers([1,2,3], 0, 2)를 넣었을 때 [1, 2]가 반환되는지 테스트

테트스할 함수

export const currentUsers = (data, indexOfFirst, indexOfLast) => {
  const currentPageUsers = data.slice(indexOfFirst, indexOfLast);

  return currentPageUsers;
};

테스트 파일

import { currentUsers } from "../currentUsers";

describe("return 체크", () => {
  test("일반적인 return 체크", () => {
    expect(currentUsers([1, 2, 3], 0, 2)).toEqual([1, 2]);
  });

  test("마지막 페이지 return 체크", () => {
    expect(currentUsers([1, 2, 3], 0, 5)).toEqual([1, 2, 3]);
  });
});

✔️ tobe

tobe는 정확한 동등 (객체 동등)을 테스트하기 위해 사용합니다.
아래와 같은 경우 함수를 통한 반환값이 테스트 기댓값과 객체 동등 관계일 때를 테스트합니다.

validate('abcdef', /^ [a-zA-Z0-9]{4,12}$/) 결과 테스트

테트스할 함수

export const validate = (value, regExp) => {
  const reg = new RegExp(regExp);
  return reg.test(value);
};

테스트 파일

import { validate } from '../regex';

describe('정규식 테스트', () => {
  test('id 영어 테스트', () => {
    expect(validate('abcdef', /^[a-zA-Z0-9]{4,12}$/)).toBe(true);
  });

  test('id 한글 테스트', () => {
    expect(validate('ㄱㄴㅁㄷ', /^[a-zA-Z0-9]{4,12}$/)).toBe(false);
  });

  test('id 영한 테스트', () => {
    expect(validate('abㅁㄷ', /^[a-zA-Z0-9]{4,12}$/)).toBe(false);
  });

  test('id 특수 문자 테스트', () => {
    expect(validate('abcdef@', /^[a-zA-Z0-9]{4,12}$/)).toBe(false);
  });

  test('id 길이 테스트', () => {
    expect(validate('12345678', /^[a-zA-Z0-9]{4,12}$/)).toBe(true);
  });

  test('id 최소 길이 테스트', () => {
    expect(validate('123', /^[a-zA-Z0-9]{4,12}$/)).toBe(false);
  });

  test('id 최대 길이 테스트', () => {
    expect(validate('123456789abcdedf', /^[a-zA-Z0-9]{4,12}$/)).toBe(false);
  });
}