feat: test 코드 추가

.yarn/sdks/typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript",
-  "version": "5.4.5-sdk",
+  "version": "4.6.4-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs",
   "bin": {

package.json

@@ -8,15 +8,18 @@
     "@babel/preset-react": "^7.24.1",
     "@commitlint/cli": "^19.2.2",
     "@commitlint/config-conventional": "^19.2.2",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.2",
+    "@testing-library/react": "^15.0.4",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/bootstrap": "^5",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18",
     "@types/testing-library__react": "^10.2.0",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -26,9 +29,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.1",
     "husky": "^9.0.11",
+    "jest": "^29.7.0",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
+    "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "typescript": "4.6.4"
   },

src/common/Header/Header.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import App from "pages/App";
+
+describe("App navigation", () => {
+  it("should navigate to /home when the Home button is clicked", async () => {
+    // MemoryRouter를 사용하여 초기 경로를 설정
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>,
+    );
+
+    // Home 버튼을 찾고 클릭 이벤트를 발생시킴
+    const homeButton = screen.getByRole("link", { name: "logo" });
+    userEvent.click(homeButton);
+
+    // 적절한 URL로 리디렉션이 되었는지 확인
+    // 주의: 실제 브라우저의 window.location은 변경되지 않으므로, 상태를 통해 판단해야 함
+    // MemoryRouter의 history 객체를 통해 URL 변경을 감지할 수 있음
+    expect(window.location.pathname).toBe("/");
+  });
+});

src/common/Header/Header.tsx

@@ -14,7 +14,9 @@ const Header = () => {
     <div className="stiky z-10 w-full h-12 text-white top-0">
       <div className="flex w-full h-12 relative justify-between items-center my-0 mx-auto py-0 px-4">
         <div className="h-full flex justify-center items-center">
-          <img src="/images/rm-logo.png" alt="logo" className="h-8 w-8" />
+          <Link to="/">
+            <img src="/images/rm-logo.png" alt="logo" className="h-8 w-8" />
+          </Link>
         </div>
         <div className="flex justify-center items-center">
           <Link to="https://github.com/">

src/pages/App.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import App from "./App";
+
+describe("App Component", () => {
+  it("renders correctly", () => {
+    const { asFragment } = render(
+      <MemoryRouter>
+        <App />
+      </MemoryRouter>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/pages/__snapshots__/App.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App Component renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="App"
+  >
+    <div>
+      <div
+        class="stiky z-10 w-full h-12 text-white top-0"
+      >
+        <div
+          class="flex w-full h-12 relative justify-between items-center my-0 mx-auto py-0 px-4"
+        >
+          <div
+            class="h-full flex justify-center items-center"
+          >
+            <a
+              href="/"
+            >
+              <img
+                alt="logo"
+                class="h-8 w-8"
+                src="/images/rm-logo.png"
+              />
+            </a>
+          </div>
+          <div
+            class="flex justify-center items-center"
+          >
+            <a
+              href="https://github.com/"
+            >
+              <img
+                alt="github"
+                class="h-8 w-8 mr-3"
+                src="/images/github-logo.svg"
+              />
+            </a>
+            <img
+              alt="dark"
+              class="h-8 w-8 mr-3"
+              src="/images/light-to-dark.svg"
+            />
+            <button
+              class="p-0 btn btn-transparent"
+              type="button"
+            >
+              <img
+                alt="mypage"
+                class="h-8 w-8"
+                src="/images/mypage.svg"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        Homepage
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

tsconfig.json

@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["jest"]
+    "types": ["jest"],
+    "baseUrl": "./src"
   },
   "include": [
     "src"