msw

• msw를 jest에 사용하기 위해 setupTests.ts 파일을 생성하고 이를 jest.config.ts 에서 사용하도록 명시하였다. 이 과정에서 cannot find msw/node 라는 오류가 떴다.
  • 확인 결과 JSDOM의 export conditions 때문에 발생하는 문제였다.
  • JSDOM : Node 환경에서 DOM API 환경을 통해 브라우저 환경을 시뮬레이션 할 수 있도록 하는 라이브러리
  • export conditions : ECMAScript 모듈 시스템에서 package.json의 exports를 통해 모듈의 여러 엔트리 포인트를 정의할 수 있다.

{
  "name": "example-package",
  "version": "1.0.0",
  "exports": {
    "import": "./esm/index.js", // ECMA 모듈 시스템 사용 시
    "require": "./cjs/index.js", // Common JS 모듈 시스템 사용 시
    "node": "./node/index.js",
    "default": "./index.js"
  }

• node 환경은 fetch 같은 웹 API가 제공되지 않는다. 따라서 JSDOM은 브라우저 기능을 node에서 사용할 수 있도록 브라우저 환경용 export condition을 사용한다.

testEnvironmentOptions: {
    customExportConditions: [''],
  },

• jest 설정 파일에 다음과 같은 줄을 추가하게 되면 기본 export 조건을 사용하여 모듈을 불러오게 되므로 msw/node 모듈을 올바르게 가져올 수 있다.
• 이후 TextEncoder is not defined 에러가 발생했다. 공식 문서에 따라 polyfills 파일을 만들어 주었다. 단, 공식 문서 파일로도 에러가 나 다음 파일을 작성해주었

const { TextDecoder, TextEncoder } = require("node:util");
const { ReadableStream } = require("node:stream/web");

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
});

const { Blob, File } = require("node:buffer");
const { fetch, Headers, FormData, Request, Response } = require("undici");

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});

[1.x → 2.x](https://mswjs.io/docs/migrations/1.x-to-2.x/)

• 브라우저 통합 과정에서 다음과 같은 에러가 발생했다.

TypeError: Failed to update a ServiceWorker for scope ('http://localhost:6006/') with script ('http://localhost:6006/mockServiceWorker.js'): A bad HTTP response code (404) was received when fetching the script.

• storybook이 public 폴더를 찾지 못해서 발생한 에러 였다. 따라서 storybook 설정 파일에 staticDirs: ["../public"], 을 추가해주었다.