[MSW] Warning: intercepted a request without a matching request handler

내가 handlers.ts 파일에 명시하지 않은 RestAPI 경로를 fetch로 사용했을 때 이런 경고문구가 콘솔에 뜬다.

해결 방법

listen과 start 메서드 안에 다뤄지지 않는 요청에 대해서는 경고 창이 뜨지 않도록 ‘bypass’ 옵션 주면 된다.

MSW가 Next.js의 서버 컴포넌트 환경에서의 fetch를 가로채지 못하는 문제

현재 Next.js14는 msw 서버를 사용할 수가 없다. 그렇기 때문에 직접 http 서버를 직접 생성해서 yarn mock로 Express.js 서버를 키고, yarn dev를 통해 개발을 진행해야 한다. 그렇게 한다면 mocks/handlers.ts에 명시한 모든 api들은 클라이언트 컴포넌트에서도 fetch가 잘 되고, 서버 컴포넌트에서도 fetch가 잘 된다.

루트 경로에 .env 파일 → Express 서버는 9090포트에 열리고, 개발 환경에서만 mock 서버를 적용해야 하므로 env 환경 변수에 NEXT_PUBLIC_API_MOCKING=enabled 설정

Root Layout에 이 MSWComponent를 자식 요소로 넣었다.

사실 위 MSWComponent.tsx는 ‘이전에는’ window 전역 객체가 있는지 판단해서 있으면 browser 쪽에서 mock 서버를 실행하고, 없으면 server 쪽 mock 서버를 실행하도록 하는 코드였다. 현재는 Next.js14가 서버 쪽 실행을 제대로 지원을 안하고 있어서 window 전역 객체가 있는지만 판단한다.

그래서 서버 쪽 mock 서버 실행은 Express.js 서버로 대체하고 클라이언트 쪽 mock 서버 실행은 원래처럼 진행하는 것이다.