msw browser 설정법

• msw v2 기반입니다.

setup

npx msw init <PUBLIC_DIR> 로 public dir 을 설정

worker 설정

// src/mocks/browser.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

개발 환경에서만 실행되도록 하기

// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
 
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
 
  const { worker } = await import('./mocks/browser') // race condition 방지 (다른 워커에대한)
  
  return worker.start()
}
 
enableMocking().then(() => {
  ReactDOM.render(<App />, rootElement)
})

성공 문구

[MSW] Mocking enabled.

참고

https://mswjs.io/docs/integrations/browser