axios의 get request를 이용해서 products를 가져오는 부분에서 500 에러가 납니다.

Question

안녕하세요.  좋은 강의 감사합니다. 방금 완강했는데 TDD에 대해서 많이 배울 수 있어서 좋았습니다.  다름이 아니라 테스트는 통과하기는 하지만 Type.js의 loadItems 함수에서 localhost:5000/products로 get request를 날려서 product 정보를 가져오는 부분에서 자꾸 500 에러가 나는데 왜 그러는지 이유를 잘 모르겠어서요. Type.test.js를 실행할 때에 에러가 발생하고 있는데요. try 부분에서 console.log를 찍어보면 products도 mocks/handlers.js에 정의된 response를 잘 받고 있고 그래서 테스트도 통과하는 것 같은데 꼭 한 번씩 catch 부분에 들어가서 에러가 발생하네요. 에러 내역을 로그로 찍어보면 url은 http://localhost:5000/products로 알맞게 들어가있는데, data가 undefined입니다. mocks 폴더의 handlers, server와 Type.js를 확인해봐도 잘 모르겠어서 강의 첨부파일 소스코드로 바꿔서 진행해봐도 마찬가지로 에러가 뜨는데요. 충분한 정보를 드리지 못하면서 질문 드리는 것 같습니다만, 혹시 이런 경우가 있으셨는지 궁금합니다.  감사합니다.

mhr · Answer

안녕하세요. 답변 감사합니다.  현재 윈도에서 Webstorm을 사용하고 있는데요. 포트를 4000번으로 바꿔도 마찬가지네요. 서버 포트를 바꾸어도 orderType이 products인 경우에 테스트는 통과하지만 에러도 발생하면서 에러 로그에서 response의 data는 undefined로 되어있습니다. 뭐가 문젠지 감이 잘 잡히지 않아서 axios와 msw를 지우고 강의 코드와 같은 버전으로 다시 설치해봤는데 그래도 마찬가지네요.  에러 메시지가 아래와 같은데 혹시 도움이 될지 몰라 공유합니다. 감사합니다.   PASS  src/pages/OrderPage/tests/Type.test.js   ● Console       console.group         orderType:  products         at loadItems (src/pages/OrderPage/Type.js:30:15)       console.error         Error: Request failed with status code 500           at createError (C:\Users\mhr\Desktop\web\inflearn_react_testingeact-shop-test
ode_modules\axios\lib\core\createError.js:16:15)           at settle (C:\Users\mhr\Desktop\web\inflearn_react_testingeact-shop-test
ode_modules\axios\lib\core\settle.js:17:12)           at XMLHttpRequestOverride.onloadend (C:\Users\mhr\Desktop\web\inflearn_react_testingeact-shop-test
ode_modules\axios\lib\adapters\xhr.js:54:7)           at XMLHttpRequestOverride.trigger (C:\Users\mhr\Desktop\web\inflearn_react_testingeact-shop-test
ode_modules\@mswjs\interceptors\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:168:17)           at C:\Users\mhr\Desktop\web\inflearn_react_testingeact-shop-test
ode_modules\@mswjs\interceptors\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:323:18 {         config: {           url: 'http://localhost:5000/products',           method: 'get',           headers: { Accept: 'application/json, text/plain, */*' },           transformRequest: [ [Function: transformRequest] ],           transformResponse: [ [Function: transformResponse] ],           timeout: 0,           adapter: [Function: xhrAdapter],           xsrfCookieName: 'XSRF-TOKEN',           xsrfHeaderName: 'X-XSRF-TOKEN',           maxContentLength: -1,           maxBodyLength: -1,           validateStatus: [Function: validateStatus],           transitional: {             silentJSONParsing: true,             forcedJSONParsing: true,             clarifyTimeoutError: false           },           data: undefined         },         request: XMLHttpRequestOverride {           _events: [],           UNSENT: 0,           OPENED: 1,           HEADERS_RECEIVED: 2,           LOADING: 3,           DONE: 4,           onreadystatechange: null,           onabort: [Function: handleAbort],           onerror: [Function: handleError],           onload: null,           onloadend: [Function: onloadend],           onloadstart: null,           onprogress: null,           ontimeout: [Function: handleTimeout],           url: 'http://localhost:5000/products',           method: 'GET',           readyState: 4,           withCredentials: false,           status: 500,           statusText: 'Internal Server Error',           data: '',           response: '',           responseType: 'text',           responseText: '',           responseXML: null,           responseURL: '',           upload: null,           timeout: 0,           _requestHeaders: HeadersPolyfill { _headers: [Object], _names: [Map] },           _responseHeaders: HeadersPolyfill { _headers: [Object], _names: [Map] },           async: true,           user: undefined,           password: undefined         },         response: {           data: '',           status: 500,           statusText: 'Internal Server Error',           headers: { 'x-powered-by': 'msw' },           config: {             url: 'http://localhost:5000/products',             method: 'get',             headers: [Object],             transformRequest: [Array],             transformResponse: [Array],             timeout: 0,             adapter: [Function: xhrAdapter],             xsrfCookieName: 'XSRF-TOKEN',             xsrfHeaderName: 'X-XSRF-TOKEN',             maxContentLength: -1,             maxBodyLength: -1,             validateStatus: [Function: validateStatus],             transitional: [Object],             data: undefined           },           request: XMLHttpRequestOverride {             _events: [],             UNSENT: 0,             OPENED: 1,             HEADERS_RECEIVED: 2,             LOADING: 3,             DONE: 4,             onreadystatechange: null,             onabort: [Function: handleAbort],             onerror: [Function: handleError],             onload: null,             onloadend: [Function: onloadend],             onloadstart: null,             onprogress: null,             ontimeout: [Function: handleTimeout],             url: 'http://localhost:5000/products',             method: 'GET',             readyState: 4,             withCredentials: false,             status: 500,             statusText: 'Internal Server Error',             data: '',             response: '',             responseType: 'text',             responseText: '',             responseXML: null,             responseURL: '',             upload: null,             timeout: 0,             _requestHeaders: [HeadersPolyfill],             _responseHeaders: [HeadersPolyfill],             async: true,             user: undefined,             password: undefined           }         },         isAxiosError: true,         toJSON: [Function: toJSON]       }

John Ahn · Answer

안녕하세요!  혹시 서버가 5000에서 잘 돌아가고 있나요? 요즘 맥에서 5000번 포트가 다른 거에 의해서 사용되고 있어서  설정을 바꾸거나 다른 포트를 사용해야 하는 경우가 있습니다 ~  먼저 포트를 4000번으로 바꿔주셔서 다시 한번 해봐 주시면 감사하겠습니다!