diff --git a/__tests__/Project.test.tsx b/__tests__/Project.test.tsx
new file mode 100644
index 0000000..d8ba711
--- /dev/null
+++ b/__tests__/Project.test.tsx
@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import Project from "@/app/projects/[id]/page";
+import { useParams } from "next/navigation";
+import "@testing-library/jest-dom";
+
+jest.mock("next/image", () => ({
+ __esModule: true,
+ default: (props: any) => {
+ return ;
+ },
+}));
+// Mocking the data.json import
+jest.mock("../src/data.json", () => [
+ {
+ id: "1",
+ projectName: "Project 1",
+ subImageUrl: "/path/to/image1.jpg",
+ description: "Description 1",
+ url: "http://example.com",
+ },
+ {
+ id: "2",
+ projectName: "Project 2",
+ subImageUrl: "/path/to/image2.jpg",
+ description: "Description 2",
+ url: "http://example2.com",
+ },
+]);
+
+// Mocking useParams hook to simulate dynamic routing
+jest.mock("next/navigation", () => ({
+ useParams: jest.fn(),
+}));
+
+describe("Project Page", () => {
+ beforeEach(() => {
+ // TypeScript needs the correct type for the return value, so specify `id` as a string.
+ (useParams as jest.Mock).mockReturnValue({ id: "1" }); // Simulating that the ID from the URL is 1
+ });
+
+ it("renders the correct project based on the id from the URL", () => {
+ render();
+
+ const projectName = screen.getByText("Project 1");
+ const projectDescription = screen.getByText("Description 1");
+ expect(projectName).toBeInTheDocument();
+ expect(projectDescription).toBeInTheDocument();
+
+ const image = screen.getByAltText("Project Thumbnail");
+ expect(image).toHaveAttribute("src", "/path/to/image1.jpg");
+ });
+
+ it("renders the similar projects section with the correct current project id", () => {
+ render();
+
+ // Test that the SimilarProjects component is rendered
+ const similarProject = screen.getByText("You may also like");
+ expect(similarProject).toBeInTheDocument();
+
+ // Ensure SimilarProjects is rendered with the correct currentProjectId
+ const project1Card = screen.getByText("Project 1");
+ expect(project1Card).toBeInTheDocument();
+ });
+
+ it("renders the Visit button and links correctly", () => {
+ render();
+
+ // Target the Visit button for the screen size you're testing
+ const visitButton = screen.getAllByRole("button", { name: /visit/i });
+
+ expect(visitButton[1]).toBeInTheDocument();
+ fireEvent.click(visitButton[1]);
+
+ expect(visitButton[0]).toBeInTheDocument();
+ fireEvent.click(visitButton[0]);
+
+ // Ensure that the correct URL is opened. (You may want to adjust this to simulate a navigation or an external link click)
+ expect(visitButton[0].closest("a")).toHaveAttribute(
+ "href",
+ "http://example.com"
+ );
+ });
+
+ it("displays the correct images for the project", () => {
+ render();
+
+ // Check that the project image and screenshots are rendered correctly
+ const projectImage = screen.getByAltText("Project Thumbnail");
+ expect(projectImage).toHaveAttribute("src", "/path/to/image1.jpg");
+
+ const screenshotImages = screen.getAllByAltText("Screenshot");
+ expect(screenshotImages).toHaveLength(2); // We have two screenshot images in the mock project
+ expect(screenshotImages[0]).toHaveAttribute(
+ "src",
+ "/images/screenshot1.png"
+ );
+ });
+});
diff --git a/__tests__/SimilarProjects.test.tsx b/__tests__/SimilarProjects.test.tsx
index eca05a3..6545b98 100644
--- a/__tests__/SimilarProjects.test.tsx
+++ b/__tests__/SimilarProjects.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from "@testing-library/react";
import SimilarProjects from "@/app/Component/SimilarProjects";
-import data from "../src/data.json";
import "@testing-library/jest-dom";
// Mock the data import