[MSW] TypeError: response2.headers.all is not a function

msw를 사용해서 mock api를 만들어서 사용하려는데 위와같은 에러가 나왔다.

 

 

https://github.com/mswjs/msw/discussions/1884

Type Error: response2.headers.all is not a function · mswjs/msw · Discussion #1884

 

 

해당 이슈를 보니 폴리필을 사용해서 해결하라길래... msw얘네가 문법을 바꿨나?!?? 생각이 들어서 공식문서를 찾아봤다.

 

공식문서를 보려니까 바뀐게 7일전이다.. 어차피 mock api를 구성하는것도 지금이니 이참에 msw을 해당 버전에 맞게 바꿔주려고 한다.

 

7일전

 

 

먼저 현재 있는버전의 msw를 지워주고 msw를 새로 설치해줬다.

npm uninstall msw
npm i msw -D

 

 

공식문서에서 worker를 사용하는것이 조금 바뀌었다. 우선 msw/brower에서 setupWorker를 호출하게 바뀌었다.

( 원래는 import {setupWorker} from 'msw' )

import { setupWorker } from 'msw/browser'
 
const worker = setupWorker()
// worker.start()
// worker.use(...handlers)

 

 

아래와 같이 worker를 연결해준다.

//index.tsx
if (process.env.NODE_ENV === "development") {
  worker.start();
}

 

 

 

 

그리고 원래 사용했던 rest코드도 조금 바뀌었다.

 

rest.get('resource', (req,res,ctx) =>

 

원래 위와 같이 사용하던 rest 문법이 사라지고 http로 이름이 바뀌고 req,res,ctx 등의 인자도 사라졌다.

 

 

import { http, HttpResponse } from 'msw'
import { setupWorker } from 'msw/browser'
 
const worker = setupWorker(
  http.get('/resource', () => HttpResponse.json({ id: 'abc-123' }))
)

 

가장 기본적인 get 요청은 위처럼 하면되고 추가된 메서드나 변경된 점들이 조금 있는 것 같은데 이는 나중에 확인해봐야겠다.