본문 바로가기
프론트엔드/카카오테크캠퍼스 2기

카카오테크캠퍼스 2기 | STEP2 | 23일차(24-07-24) 회고

by YUNI Heo 2024. 7. 29.
반응형

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 23일차(24-07-24) 회고

📝 Given-When-Then 기법

  • Given-When-Then 기법은 Behavior Driven Development(BDD)에서 자주 사용하는 패턴으로, 테스트 시나리오를 명확히 하는 데 큰 도움이 된다. 이 기법을 통해 테스트 코드 작성 시 각 단계를 명확히 구분할 수 있다.
    • Given: 테스트의 초기 상태나 조건을 설정한다.
    • When: 테스트 대상이 되는 행동을 수행한다.
    • Then: 행동의 결과를 확인한다.

 

📝 단위 테스트 작성 

  • 아래는 유틸리티 함수인 formatDate 함수를 테스트하는 예제이다. Given-When-Then 기법을 사용하여 작성되었으며, formatDate 함수가 주어진 날짜 객체를 올바른 형식으로 변환하는지 확인한다. expect와 toBe를 사용하여 실제 반환 값과 기대하는 값을 비교함으로써 테스트의 성공 여부를 결정한다.
import { formatDate } from "./date";

// Given: 날짜 객체가 주어졌을 때
// When: formatDate 함수를 호출하면
// Then: yyyy-MM-dd 형식의 문자열이 반환되어야 한다.
test("formatDate returns correct format", () => {
  const date = new Date("2024-07-21");

  // `expect`: 테스트의 결과를 검증하기 위한 Jest의 함수이다. 이 함수는 기대하는 값을 인자로 받아, 이를 기반으로 실제 결과와 비교한다.
  // `toBe`: `expect` 함수와 함께 사용되어, 기대하는 값과 실제 값이 일치하는지 확인하는 Jest의 matcher 함수이다.
  expect(formatDate(date)).toBe("2024-07-21");
});

Given: 초기 상태 설정

  • 초기 상태나 조건을 어떻게 설정해야 할지 고민이 되었다. 특히 복잡한 초기 상태가 필요한 경우, 이를 간결하게 설정하는 것이 어려웠다. 처음에는 모든 초기 조건을 테스트 함수 내에 직접 작성했지만, 이로 인해 코드가 복잡해지고 가독성이 떨어졌다.
  • 초기 상태나 조건을 설정할 때는 가능한 한 단순하고 명확하게 설정하려고 노력했다. 필요한 데이터를 미리 준비하고, 이를 재사용 가능한 함수나 모듈로 분리하여 사용함으로써 설정 과정을 간소화했다.

When: 행동 수행

  • 테스트 대상이 되는 행동을 명확히 정의하는 것이 어려웠다. 어떤 행동이 실제로 테스트의 핵심인지 파악하는 데 시간이 걸렸다. 특정 기능을 테스트할 때, 여러 가지 행동을 한꺼번에 테스트하려는 경향이 있었다. 이로 인해 테스트가 복잡해지고, 문제가 발생했을 때 원인을 파악하기 어려웠다.
  • 테스트 대상이 되는 행동을 명확히 정의하기 위해, 기능 명세서나 요구사항 문서를 참고했다. 또한, 코드 리뷰를 통해 테스트의 핵심 행동을 명확히 했다. 이를 통해 테스트의 초점을 맞추고, 불필요한 부분을 제거할 수 있었다.

Then: 결과 확인

  • 기대하는 결과를 명확히 정의하고, 이를 검증하는 방법을 결정하는 것이 고민이었다. 특히 복잡한 결과를 검증할 때, 이를 간결하게 표현하는 것이 어려웠다. 처음에는 복잡한 객체나 배열의 모든 요소를 하나하나 검증하려다 보니, 코드가 길어지고 유지보수가 어려워졌다.
  • 기대하는 결과를 명확히 정의하고, 이를 검증하는 방법을 결정할 때는 expect와 같은 검증 함수를 적극 활용했다. 복잡한 결과를 검증할 때는, 이를 작은 단위로 나누어 개별적으로 검증함으로써 테스트의 가독성과 유지보수성을 높였다. 이를 통해 테스트 코드가 더 명확하고 읽기 쉽게 되었다.

 

📝 Daily Scrum

  • 지난주 PR 회고

 

😋 Today 회고

  • Jest를 처음 사용할 때는 어려웠지만, Given-When-Then 기법을 적용해 보니 그 유용성을 깨닫게 되었다. 이제는 테스트를 더 구조화하고 명확하게 작성할 수 있어, TDD 방식이 더욱 익숙해질 때까지 이 기법을 지속적으로 활용하려고 한다. 자주 사용하다 보면 자연스럽게 TDD 방식에도 익숙해질 것이라 기대된다.

 

➡️ 참고 링크

https://hoony-gunputer.tistory.com/entry/jest-%EC%97%AC%EB%9F%AC%EA%B0%80%EC%A7%80-totoBe-toEqual-toStrictEqual-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

 

jest 여러가지 to~~(toBe, toEqual, toStrictEqual...) 사용해보기

ToBe와 ToEqual 사용해보기 테스트하려는 코드 const hi = { add : (num1, num2) => num1 * num2, makePerson: (name, age) =>({name, age}) } module.exports = hi; 두개의 객체는 서로 일치하니 당연히 true가 되어야 할것 같은데 to

hoony-gunputer.tistory.com

https://inpa.tistory.com/entry/JEST-%F0%9F%93%9A-jest-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

 

[JEST] 📚 유용한 Matcher 함수 종류 모음

JEST Matcher 정리 Jest는 다른 방법으로 값을 테스트 하도록 matcher 라는 것을 사용한다. matcher란 '이거 맞아?' 라고 물어보는 메서드리고 보면 된다. 기대한 값이 실제 반환된 값과 일치하는 지를 확

inpa.tistory.com

 

 

 

반응형