MSW(Mock Service Worker)
- 테스트코드 강의를 들으면서 사용해보게 된
MSW(Mock Service Worker)에 대해 간단히 정리해보았다.
MSW란?
Mock Service Worker의 준말로, 이를 사용하면 실제 api를 호출하지 않고 데이터를 요청할 수 있다. 정확하게 말하자면 api 요청을 가로챈 후 service worker가 mocking data를 전달해주는 것이다. (Service Worker의 가짜 데이터를 넘겨준다.)- 애플리케이션 내부에 직접 Mock데이터를 심거나 Mock 서버를 별도로 만들 필요 없이 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking이 가능하다.
MSW Request Flow
msw 라이브러리를 통해 애플리케이션의 네트워크 요청을 감지하여 mocking된 응답을 전달할 수 있는 Service Worker를 사용할 수 있게 된다.
MSW Install
npm install msw --dev
# or
yarn add msw --dev
Define mocks
request 및 mocked response를 설정해주는 단계이다. 공식문서에 아주 자세하게 잘 나와있다.
1. REST API 기준 세팅
// src/mock/handlers.ts
// library imports
import { rest } from "msw";
// Request handler, Response resolver
export const handlers = [
rest.get("http://localhost:3030/scoops", (req, res, ctx) => {
return res(
ctx.json([
{ name: "Chocolate", imagePath: "/images/chocolate.png" },
{ name: "Vanilla", imagePath: "/images/vanilla.png" },
])
);
}),
rest.get("http://localhost:3030/toppings", (req, res, ctx) => {
return res(
ctx.json([
{ name: "Cherries", imagePath: "/images/cherries.png" },
{ name: "M&Ms", imagePath: "/images/m-and-ms.png" },
{ name: "Hot fudge", imagePath: "/images/hot-fudge.png" },
])
);
}),
];
- rest[METHOD]를 통해
request handlers를 설정해줄 수 있다. (여러개의 request를 생성하고자 할 경우, 배열 형태로 지정하여 사용할 수 있다.)
req: 매칭된 request에 대한 정보이다.res: mocking된 response를 생성하기 위한 함수이다.ctx: status code, headers, body 등 mocking된 response을 세팅하기 위한 함수의 그룹이다.
Browser Integration
browser에서 msw가 동작하기 위해 추가 설정이 필요하다. (node버전도 존재하며 자세한건 공식문서를 참고하도록 하자.)
Install
npx msw init ./public --save
ConFigure Worker
// src/mock/browser.ts
import { setupWorker } from "msw";
import { handlers } from "./handlers";
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);
msw가 동작하기 위해 configure 파일인 browser.ts파일을 생성해준다.
Start Worker
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
import { GlobalStyle, theme } from "src/styles";
import { ThemeProvider } from "styled-components";
if (process.env.NODE_ENV === "development") {
const { worker } = require("src/mocks/browser");
worker.start();
}
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
dev mode의 런타임 환경에서 정상적으로 동작하기 위해 index.ts 파일을 설정해준다.
결과 확인
- 위 사진에서 보이는,
[MSW] Mocking enabled 메시지를 통해 정상적으로 작동하는 것을 알 수 있다.
Reference