TIL-221115- 태그가 어떤 이벤트를 사용하나 확인하자

오늘은 저번 주 스프린트 목표였지만 달성하지 못했던 프론트엔드 테스트 코드 짜기를 완료하기 위해서 하루 종일 테스트 만 했던 날이다.

인수 테스트 랑 컴포넌트 테스트만 주구 장장 했던 하루 였다. 하루 종일 테스트만 만든 결과 확실히 테스트 코드와는 조금 친해 진 하루 였던 것 같다.

확실히 테스트를 짜니 오타를 냈던 부분이나 태그가 이상하게 잡혀져 있던 부분들도 잡을 수 있었고 내가 원하는 대로 동작한 다는 자신감이 생겼다.

하지만 테스트 코드 짜는 게 좋은 점만 있지만 역시 테스트를 만드는 방법을 따로 배워야 하니 어려운 것 같다.

페이지는 하나밖에 없는데 무슨 50개..

오늘 있었던 문제는 select태그는 테스트를 처음으로 해봤는데.. 이 테스트 하나 때문에 거의 2시간 가까이 삽질만하고 있었다.

테스트를 하려는 내용은 select태그를 클릭하고 select태그안에 있는 option을 클릭하면 onClickSelectOption이라는 함수가 실행이 되는 지만 확인을 하면 되는 아주 간단한 테스트 이다.

당연히 통과할 줄 알았던 테스트 였지만 어라? 안된다. 음.. 그러면 일단은 waitFor를 넣어보자는 생각으로

expect쪽에 waitFor()함수를 넣어 테스트를 해보니 성공을 했다. 하지만 뭔가 이상했다. waitFor를 넣으니 통과가 안되야 할 테스트도 무조건 테스트가 통과하는 현상이 발생했다?. (왜 이런지 알아봐야 겠음)

그리고 waitFor를 지우니 당연히 테스트는 통과를 못하는 것이다. expect쪽 전인 getByText테스트를 통해서 화면에 옵션들이 보이기 때문에 테스트가 뻑이 안나는 줄 알았는데 알고 보니 getByText가 성공하는 이유는 option들은 컴포넌트가 마운트 될때 props로 받아온

options라는 배열에 있는 요소 들이 이미 option태그로 들어있기 떄문이였다.
  
근데 저게 select박스를 클릭했을 때 보이는 건줄 알고 왜 안되지를 부르짖고 있을 때 다른 동료분이 도와주셔서 해결을 할 수있었는데 select태그에는 onClick이 아니라 onChange이벤트를 사용하고 있었다.

onChange이벤트에 onClick이벤트를 계속하고 있으니 옵션을 변경했을 때 실행되는 함수가 안불리는 게 당연했다..

onChange이벤트로 바꾸니 바로 해결이 됬다...