침착해... 테스트 코드 작성 중 유용한 디버깅 방법: screen.debug

테스트 코드 작성 중, 컴포넌트가 실제로 어떻게 렌더링되는지 알고 싶을 때가 있다.
나는 제대로 한 것 같은데 안 되니까 답답해서 숨이 안 쉬어지고 영문을 몰라 팔짝 뛸 노릇이다.

그럴 때는 해당 컴포넌트에 test id를 prop으로 전달하고, screen.debug 메서드의 인자로 해당 엘리먼트를 넘겨보자(test id를 꼭 사용할 필요는 없고, 어떻게든 엘리먼트만 잡을 수 있으면 된다).
screen.debug가 실행될 때 해당 엘리먼트가 어떤 상태였는지 터미널에 출력된다.

아래는 사용 예시다.

test('A 필터를 선택했을 때 10일을 넘어선 기간을 입력하면 에러 메시지가 보여야 한다.', () => {
  renderComponent({ filterOption: 'A' })

  const startDateInput = screen.getByPlaceholderText('시작일')
  const endDateInput = screen.getByPlaceholderText('종료일')

  fireEvent.mouseDown(startDateInput)
  fireEvent.change(startDateInput, { target: { value: '2022-01-01' } })

  // 이 시점에서 testComponent의 상태가 매우 궁금하다. 왜 안 되는 거야??!
  screen.debug(screen.getByTestId("testComponent"))

  fireEvent.mouseDown(endDateInput)
  fireEvent.change(endDateInput, { target: { value: '2023-01-11' } })

  fireEvent.keyDown(endDateInput, { key: 'Enter' })

  expect(screen.getByText('최대 10일까지 조회할 수 있습니다.')).toBeInTheDocument()
})