fix: jest에서 msw ver2를 목서버로 사용 시 생기는 오류 수정

1. msw/node 를 읽지 못함
- jest.config.js의 testEnvironment 빈문자열

2. ReferentError: TextEnCoder is not defined
- 해결 : jest.polyfills.js 추가 및 undici 설치

3. ReferenceError: ReadableStream is not defined
- 해결 : undici 다운 그레이드
undici": "^6.19.5", -> "^5.0.0"

frontend/.eslintrc.cjs

@@ -11,7 +11,15 @@ module.exports = {
     'plugin:react/recommended',
     'prettier',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'webpack.config.js', 'jest.config.js', 'tsconfig.json'],
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs',
+    'webpack.config.js',
+    'jest.config.js',
+    'jest.polyfills.js',
+    'jest.setup.js',
+    'tsconfig.json',
+  ],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

frontend/jest.config.js

@@ -4,5 +4,10 @@ const { compilerOptions } = require('./tsconfig');
 
 module.exports = {
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
+  setupFiles: ['./jest.polyfills.js'],
   testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
 };

frontend/jest.polyfills.js

@@ -0,0 +1,20 @@
+const { TextDecoder, TextEncoder, ReadableStream } = require('node:util');
+
+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 },
+});

frontend/jest.setup.js

@@ -0,0 +1,5 @@
+import server from './src/mocks/server';
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

frontend/package.json

@@ -15,7 +15,6 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
-    "@types/jest": "^29.5.12",
     "dotenv-webpack": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -35,6 +34,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
@@ -60,6 +60,7 @@
     "stylelint-order": "^6.0.4",
     "ts-jest": "^29.2.4",
     "typescript": "^5.5.3",
+    "undici": "5.0.0",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

frontend/yarn.lock

@@ -7817,6 +7817,11 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+[email protected]:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.0.0.tgz#3c1e08c7f0df90c485d5d8dbb0517e11e34f2090"
+  integrity sha512-VhUpiZ3No1DOPPQVQnsDZyfcbTTcHdcgWej1PdFnSvOeJmOVDgiOHkunJmBLfmjt4CqgPQddPVjSWW0dsTs5Yg==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"