인프런 커뮤니티 질문&답변
작성한 질문수
axios의 get request를 이용해서 products를 가져오는 부분에서 500 에러가 납니다.
작성
·
861
0
안녕하세요.
좋은 강의 감사합니다. 방금 완강했는데 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를 확인해봐도 잘 모르겠어서 강의 첨부파일 소스코드로 바꿔서 진행해봐도 마찬가지로 에러가 뜨는데요. 충분한 정보를 드리지 못하면서 질문 드리는 것 같습니다만, 혹시 이런 경우가 있으셨는지 궁금합니다.
감사합니다.
답변 2
0
안녕하세요. 답변 감사합니다.
현재 윈도에서 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\react-shop-test\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\Users\mhr\Desktop\web\inflearn_react_testing\react-shop-test\node_modules\axios\lib\core\settle.js:17:12)
at XMLHttpRequestOverride.onloadend (C:\Users\mhr\Desktop\web\inflearn_react_testing\react-shop-test\node_modules\axios\lib\adapters\xhr.js:54:7)
at XMLHttpRequestOverride.trigger (C:\Users\mhr\Desktop\web\inflearn_react_testing\react-shop-test\node_modules\@mswjs\interceptors\src\interceptors\XMLHttpRequest\XMLHttpRequestOverride.ts:168:17)
at C:\Users\mhr\Desktop\web\inflearn_react_testing\react-shop-test\node_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]
}
0
안녕하세요!
혹시 서버가 5000에서 잘 돌아가고 있나요? 요즘 맥에서 5000번 포트가 다른 거에 의해서 사용되고 있어서
설정을 바꾸거나 다른 포트를 사용해야 하는 경우가 있습니다 ~
먼저 포트를 4000번으로 바꿔주셔서 다시 한번 해봐 주시면 감사하겠습니다!