시간을 표시하는 React Component의 스냅샷 테스트는 Giithub actions에서만 수행됩니다.

현상.


특정 시점을 표시하는 React component 만들기
Component.tsx
// 2022/3/8
const date = props.date.toLocaleDateString()
// 18:39:04
const time = props.date.toLocaleTimeString()

고정 데이터를 입력하여 캡처 테스트를 실행합니다
Component.test.tsx
  const time: Date = new Date(1647165901000)
  const { asFragment } = render(
    <Component
      time={time}
    />,
  )
  expect(asFragment()).toMatchSnapshot()
로컬에서 캡처를 만들고 테스트 동작을 검사합니다.
이후 github actions에서push마다 스냅샷 테스트를 진행합니다
코드 수정은 이루어지지 않았지만 다음 오류로 테스트에 실패했습니다.
    Snapshot name: `時刻を表示させるcomponentのテスト`

    - Snapshot  - 1
    + Received  + 1

    @@ -100,11 +100,11 @@
    -                 2022/3/8 18:39:04   NG
    +                 3/8/2022 09:39:04 AM  NG
그래, github actions 서버는 JST가 아니야...

대책

  • 테스트에 사용할 생성 시간은 서버의 타임존에 의존하지 않습니다.
    getTimezone Offset 정보()여기.
    Component.test.tsx
    // const time: Date = new Date(1647165901000)
    const time: Date = new Date(
      1647165901000
      + (new Date().getTimezoneOffset() + 9 * 60) * 60 * 1000)
    ) 
    
  • 디스플레이를 일본식으로 통일
    Component.tsx
    // 2022/3/8
    // const date = props.date.toLocaleDateString()
    const date = props.date.toLocaleDateString('ja-JP')
    // 18:39:04
    // const time = props.date.toLocaleTimeString()
    const time = props.date.toLocaleTimeString('ja-JP', {hour12: false})
    
  • 이렇게 말하는 것은 당연한 것이지만 의외로 눈치채지 못했다.

    좋은 웹페이지 즐겨찾기