MSW2 사용 중 Warning: captured a request without a matching request handler

https://shortcoding.tistory.com/535

MSW1 사용 중 Warning: captured a request without a matching request handler

WAYC 프로젝트에서도 같은 경고를 만난적이 있다.

하지만 WAYC는 MSW 버전 1이고, UpLog에서는 MSW 버전 2를 사용했다.

해결 방법이 달라서 기록으로 남긴다. 해결 방법은 생각보다 쉽지만 까먹지 않기 위해 남긴다..!

MSW2에서 해결 방법(아님)

해결법은 정말 간단한데 handlers.ts 파일을 만드는 것이다.

 

1. handlesr.ts

// src/mocks/handlers.ts
import { auth } from '@/mock/api/member/auth.ts';
import { emailController } from '@/mock/api/emailController';

const handlers = [...auth, ...emailController];

export default handlers;

handlers에서 모든 모킹 api 파일을 합쳐준다.

 

2. browser.ts

// src/mocks/browser.js
import { setupWorker } from 'msw/browser';
import handlers from '@/mock/handlers.ts';

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);

broswer.ts에서 handlers를 가져와서 setupWorker에 넣어주면 된다.

문제점이었던 것

나는 handlers.ts를 거치지 않고, browers.ts에서 바로 모킹 api들을 모아줘서 저런 경고가 떴었던 것 같다.

---

진짜 MSW2에서 해결 방법

위에 내용을 정리하고 다음 날 보니까 또 다시 경고가 떴다. 그래서 다시 고민해봤는데, 해결 방법이 검색으로는 잘 나오지 않았다.

그러다가 아래 방법으로 했는데 해결이 됐다!

해결법

-common.ts

import { http } from 'msw';

export const common = [
  http.get('/*', () => {
    return;
  }),
  http.get('/src/*', () => {
    return;
  }),
  http.get('/node_modules/*', () => {
    return;
  }),
];

common.ts를 만들고 안에 consol 창에서 뜨는 경로들을 다 적어줬다.

그리고 와일드카드(*)를 활용하였다.

 

-handler.ts

// src/mocks/handlers.ts
import { auth } from '@/mock/api/member/auth.ts';
import { emailController } from '@/mock/api/emailController';
import { common } from '@/mock/api/common.ts';

const handlers = [...auth, ...emailController, ...common];

export default handlers;

common.ts를 handlers.ts에 넣어주니까 해결됐다!