테스트 코드 작성 중, 컴포넌트가 실제로 어떻게 렌더링되는지 알고 싶을 때가 있다. 나는 제대로 한 것 같은데 안 되니까 답답해서 숨이 안 쉬어지고 영문을 몰라 팔짝 뛸 노릇이다. 그럴 때는 해당 컴포넌트에 test id를 prop으로 전달하고, screen.debug 메서드의 인자로 해당 엘리먼트를 넘겨보자(test id를 꼭 사용할 필요는 없고, 어떻게든 엘리먼트만 잡을 수 있으면 된다). screen.debug가 실행될 때 해당 엘리먼트가 어떤 상태였는지 터미널에 출력된다. 아래는 사용 예시다. test('A 필터를 선택했을 때 10일을 넘어선 기간을 입력하면 에러 메시지가 보여야 한다.', () => { renderComponent({ filterOption: 'A' }) const startDa..