tests: update, add eslint to deps

src/api/MockProjects.ts

@@ -1,3 +1,5 @@
+import {Project} from '../models/Project'
+
 export default function getMockProjects(): Project[] {
   return [
     {
@@ -51,7 +53,6 @@ export default function getMockProjects(): Project[] {
       categories: ['environment'],
       languages: ['C++', 'Bash'],
       stars: 560,
-      description: null,
       url: 'https://github.com/project-e',
       websiteUrl: 'https://websited.com',
       lastCommitTimestamp: 1507824117

src/components/Footer.test.tsx

@@ -5,16 +5,16 @@ import '@testing-library/jest-dom';
 import Footer from './Footer';
 
 describe('Footer Component', () => {
-  beforeEach(() => {
+  it('should render the footer with social links', () => {
     render(<Footer />);
-  });
 
-  it('should render the footer with social links', () => {
     expect(screen.getByRole('contentinfo')).toBeInTheDocument();
     expect(screen.getByText(/Support these projects: Share!/i)).toBeInTheDocument();
   });
 
   it('should render social media buttons with correct links and attributes', () => {
+    render(<Footer />);
+
     // Twitter Button
     const twitterButton = screen.getByRole('link', { name: /twitter/i });
     expect(twitterButton).toBeInTheDocument();
@@ -35,6 +35,8 @@ describe('Footer Component', () => {
   });
 
   it('should render social media icons within buttons', () => {
+    render(<Footer />);
+
     // Twitter Icon
     const twitterIcon = screen.getByTestId('TwitterIcon');
     expect(twitterIcon).toBeInTheDocument();

src/components/Header.test.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render as rtlRender, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import createDefaultTheme from '../theme/createDefaultTheme';
 
 import PageHeader from './Header';
 
-describe('PageHeader Component', () => {
-    beforeEach(() => {
-      render(
-        <ThemeProvider theme={createDefaultTheme()}>
-          <Router>
-            <PageHeader />
-          </Router>
-        </ThemeProvider>
-      );
-    });
+const render = (ui: JSX.Element, options = {}) => rtlRender(
+    <ThemeProvider theme={createDefaultTheme()}>
+      <Router>
+        {ui}
+      </Router>
+    </ThemeProvider>,
+    options
+  );
 
+describe('PageHeader Component', () => {
   it('should render the header with logo and title', () => {
+    render(<PageHeader />);
+
     expect(screen.getByRole('banner')).toBeInTheDocument();
 
     const logo = screen.getByAltText('logo');
@@ -30,6 +31,8 @@ describe('PageHeader Component', () => {
   });
 
   it('should render navigation links', () => {
+    render(<PageHeader />);
+
     const addProjectButton = screen.getByRole('link', { name: /add a project!/i });
     expect(addProjectButton).toBeInTheDocument();
     expect(addProjectButton).toHaveAttribute('href', '/submit-project');

src/theme/createDefaultTheme.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Theme, createTheme } from '@mui/material/styles';
 
 export default function createDefaultTheme(): Theme {

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["es6", "dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,7 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true
   },
   "include": ["src"]
 }