리액트 테스트코드 - intro

프로젝트를 몇개 진행 했었는데 테스트 코드를 작성하여 내 코드를 검증한 적은 없는 것 같습니다.

이를 위해 테스트코드에 대해 공부해보려합니다 

 

우선 무작정 테스트를 적용하려고 보니 

어떤 것을 어떻게 테스트 해야하는 지 어려웠고 

현재 짜여있는 코드기반으로 테스트 코드 짜는게 새로 다 리팩토링하는 느낌이 들었습니다 

이에 Todo List 를 하나 만들어서 테스트 코드를 만들어 보고 

그다음에는 TDD방식으로 만들어볼 예정입니다 

 

우선 테스트 코드를 만드는 게 왜 어렵나 생각해보니 

각 코드의 상황을 명확하게 생각하지않고 코드를 짰기 때문인 것 같았습니다.

예를 들어 동작하지않는 상황을 고려하고 코드를 짠게 아니라 동작만되는 코드를 짜왔던 것 같습니다.

이에 투두리스트를 기존 방식대로 빠르게 만든 후 이를 리팩토링하며 변경해보며 이전에 제가 몰랐던 부분을 학습할 예정입니다 

 

제작된 투두리스트의 형태를 먼저 보겠습니다.

 

node express로 간단한 서버를 제작했습니다 

API 명세는 아래와 같습니다 

API	URI	res	req	비고
진행 중 GET	/todos/running	[{   id:string,   detail:string,   startDate:string,   endDate:string,   title:string,   state:boolean }, {} ]
완료 GET	/todos/done	[{   id:string,   detail:string,   startDate:string,   endDate:string,   title:string,   state:boolean }, {} ]
todo 세부 GET	/list/detail/?id=${}&state=${}	성공시 : status(200), {   id:string,   detail:string,   startDate:string,   endDate:string,   title:string,   state:boolean } 실패시: status(404),{errror: "찾으시는 데이터가 없습니다"}	querystring:{ id:string, state:boolean }	이것만 쿼리스트링으로 만들어서 다시 body에 담아서 보내는걸로 변경하겠습니다
Todo추가  POST	/todos	성공시 : status(200),{ message: 등록 완료 } 실패시: status(404),{errror: "등록 실패"}	body:{   id:string,   detail:string,   startDate:string,   endDate:string,   title:string,   state:boolean }
Todo 삭제 POST	/todos/del	성공시 : status(200),{ message: 삭제완료 } 실패시: status(404),{errror: "찾으시는데이터가 완료/삭제에 없습니다"}	body:{ id:string, state:boolean }
Todo 변경 POST	/todos/change	성공시 : status(200),{ message: 변경완료 } 실패시: status(404),{errror: "찾으시는데이터가 완료/삭제에 없습니다"}	body:[ Todo:{   id:string,   detail:string,   startDate:string,   endDate:string,   title:string,   state:boolean }, newState:boolean ]

 

다음 글 부터 컴포넌트 별 테스트 코드를 작성해보겠습니다