경북대 FE_이정민 5주차 Step1

README.md

@@ -1 +1,11 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+## 1단계 - Form 부분 테스트 코드 작성하기
+
+### 기능 요구 사항
+- [x] Jest와 React Testing Library를 사용하여 테스트 기반 환경을 구축해요.
+- [x] MSW를 사용하여 Mock API가 동작하도록 해요. (상세 API / 옵션 API)
+- [x] 단위 테스트로 작성하면 좋을 테스트가 있다면 단위테스트 코드를 작성해요.
+- [x] 상품 상세 페이지와 관련된 통합 테스트 코드를 작성해요.
+- [x] 결제하기 페이지의 Form과 관련된 통합 테스트 코드를 작성해요.
+  - [x] 현금영수증 Checkbox가 false인 경우 현금영수증 종류, 현금영수증 번호 field가 비활성화 되어있는지 확인하는 테스트 코드를 작성해요. (만약 true인 경우 현금영수증 종류, 번호 field에 값이 입력 되어야 해요)
+  - [x] form의 validation 로직이 정상 동작하는지 확인하는 테스트 코드를 작성해요.

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-private-property-in-object'
+  ]
+};

craco.config.js

@@ -6,4 +6,18 @@ module.exports = {
       '@': path.resolve(__dirname, 'src'),
     },
   },
-};
+  jest: {
+    configure: {
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+      },
+      setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+      transform: {
+        '^.+\\.(ts|tsx)$': 'ts-jest',
+      },
+      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    },
+  },
+};