Changed package.json temporarily to run unit tests, both fail[EW, RS]

frontend/package.json

@@ -41,7 +41,6 @@
     "fs-extra": "^9.0.1",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.0",
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
@@ -78,7 +77,8 @@
     "start": "node scripts/start.js",
     "start-api": "cd api && venv/bin/flask run --no-debugger",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js",
+    "unit_tests": "jest"
   },
   "eslintConfig": {
     "extends": [
@@ -117,7 +117,7 @@
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
-    "testRunner": "/Users/iza/Documents/Imperial/Programming_IC/second_year/DRP/drp-inaglobe-platform/frontend/node_modules/jest-circus/runner.js",
+    "testRunner": "/home/rahilshah/Documents/Year2/DRP/drp-inaglobe-platform/frontend/node_modules/jest-circus/runner.js",
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
@@ -155,5 +155,8 @@
       "react-app"
     ]
   },
-  "proxy": "http://127.0.0.1:5000"
+  "proxy": "http://127.0.0.1:5000",
+  "devDependencies": {
+    "jest": "^27.0.4"
+  }
 }

frontend/src/ProjectDetails.js

@@ -19,7 +19,7 @@ const ProjectDetails = () => {
         <div className="project-details">
             {project && <h2>{project.name}</h2>}
             {project && <h3>Status: {project.status}</h3>}
-            {project && <p>Descsription: {project.description}</p>}
+            {project && <p>Description: {project.description}</p>}
 
             <button onClick={handleRemove}>Delete project</button>
         </div>

frontend/src/__tests__/ProjectDetails.test.js

+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+import ProjectDetails from "../ProjectDetails"
+
+let container = null;
+beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement("div");
+    document.body.appendChild(container);
+});
+
+afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+});
+
+it("Renders project data", async () => {
+    const fakeProjectDetail = {
+        name: "Mock project",
+        status: "Available",
+        description: "This is an example of a project description for testing purposes"
+    };
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+        Promise.resolve({
+            json: () => Promise.resolve(fakeProjectDetail)
+        })
+    );
+
+    await act(async () => {
+        render(<ProjectDetails id="123" />, container);
+    });
+
+    expect(container.querySelector("h2").textContent).toBe(fakeProjectDetail.name);
+    expect(container.querySelector("h3").textContent).toBe(fakeProjectDetail.status);
+    expect(container.textContent).toContain(fakeProjectDetail.description);
+
+    global.fetch.mockRestore();
+
+});
\ No newline at end of file