test 분석

lim1313·2021년 8월 14일
0

ERROR 리뷰

목록 보기
3/8

게더타운에서 만난 동료들

test 에러

오류가 생긴 코드

<div className='tweet__message'>
    <div className='tweet__message'>{tweet.content}</div>
</div>

해당 test 에러를 만났을 때 도대체 무엇이 문제인지 감이 잡히지 않았다. 새 트윗이 가장 앞으로 들어가야 한다는 조건을 만족시켰지만, 계속해서 test 에러가 발생했다.

그래서 동기들에게 도움을 요청했다.

동기들과 코드를 분석해보는 와중에 테스트 코드를 콘솔에 찍어보자는 이야기가 나오게 되었고, 콘솔에 찍어보니 다음과 같은 태그들이 보였다.

여기서 감을 잡게 되었다. 생성된 message는 5개인데, 왜 10개의 tweet__message div 태그가 찍히는 거지??
해당 코드가 있는 Tweet 컴포넌트로 가보니...

<div className='tweet__message'>
    <div className='tweet__message'>{tweet.content}</div>
</div>

이렇게 작성했던 것이었다...하하하...
tweet__message를 한개를 지우니 다음과 같이 5개의 div태그가 정상적으로 나오게 되었고, test도 모두 통과된 것을 확인할 수 있었다.


과제를 제출하면서 test를 돌려볼 때, 과제에서 요구하는 기능은 모두 구현이 되지만 test만 통과되지 못하는 상황이 종종있었다. 그럴 때마다 test에러 메시지를 보며 문제가 되는 곳을 찾아냈었는데, 콘솔에 test 코드를 작성해 보는 것도 방법이 된다는 것을 알게 되었다.

혼자 해결하려고 했다면 내가 아는 방법으로 에러를 찾아봐야 했었을 텐데, 여러 동기들과 같이 코드를 보니, 에러 코드를 분석하는 다양한 방법을 확인할 수 있어서 좋았다.

profile
start coding

0개의 댓글