새롭게 작업하고 있는 프로젝트에 react-testing-library를 이용, tdd를 하고 있다. tdd는 처음이라 이런 저런 시행착오를 겪고 있는데 에러 없이 통과됐을 때 나타나는 green passed 문구가 상당한 쾌감을 준다.
tdd를 베이스로 리스팅 페이지를 만들었다. 그런데 아무리 해도 에러만 발생한다. 비동기 통신이 문제인가 해서 tdd에 async, await 를 적용해 봐도 안 된다. 그런데 에러 문구를 자세히 들여다보니 서버에서 내려주는, 인증과 관련한 오류 코드가 찍혀있다. 혹시나 해서 서버에 로그를 찍어달라 하고 tdd를 동작하니 실제 서버를 호출하고 있었다. 인증을 위해 token을 담아서 전송해야하는데 그 부분이 없어 에러가 나고 있는 것이다.
왜 그 생각을 못했을까? 막연히 tdd 동작 시 가상으로 호출해서 처리한다고만 생각했지 실제 서버를 호출할지는 몰랐다. tdd도 페이지를 호출할 때와 동일한 동작으로 서버를 호출하는 것이다.
그러면 어떻게 처리해야 할까? tdd에도 token을 같이 전달해야 하나? 그럴 필요가 없다. 일단 인증을 위한 별도 처리를 하는게 일을 더 복잡하게 만든다. tdd 때문에 메인 소스에 영향을 미치는 일이 있으면 안 된다. 또 api 호출과 리턴값을 주는건 서버의 일이지 front의 일은 아니다. front는 서버쪽의 일은 모두 잘 처리됐다고 가정하고 작업하면 된다. 반드시 서버를 거쳐야 완벽한 tdd가 되는 것이 아니다. 그래서 사용해야 하는게 axios-mock-adapter 이다.
api를 호출했다고 가정하고 tdd 소스에게 mock 데이터를 리턴해준다. 그러면 서버를 호출하지 않고 리턴받은 mock 데이터를 가지고 tdd 로직을 수행한다. 호출하는 url은 실제 페이지가 호출하는 api 서버 url과 method를 맞춰주면 된다.
