diff --git a/code/client/src/App.js b/code/client/src/App.js
index bfd59c39f..5be46eebe 100644
--- a/code/client/src/App.js
+++ b/code/client/src/App.js
@@ -35,7 +35,6 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import TrackChangesIcon from "@mui/icons-material/TrackChanges";
 import CloseIcon from "@mui/icons-material/Close";
-import BarChartIcon from "@mui/icons-material/BarChart";
 
 import "@fontsource/mulish";
 
@@ -55,7 +54,7 @@ const theme = createTheme({
 
 
 
-function App() {
+function App({ RouterComponent = Router }) {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   // On component mount, check if user is already logged in
@@ -74,7 +73,7 @@ function App() {
   };
   return (
     <ThemeProvider theme={theme}>
-      <Router>
+      <RouterComponent>
         <Box sx={{ display: "flex" }}>
           <CssBaseline />
 
@@ -225,7 +224,7 @@ function App() {
             </Box>
           </Box>
         </Box>
-      </Router>
+      </RouterComponent>
     </ThemeProvider>
   );
 }
diff --git a/code/client/src/__tests__/frontend.test.js b/code/client/src/__tests__/frontend.test.js
index c32d0f4be..80c02d4b6 100644
--- a/code/client/src/__tests__/frontend.test.js
+++ b/code/client/src/__tests__/frontend.test.js
@@ -1,15 +1,35 @@
-import apiClient from '../services/apiClient.js'
+// frontend.test.js
 import { render, screen } from '@testing-library/react';
-import App from '../App';
-
-// tests
-// test('test connection to server', async () => {
-//   const response = await apiClient.get('/check-connection');
-//   expect(response.status).toBe(200);
-// })
-
-test('renders home text', () => {
-  render(<App />);
-  const homeElement = screen.getByText(/welcome to the home page/i); // case-insensitive due to the regular expression /i
-  expect(homeElement).toBeInTheDocument();
+import { MemoryRouter } from 'react-router-dom';
+import App from '../App.js';
+// import { authenticated } from '../utils/authenticate.js';
+
+// Mock the charts
+jest.mock('react-chartjs-2', () => ({
+  Line: () => <div>Mocked Line Chart</div>,
+}));
+
+// Mock the authenticated function to prevent redirection
+jest.mock('../utils/authenticate.js', () => ({
+  authenticated: jest.fn(),
+}));
+
+beforeEach(() => {
+  // Simulate authenticated user
+  localStorage.setItem('authToken', 'mock-token');
 });
+
+afterEach(() => {
+  // Cleanup localStorage
+  localStorage.removeItem('authToken');
+});
+
+test('renders home page with mocked charts', () => {
+  render(
+    <App RouterComponent={MemoryRouter} /> 
+  );
+
+  const mockCharts = screen.getAllByText(/Mocked Line Chart/i);
+  expect(mockCharts[0]).toBeInTheDocument();
+  expect(mockCharts).toHaveLength(5); // Adjust based on the number of charts expected
+});
\ No newline at end of file
diff --git a/code/client/src/__tests__/serverRequest.test.js b/code/client/src/__tests__/serverRequest.test.js
new file mode 100644
index 000000000..012e996d0
--- /dev/null
+++ b/code/client/src/__tests__/serverRequest.test.js
@@ -0,0 +1,7 @@
+import apiClient from '../services/apiClient.js'
+
+
+test('test connection to server', async () => {
+  const response = await apiClient.get('/');
+  expect(response.status).toBe(200);
+})
\ No newline at end of file