Enzyme은 React 컴포넌트의 테스트를 도와주는 JavaScript 라이브러리입니다. Enzyme을 사용하면 컴포넌트의 렌더링 결과를 조작하거나 확인할 수 있습니다. 이러한 기능을 사용하기 위해 프록시를 설정해야 할 때가 있습니다. 이번 블로그 포스트에서는 Enzyme의 프록시 설정 방법에 대해 알아보겠습니다.

Enzyme에서 프록시 설정은 setupFiles 옵션을 통해 할 수 있습니다. 이 옵션은 package.json 파일이나 Jest의 설정 파일에서 설정할 수 있습니다. 프록시 설정에는 http-proxy-middleware 패키지를 사용하므로 해당 패키지도 설치해야 합니다.

프록시 설정하기

먼저, http-proxy-middleware 패키지를 설치합니다.

npm install http-proxy-middleware --save-dev

다음으로, package.json 파일을 열고 아래와 같이 setupFiles 옵션을 추가합니다.

{
  "jest": {
    "setupFiles": [
      "<rootDir>/tests/setupProxy.js"
    ]
  }
}

setupProxy.js 파일을 생성하고 다음과 같이 내용을 작성합니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api.example.com',
      changeOrigin: true,
    })
  );
};

위의 예제에서는 /api로 시작하는 요청을 http://api.example.com으로 프록시합니다. changeOrigin 옵션은 요청의 origin 헤더를 타겟 서버의 도메인으로 변경해줍니다.

프록시 설정이 완료되면 Enzyme을 사용하여 컴포넌트를 테스트할 때 해당 프록시가 적용됩니다. 이를 통해 모의 API 요청 등을 프록시하여 테스트를 더 유연하게 작성할 수 있습니다.

결론

Enzyme을 사용하여 React 컴포넌트를 테스트할 때 프록시 설정은 매우 유용할 수 있습니다. 이번 블로그 포스트에서는 http-proxy-middleware를 사용한 프록시 설정 방법을 살펴보았습니다. 프록시를 설정하면 API 요청을 가로채거나 조작하여 테스트를 더욱 유연하게 작성할 수 있습니다.

참고: Enzyme, http-proxy-middleware