axiosMockAdapter로 서버로 보내는 요청을 가로채 임의의 응답으로 바꿀 수 있습니다. 서버가 아직 완성되지 않은 단계에서 테스트 용도로 사용할 수 있습니다.
axiosMockAdapter로 테스트 응답 만들기
목차
1. axiosMockAdapter란?
- axios를 통해 수행되는 HTTP 요청을 가로채서 가짜 응답을 반환하는 라이브러리
- 실제 서버에 요청하지 않고도 API 호출을 테스트해 볼 수 있음
2. json-server와의 차이
- localhost가 아닌 실제 URL로 작성해도 되서 편리
- json-server는 localhost 포트로 열기 때문에 api 요청도 해당 주소로 보내줘야 함. 테스트 이후에는 실제 서버 URL로 변경해줘야 함
- 그러나 axiosMockAdapter는 실제 서버 URL을 입력한 뒤, 가로채기만 하면 되므로, 이후 테스트가 끝난 후에는 가로채는 부분만 삭제해주면 정상 작동
- js 파일로 작성하여 좀더 유연한 조작이 가능
- json-server는 json을 통해 작성을 하므로 클라이언트에서 보낸 값에 특정 작업을 해야 할 경우, 조작하기가 어려움
- 그러나 axiosMockAdapter는 js 파일로 작성하므로 조작이 좀더 자유로움
3. 사용법
- axios-mock-adapter 설치
npm i axios;
npm i axios-mock-adapter --save-dev
- 테스트하고자 하는 코드 작성
// example.js
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
const mock = new MockAdapter(axios);
mock.onGet("https://example.com/post/read").reply((config) => { // HTTP 요청 메서드에 맞춰 줌.
return [200, { message: "쿼리 스트링으로 1 받았습니다." }];
});
mock.onPost("https://example.com/post/post").reply((config) => {
const data = JSON.parse(config.data);
return [200, { message: `본문으로 ${data.data.post} 받았습니다.` }];
});
export default mock;
- 해당 URL로 요청 보내는 곳에 작성한 테스트 코드 불러오기
import { useEffect } from "react";
import "./App.css";
import axios from "axios";
import mock from "./mock/example";
function App() {
useEffect(() => {
async function getData() {
const result = await axios.get("https://example.com/post/read", {
params: {
post: 1,
},
});
console.log("getData의 결과는", result.data);
}
async function postData() {
const result = await axios.post("https://example.com/post/post", {
data: {
post: 1,
},
});
console.log("postData의 결과는", result.data);
}
getData();
postData();
}, []);
return <div className="App">잘 되나 테스트</div>;
}
export default App;