MSW(Mock Service Worker)

Sang heon lee·2022년 8월 22일

Angular MSW

출처 : https://dev.to/iamandrewluca/configure-msw-in-nx-3jd3

Mock Service Worker

Api 요청을 중간에 인터셉터하여 Api 요청이 성공한 것처럼 응답을 반환해준다.

절차

1. msw 설치

npm install -D msw

2. service worker file 생성

msw init ./projects/main/src
=> 해당 경로에 'mockServiceWorker.js' 파일 생성 됨,
=> package.json 파일에 기록 생성 됨

3. 파일 등록

/project-name/angular.json 파일에 서비스 파일(mockServiceWorker.js) 등록

4. 요청파일(mock.ts) 생성

/project-name/projects/main/src/mocks/mock.ts 폴더 및 파일 생성

추후 여러 요청을 만들어야 하므로 spread 문법(...) 처리

// project-name/projects/main/src/mocks/mock.ts

import { setupWorker, rest } from 'msw';

const myResourceHandler = [
   rest.get('/api/test', (req, res, ctx) =>
      res(
         ctx.status(200),
         ctx.json({
            items: [],
         })
      )
   ),
];

const worker = setupWorker(...myResourceHandler);

worker.start();