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

MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 

콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다.

왜 저런 경고가 뜨는걸까?

1. MSW의 worker가 API를 가로채서 mock 데이터를 보내주는 것인데
2. 정의되지 않은 주소를 가로챘기 때문에 발생한다.
3. 따라서 요청에서 무시하거나 허용하는 onUnhandledRequest를 사용하여 지정해야한다.

해결법

onUnhandledRequest

이 속성은 setupWorker 초기화 이후에 Request handler를 등록하기 위해 사용된다.

https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest

start()

자세한걸 보고싶으면 공식 문서로 가보는 것이 좋겠다.

코드

  // once the Service Worker is up and ready to intercept requests.
  return worker.start({
    onUnhandledRequest(req, print) {
      const allowedDomain = "https://loremflickr.com/";
      const allowedDomain2 = "https://picsum.photos/";
      const allowedDomain3 = " https://fonts.gstatic.com";

      if (
        req.url.pathname.startsWith("/public/") ||
        req.url.pathname.startsWith("/slideImage/") ||
        req.url.pathname.startsWith("/dist/") ||
        req.url.href.startsWith(allowedDomain) ||
        req.url.href.startsWith(allowedDomain2) ||
        req.url.href.startsWith(allowedDomain3)
      ) {
        return;
      }

      print.warning();
    },
  });

이렇게 폴더와 도메인에 대해 허용하여 warning이 뜨는 것을 방지했다.