React 에서 Jest 를 활용하여 TDD 배우기 - 1

최근에 테스팅에 대해 관심이 좀 가지게 되었습니다 그중 단위 테스트가 많이 궁금하였는데

이번에는 React 에서 Jest를 활용하여 Jest가 무엇인지, 그리고 TDD를 어떻게 하는지에 대해 알아보도록 하겠습니다

 

Jest란?

페이스북에서 개발하고 관리하는 자바스크립트 테스트 프레임워크입니다.

Jest는 사용자 친화적이고, 다양한 기능을 제공하며 구성이 간단하고 다양한 환경에서 사용할 수 있기 때문에 많은 자바스크립트 개발자들이 사용합니다

 

사실 Jest는 주로 TDD를 할 때 많이 사용합니다

그래서 이번엔 Jest도 배우면서 TDD 도 같이 알아보도록 하겠습니다

 

TDD란?

테스트 주도 개발이라는 의미를 가지고 있으며, TDD는 소프트웨어 개발의 한 방법론으로 코드를 작성하기 전에 테스트를 먼저 작성하고, 그 테스트가 통과하도록 코드를 구현하는 방식입니다

TDD 기본원칙은 Red-Green-Refactor입니다

Red: 실패하는 테스트를 먼저 작성, 이 단계에서는 아직 구현되지 않은 기능에 대한 테스트를 작성하므로 테스트는 실패하게 됩니다

Green : 테스트를 통화하도록 코드를 작성합니다. 이 단계에서는 테스트를 통과하는데 필요한 최소한의 코드만 작성하고 코드의 완성도보다는 테스트 통과에 초점을 맞춥니다

Refactor : 코드를 개선, 테스트가 통과하면 이제 코드를 리팩토링하며 가독성을 높이고, 중복을 제거하며 기타 코드 품질을 향상 시킬수 있습니다. 리택토링 후에도 테스트가 계속 통과해야 합니다.

 

그러면 실제 테스트 코드를 작성하기 전 Jest에서 많이 사용하게 되는 Matchers에 대해 먼저 알아보도록 하겠습니다

 

Matchers

Jest에서  테스트의 기댓값(expecation)을 정의하는 데 사용됩니다. 즉 예상한 결과가 맞는지에 대해 검증하는 데 사용이 됩니다

.toBe(value) : '===' 연산자를 사용하여 정확한 등가성을 확인, 기본적인 값 비교에 주로 사용됩니다

.toEqual(value) : 객체의 모든 필드와 배열의 모든 요소를 재귀적으로 검사하여 깊은 동등성을 확인합니다

.not : 다음에 오는 Matcher를 부정합니다. 즉 .not.toBe(value) 는 값이 다르면 테스트를 통과합니다

.toBeNull() : 값이 null 인지 확인합니다

.toBeUndefined() : 값이 undefined 인지 확인합니다

.toBeDefined() : 값이 undefined가 아닌지 확인합니다

.toBeTruthy() : 값이 truthy(참으로 간주되는 값) 인지 확인합니다

.toBeFalsy() : 값이 fasly(거짓으로 간주되는 값) 인지 확인합니다

.toMatch(regexOrString) : 문자열이 정규표현식이나 문자열과 일치하는지 확인합니다

.toContain(item) : 배열이나 문자열이 특정 아이템을 포함하는지 확인합니다

.toThrow(error?) : 함수가 특정 에러를 던졌는지 확인합니다

.toHaveLength(number) : 배열이나 문자열의 길이를 확인합니다

 

 

그러면 이제 실제 예제로 한번 테스트코드를 만들어보겠습니다

우선 간단하게 TDD 개발 방법론과 Jest를 이용한 함수를 만들어보겠습니다

 

TDD와 Jest 이용하여 함수 만들기

함수명 : cacludateAge

입력 : 생년월일(Date 객체)

출력 : 오늘 날짜 기준으로 하는 현재 나이(정수)

 

즉 생년월일을 입력으로 받고 계산해서 현재 나이를 출력해 주는 함수를 만들어보겠습니다

 

우선 TDD 개발방법론에 따라 Red-Green-Refactor에 순서대로 진행을 해야 합니다

Red

Red 단계에서는 실패하는 테스트를 먼저 작성합니다

즉 calculateAge 함수를 만들지 않고 테스트 코드를 작성합니다

test("calculateAge", () => {
  expect(calculateAge(new Date("1999-06-24"))).toBe(24);
});

expect 함수는 어떠한 값을 인자로 받아 결과 값에 대해 다양한 방법으로 테스트를 수행하는 expecation object를 반환합니다

즉 calculateAge 함수를 실행하고. toBe 를 통해 해당 함수에 출력값이 24인지 체크하는 테스트 코드입니다

 

이 테스트 코드를 실행하면 아래와 같이 실패하게 됩니다 이는 현재 Red단계이기 때문에 무조건 실패하게 되어있습니다

 

Green

이제 실제 cacludateAge 함수를 구현해서 테스트를 통과하는 코드를 작성합니다

간단하게 아래와 같이 구현하였습니다

export const calculateAge = (birthDate: Date) => {
  const toDate = new Date();
  return toDate.getFullYear() - birthDate.getFullYear();
};

이후 이제 다시 테스트 코드를 실행하면 아래와 같이 테스트가 통과됩니다

 

Refactor

코드를 개선하는 단계입니다 작성한 코드가 테스트를 통과 한 후 코드를 리팩토링 하여 개선할 수 있지만

현재 구현한 함수는 간단히 구현이 되어서 리팩토링을 하지 않아도 될꺼같습니다

 

 

마치며

제가 작성한 내용들은 간단하게 되어있어서 실제 실무에 적용할 때는 이것보다 더욱 복잡하고, 어려운 기능을 테스팅하고 구현하게 됩니다

아직은 공부단계이지만 어느 정도 학습이 완료가 되면 실제 프로젝트에도 한번 적용을 해보며 익숙해져야 될 거 같습니다

다음에는 React 테스팅 라이브러리를 사용해서 React 컴포넌트를 테스트하는 방법을 알아보도록 하겠습니다