[Worker] Mock Service Worker

MSW(Mock Service Worker)

Service Worker의 네트워크 Proxy 기능을 활용하여 API 테스트를 위한 API 모킹(Mocking) 라이브러리 입니다. Front-end 개발 시 Back-end 개발 완료까지 기다리지 않고 API 명세서만 있다면 가상의 API 응답을 구성하여 Front-end 개발 및 API 테스트와 Back-end 개발을 동시에 진행하여 프로젝트 개발 소요 시간을 단축 시킬 수 있게 도와줍니다. 

 

MSW 라이브러리 설치

npm install -D msw

1. Service Worker 구성

먼저 제 게시글 중 Service Worker 구성에 대한 게시글을 꼭 먼저 보신 후 진행해주세요
이후 registerServiceWorker.ts에서 아래와 같은 코드를 삽입합니다.

// registerServiceWorker.ts
import { register } from 'register-service-worker';

//Mockup 된 파일을 가져와 Service worker에 실행 추가
const { mocking } = require('@/index.mocking');
mocking.start({ onUnhandledRequest: 'bypass' });

register(`@/service-worker.js`, {
    ready() {
        console.log('App is being served from cache by a service worker.');
    },
    async registered() {
        if (!navigator.serviceWorker.controller) {
            location.reload();
        }
        console.log('Service worker has been registered.');
    },
    cached() {
        console.log('Content has been cached for offline use.');
    },
    updatefound() {
        console.log('New content is downloading.');
    },
    updated() {
        console.log('New content is available; please refresh.');
    },
    offline() {
        console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
        console.error('Error during service worker registration:', error);
    },
});



//이후 main.ts 파일에 registerServiceWorker 추가
import '@/registerServiceWorker';

 

2. API Mocking 

// index.mocking.ts
import { rest } from 'msw';
import { setupWorker } from 'msw';

//mocking을 원하는 api를 작성
const mocking_api_list = [
    rest.post(`${process.env.VUE_APP_API_URL}/apiName`, async (req, res, ctx) => {
        const { parameter } = await req.json(); // api request parameter keyword

        const responseData = { // 원하는 response data 작성
            result: 'success', 
        };

        //api error response
        if (parameter === 'invalid') {
            return res(ctx.delay(300), ctx.status(400), ctx.json({ message: 'invalid error message'  }));
        }
        if (parameter === 'expired') {
            return res(ctx.delay(300), ctx.status(400), ctx.json({ message: 'expired error message' }));
        }

        //api success response
        return res(ctx.delay(300), ctx.json(responseData));
    })
]

export const mocking = setupWorker(...mocking_api_list);

위와 같이 작성 한 뒤 개발 단계에서 테스트 시 api request가 서버로 가기전에 service worker에서 가로채서 api url과 동일한 mock-up api가 있다면 mocking된 Data를 response 주게 됩니다. 또한 에러처리 및 다양한 test-case를 작성할 수 있고, 위 파일을 api category(ex. 인증, 회원정보, 상품정보 등)별로 분리하여 별도의 파일로 관리할 수 있는 장점이 있습니다. 

 

PS. 저도 해당 라이브러리를 알기전에는 axios response에 실제 api 요청 부분을 주석처리하고 new Promise 객체를 api 마다 일일히 생성해서 테스트하고는 했는데, msw 사용 이후에는 초기 세팅만 해놓으면 간단하게 TEST할 수 있어서 개발 소요시간이 상당히 단축되었습니다. API Test가 번거로우신 분들은 한번쯤 꼭 사용해 보시길 추천드립니다.