Never Call new Date() Inside Your Components never-call-new-date-inside-your-components

function Today({ date = formatDate(new Date()) }) {
  return <label>{date}</label>
}

컴포넌트 내에서 new Date()와 같은 비순수한 함수를 호출하면, 호출할 때마다 결과가 달라집니다. 이는 테스트에서 일관된 결과를 기대할 수 없게 만들어, 테스트가 불안정해질 수 있습니다. 코드 변경 없이도 테스트가 때로는 통과하고, 때로는 실패하는 Flaky Test를 유발할 수 있습니다.

순수하지 않은 함수의 결과나 함수를 prop으로 전달함으로써 컴포넌트가 더 예측 가능해지고, 테스트하기 쉬워집니다. 이렇게 하면 테스트 시 특정 날짜를 제어할 수 있어, 일관적이고 신뢰할 수 있는 테스트 결과를 얻을 수 있습니다.

기본 매개변수를 사용하면 개발자 경험이 향상됩니다. 기본 동작(new Date()로 오늘 날짜를 얻는 것)을 유지하면서도, 테스트 중 특정 값을 제공할 수 있는 유연성을 유지할 수 있습니다.