Feat - JEST 초기 설정 (#60)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+  },
+};

package.json

@@ -7,16 +7,17 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@reduxjs/toolkit": "^1.9.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.5.4",
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.14",
     "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "^18.2.6",
     "@types/uuid": "^9.0.2",
     "axios": "^1.5.0",
+    "babel-jest": "^29.7.0",
     "editor_likelion": "^1.1.1",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
@@ -34,8 +35,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test": "jest"
   },
   "eslintConfig": {
     "extends": [
@@ -56,6 +57,10 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.2",
@@ -69,6 +74,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "prettier": "^2.8.8",
     "typescript": "^5.1.6"
   }

src/component/Index/Index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Index = () => {
+  return (
+    <div>
+      <h1>Hello, World!</h1>
+    </div>
+  );
+};
+
+export default Index;

src/component/Index/Index.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Index from './Index';
+
+test('renders hello message', () => {
+  const { getByText } = render(<Index />); // 컴포넌트 렌더링
+
+  // 렌더링된 컴포넌트에서 "Hello, World!" 텍스트를 찾아서 확인
+  const helloMessage = getByText(/Hello, World!/i);
+  expect(helloMessage).toBeInTheDocument();
+});