diff --git a/src/App.test.js b/src/App.test.js index 2b34b1b9f..81a8c8386 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,9 +1,48 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import App from './App'; -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = document.getElementById('test'); - expect(linkElement).toBeInTheDocument(); +// Mock the child components to isolate the App component's routing logic +jest.mock('./Home', () => ({ Home: () =>
Mock Home
})); +jest.mock('./Resume', () => ({ Resume: () =>
Mock Resume
})); +jest.mock('./Projects', () => ({ Projects: () =>
Mock Projects
})); +jest.mock('./Contact', () => ({ Contact: () =>
Mock Contact
})); +jest.mock('./404', () => ({ NoMatch: () =>
Mock NoMatch
})); + +// Mock the layout components +jest.mock('./components/Layout', () => ({ + Layout: ({ children }) =>
{children}
+})); +jest.mock('./components/NavigationBar', () => ({ + NavigationBar: () =>
Mock NavigationBar
+})); +jest.mock('./components/Jumbotron', () => ({ + Jumbotron: () =>
Mock Jumbotron
+})); + +// Footer is a default export in my App.js, so this mock is slightly different +jest.mock('./components/Footer', () => () =>
Mock Footer
); + +describe('App Component', () => { + + test('renders core layout components', () => { + render(); + + // Verify that the persistent UI elements always render + expect(screen.getByText('Mock NavigationBar')).toBeInTheDocument(); + expect(screen.getByText('Mock Jumbotron')).toBeInTheDocument(); + expect(screen.getByTestId('mock-layout')).toBeInTheDocument(); + expect(screen.getByText('Mock Footer')).toBeInTheDocument(); + }); + + test('renders the Home component on the default route ("/")', () => { + render(); + + // Because App.js uses BrowserRouter, it will default to the '/' path in a basic test environment + expect(screen.getByText('Mock Home')).toBeInTheDocument(); + + // Ensure other routes are NOT rendering at the same time (testing the Switch) + expect(screen.queryByText('Mock Resume')).not.toBeInTheDocument(); + expect(screen.queryByText('Mock NoMatch')).not.toBeInTheDocument(); + }); });