강원대 FE_ step1 과제 제출합니다.

.eslintrc.js

@@ -50,7 +50,13 @@ module.exports = {
     ],
     '@typescript-eslint/no-use-before-define': ['off'],
   },
-  ignorePatterns: ['**/build/**/*', '.eslintrc.js', 'craco.config.js'],
+  ignorePatterns: [
+    '**/build/**/*',
+    '.eslintrc.js',
+    'craco.config.js',
+    'babel.config.ts',
+    'jest.config.ts',
+  ],
   settings: {
     'import/resolver': {
       typescript: {},

README.md

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

babel.config.ts

@@ -0,0 +1,11 @@
+import { TransformOptions } from '@babel/core';
+
+const config: TransformOptions = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+  plugins: [
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-private-property-in-object',
+  ],
+};
+
+export default config;

craco.config.js

@@ -6,4 +6,11 @@ module.exports = {
       '@': path.resolve(__dirname, 'src'),
     },
   },
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+      },
+    },
+  },
 };

jest.config.ts

@@ -0,0 +1,24 @@
+import { pathsToModuleNameMapper } from 'ts-jest';
+import { compilerOptions } from './tsconfig.json';
+import babelConfig from './babel.config';
+
+const config = {
+  preset: 'ts-jest/presets/js-with-babel',
+  testEnvironment: 'jest-environment-jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'], // Jest 설정 파일 추가
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!axios)/'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json',
+      babelConfig,
+      useESM: false,
+    },
+  },
+};
+
+export default config;