[Feat] MSW 도입 #453
[Feat] MSW 도입 #453
Conversation
|
Deploying sopt-recruiting-frontend-test with
|
| Latest commit: |
070e35a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6e665466.sopt-recruiting-frontend-test.pages.dev |
| Branch Preview URL: | https://feat--438-msw.sopt-recruiting-frontend-test.pages.dev |
| @@ -0,0 +1,4 @@ | |||
| import { setupWorker } from 'msw/browser'; | |||
There was a problem hiding this comment.
msw test runner 보면은 vitest를 사용할 때는 msw/node를 사용한다 하더라고요~
init으로 생성해준 mockServiceWorker.js 제거하고 setupTests.ts에 아래 코드 추가해주면 될 거 같아요 :)
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())There was a problem hiding this comment.
맞아요! vitest와의 통합작업 시에는 msw/node쓰는게 맞는데 일단 저희가 아직 테스트코드 작성도 안해놓은 상황이라 그건 나중에 vitest 디벨롭 시킬 때 작업할 예정이어서 여기에 설정안해주었어요!! 근데 한번에 해두면 좋으니 node 설정도 추가해두겠습니당
browser를 선 세팅해둔 이유는 제가 애초에 msw를 처음 도입하고 싶었던 이유가 테스트코드를 위해서가 아닌, 목데이터를 통한 api 모킹으로 저희 개발서버 없는 한계를 해소하고 싶었던건데요 (제가 현재 예제로 작성해둔 사례처럼요!) 그래서 broswer 설정을 먼저 해뒀던거예용
그래도 init 파일 지워야할까요??
There was a problem hiding this comment.
설명 감사합니다! 개발 서버 없는 한계를 목 데이터로 해결하기 위해 msw/browser를 먼저 설정해둔 이유를 잘 이해했어요. 실제로 API 모킹을 통해 개발 초기 단계에서 빠르게 작업을 진행할 수 있는 점에서 큰 장점이 있을 것 같습니다.
그렇다면 현재 목적으로는 msw/browser 설정을 유지하는 게 맞겠네요. 추후에 vitest로 테스트를 작성할 때 msw/node를 사용하는 방향으로 작업하면 될 것 같아요.
다만, mockServiceWorker.js 파일은 msw/browser 설정 시 웹 환경에서 목 서비스 워커를 사용하려고 자동 생성된 파일이니, 현재 목 데이터를 사용 중이라면 삭제하지 않고 그대로 둬도 될 것 같습니다. 만약 나중에 불필요하다고 판단되면 그때 정리해도 괜찮을 것 같아요.
고생하셨습니다! 😊
Related Issue : Closes #438
🧑🎤 Summary
MSW 도입을 위한 기본적인 세팅을 했습니다
🧑🎤 Screenshot
🧑🎤 Comment
MSW/broswer로 mock 데이터와 연결해줌으로써
이 모두 해결되었습니다!
아직 draft인 이유는
기본적인 세팅들(라이브러리 설치하고, 워커 세팅 코드만 추가하는 등)만 되어있는 상태이고,
서버 측에 postman 최신화를 요청드렸습니다 ! (자잘한 수정사항들이 아직 postman에는 반영이 안되어있다고 하더라구요)
그래서 최신화 완료되면 목데이터 넣어놓고 폴더구조 등 관리 형태 좀 다시 다듬을 계획입니다
그 후에 리뷰 요청 드릴게요 !
=> 이거 목데이터 다 반영하면 또 작업사이즈 커질 것 같아서 세팅이랑 별개로 이슈 PR 따로 파겠습니다!
draft -> PR로 그냥 변경사항 없이 전환합니다 @eonseok-jeon @wuzoo