FAQ

다른 라이브러리와 어떻게 다른가요?

Mock Service Worker와 다른 인기 있는 API 모킹 라이브러리 간의 기술적, 개념적 비교는 비교 페이지에서 확인할 수 있습니다.

간단히 말해, 대부분의 솔루션은 애플리케이션 수준에서 요청을 가로채는 반면, Mock Service Worker는 네트워크 수준에서 요청을 가로챕니다. 또한, 테스트뿐만 아니라 개발 및 디버깅에도 동일한 모크 정의를 사용할 수 있으며, 설정, 어댑터, 플러그인 없이도 다양한 도구와 통합됩니다.

요청 라이브러리 XYZ를 지원하나요?

네. Mock Service Worker는 모든 요청 라이브러리를 지원합니다. 기존에 존재하는 라이브러리와 앞으로 출시될 라이브러리 모두 포함됩니다. 이는 네트워크 레벨에서 API를 모킹함으로써 얻을 수 있는 장점 중 하나입니다.

Node.js에서 사용할 수 있나요?

네, 가능합니다. Node.js에는 서비스 워커가 없지만, MSW는 Node.js에서 동일한 요청 핸들러를 재사용할 수 있는 전용 API를 제공합니다. 아래 통합 방법을 따라 Node.js에서 MSW를 사용하는 방법을 알아보세요.

React Native에서 사용할 수 있나요?

네, React Native 애플리케이션을 개발하고 테스트할 때 MSW를 사용할 수 있습니다. 설정은 Node.js와 유사하며, 다음 가이드를 참고하여 더 자세히 알아볼 수 있습니다:

ReferenceError: Node.js에서 fetch가 정의되지 않음

이 오류는 여러분이 사용 중인 Node.js 버전이 전역 Fetch API를 지원하지 않음을 의미합니다.

Node.js 18 이상 버전으로 업그레이드하여 이 문제를 해결할 수 있습니다. MSW는 Node.js 18 미만 버전을 지원하지 않습니다.

Request/Response/TextEncoder가 정의되지 않음 (Jest)

이 문제는 여러분의 환경이 어떤 이유로든 Node.js 전역 변수를 가지고 있지 않아 발생합니다. 이는 주로 jest-environment-jsdom을 사용할 때 발생하는데, 이 환경이 의도적으로 내장 API를 폴리필로 대체하여 Node.js 호환성을 깨뜨리기 때문입니다.

이 문제를 해결하려면 jest-environment-jsdom 대신 jest-fixed-jsdom 환경을 사용하세요.

npm i jest-fixed-jsdom

// jest.config.js
module.exports = {
  testEnvironment: 'jest-fixed-jsdom',
}

이 커스텀 환경은 jest-environment-jsdom의 상위 집합으로, 내장 Node.js 모듈이 다시 추가된 버전입니다. 하지만 Jest/JSDOM이 테스트 환경에서 깨뜨리는 많은 것들이 있어 이를 고치는 것은 문제가 많습니다. 이 설정은 임시 해결책입니다.

이 설정이 번거롭다면, Node.js 전역 변수 문제가 없고 기본적으로 ESM을 지원하는 Vitest와 같은 모던 테스트 프레임워크로 마이그레이션하는 것을 고려해 보세요.

요청 핸들러 URL에서 쿼리 파라미터를 제거해야 하는 이유는 무엇인가요?

쿼리 파라미터는 RESTful 리소스를 설명하지 않습니다. 대신 서버에 추가적인 _데이터_를 제공합니다. 쿼리 파라미터는 MSW가 요청 매칭 중에 자동으로 제거되며 아무런 영향을 미치지 않습니다.

요청 핸들러를 서버 측 라우트 핸들러로 생각하면 이해하기 쉽습니다: 서버에서 라우팅할 때 쿼리 파라미터를 포함하지 않으므로, MSW로 라우팅할 때도 쿼리 파라미터를 포함하지 않아야 합니다.

요청 핸들러 내에서 URL API를 사용하여 쿼리 파라미터에 접근할 수 있습니다:

// 리소스 경로를 설명합니다: "/post".
http.get('/post', ({ request }) => {
  // 요청 URL 문자열을 URL 인스턴스로 변환하여
  // 브라우저가 쿼리 파라미터를 파싱하도록 합니다.
  const url = new URL(request.url)
 
  // URL 인스턴스에서 쿼리 파라미터에 접근합니다.
  // 예: GET /post/id=abc-123 → id: "abc-123"
  const id = url.searchParams.get('id')
 
  return HttpResponse.json({
    id,
    title: 'The Empowering Limitation',
  })
})

왜 react-query/SWR/Apollo 등에서 오래된 응답을 받을까요?

일부 요청 클라이언트의 캐싱 메커니즘으로 인해 테스트에서 오래된 응답이 발생할 수 있습니다. 테스트가 예측 가능하도록 각 테스트 스위트 전후에 캐시를 지우는 것이 중요합니다.

react-query

import { QueryCache } from 'react-query'
 
const queryCache = new QueryCache()
 
afterEach(() => {
  queryCache.clear()
})

SWR

import { cache } from 'swr'
 
beforeEach(() => {
  cache.clear()
})

Apollo Client

Apollo Client 팀은 각 테스트마다 새로운 클라이언트 인스턴스를 생성할 것을 권장합니다.

// src/apollo-client.js
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 
const httpLink = new HttpLink({
  uri: 'https://example.com/graphql',
})
 
export function makeClient() {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  })
}

// test/Component.test.jsx
import { makeClient } from '../src/apollo-client'
 
it('컴포넌트를 렌더링한다', async () => {
  const client = makeClient()
  // ...테스트에서 클라이언트를 사용합니다.
})

자세한 내용은 Apollo Client 문서에서 확인할 수 있습니다.

라이트 테마는 언제 적용되나요?

풀 리퀘스트를 열 시간이 될 때마다 적용됩니다.

동시 테스트에서 MSW가 작동하지 않는 경우

여러 개의 동시 테스트가 네트워크 동작을 수정하는 경우(즉, .use() 호출이 있는 경우), server.boundary() API를 사용하여 각 테스트에 네트워크를 스코프로 제한해야 합니다.