diff --git a/client/src/components/__tests__/module-detail.js b/client/src/components/__tests__/module-detail.js
index 1c7e083..6c1422c 100644
--- a/client/src/components/__tests__/module-detail.js
+++ b/client/src/components/__tests__/module-detail.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import ModuleDetail from '../module-detail';
 
 const mockModule = {
@@ -41,6 +41,6 @@ describe('Module Detail View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<ModuleDetail module={mockModule} track={mockParentTrack} />);
+    renderWithRouter(<ModuleDetail module={mockModule} track={mockParentTrack} />);
   });
 });
diff --git a/client/src/components/__tests__/modules-navigation.js b/client/src/components/__tests__/modules-navigation.js
index b501622..f7d0c2e 100644
--- a/client/src/components/__tests__/modules-navigation.js
+++ b/client/src/components/__tests__/modules-navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import ModuleNav from '../modules-navigation';
 
 const mockModule = {
@@ -41,6 +41,6 @@ describe('Modules Navigation View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<ModuleNav module={mockModule} track={mockParentTrack} />);
+    renderWithRouter(<ModuleNav module={mockModule} track={mockParentTrack} />);
   });
 });
diff --git a/client/src/components/__tests__/track-detail.js b/client/src/components/__tests__/track-detail.js
index ad3c62a..86f8454 100644
--- a/client/src/components/__tests__/track-detail.js
+++ b/client/src/components/__tests__/track-detail.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import TrackDetail from '../track-detail';
 
 const mockTrack = {
@@ -32,6 +32,6 @@ describe('Module Detail View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<TrackDetail {...mockTrack} />);
+    renderWithRouter(<TrackDetail {...mockTrack} />);
   });
 });
diff --git a/client/src/containers/__tests__/track-card.js b/client/src/containers/__tests__/track-card.js
index a1378d1..39c5ff2 100644
--- a/client/src/containers/__tests__/track-card.js
+++ b/client/src/containers/__tests__/track-card.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
+import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
 import TrackCard from '../track-card';
 
 const mockTrackCardData = {
@@ -21,7 +21,7 @@ describe('Track Card', () => {
 
   it('renders track Card', async () => {
     const mocks = [];
-    const { getByText } = await renderApollo(
+    const { getByText } = await renderApolloWithRouter(
       <TrackCard track={mockTrackCardData} />,
       {
         mocks,
diff --git a/client/src/pages/__tests__/tracks.js b/client/src/pages/__tests__/tracks.js
index d0a7a46..8a0ed04 100644
--- a/client/src/pages/__tests__/tracks.js
+++ b/client/src/pages/__tests__/tracks.js
@@ -1,9 +1,26 @@
 import React from 'react';
 // this adds custom jest matchers from jest-dom
 import '@testing-library/jest-dom/extend-expect';
-import { InMemoryCache } from '@apollo/client';
-import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
-import Tracks, { TRACKS } from '../tracks';
+import { InMemoryCache, gql } from '@apollo/client';
+import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
+import Tracks from '../tracks';
+
+/** Best practice is to export this operation from the component file. We've defined it separately to remain consistent with the course content. */
+const TRACKS = gql`
+  query getTracks {
+    tracksForHome {
+      id
+      title
+      thumbnail
+      length
+      modulesCount
+      author {
+        name
+        photo
+      }
+    }
+  }
+`;
 
 const mockTrack = {
   id: 'c_0',
@@ -35,7 +52,7 @@ describe('Tracks Page', () => {
       },
     ];
 
-    const { getByText } = await renderApollo(<Tracks />, {
+    const { getByText } = await renderApolloWithRouter(<Tracks />, {
       mocks,
       cache,
     });
diff --git a/client/src/utils/test-utils.js b/client/src/utils/test-utils.js
index a8c0b45..bd30f43 100644
--- a/client/src/utils/test-utils.js
+++ b/client/src/utils/test-utils.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom'
 import '@testing-library/jest-dom/extend-expect';
 import { MockedProvider } from '@apollo/client/testing';
 
@@ -22,5 +23,13 @@ const renderApollo = (
   );
 };
 
+export const renderWithRouterGenerator = (renderer) => (node, options) => {
+  return renderer(<BrowserRouter>{node}</BrowserRouter>, options)
+}
+
+export const renderWithRouter = renderWithRouterGenerator(render)
+
+export const renderApolloWithRouter = renderWithRouterGenerator(renderApollo)
+
 export * from '@testing-library/react';
 export { renderApollo };
diff --git a/final/client/src/components/__tests__/module-detail.js b/final/client/src/components/__tests__/module-detail.js
index 1c7e083..6c1422c 100644
--- a/final/client/src/components/__tests__/module-detail.js
+++ b/final/client/src/components/__tests__/module-detail.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import ModuleDetail from '../module-detail';
 
 const mockModule = {
@@ -41,6 +41,6 @@ describe('Module Detail View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<ModuleDetail module={mockModule} track={mockParentTrack} />);
+    renderWithRouter(<ModuleDetail module={mockModule} track={mockParentTrack} />);
   });
 });
diff --git a/final/client/src/components/__tests__/modules-navigation.js b/final/client/src/components/__tests__/modules-navigation.js
index b501622..f7d0c2e 100644
--- a/final/client/src/components/__tests__/modules-navigation.js
+++ b/final/client/src/components/__tests__/modules-navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import ModuleNav from '../modules-navigation';
 
 const mockModule = {
@@ -41,6 +41,6 @@ describe('Modules Navigation View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<ModuleNav module={mockModule} track={mockParentTrack} />);
+    renderWithRouter(<ModuleNav module={mockModule} track={mockParentTrack} />);
   });
 });
diff --git a/final/client/src/components/__tests__/track-detail.js b/final/client/src/components/__tests__/track-detail.js
index ad3c62a..86f8454 100644
--- a/final/client/src/components/__tests__/track-detail.js
+++ b/final/client/src/components/__tests__/track-detail.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '../../utils/test-utils';
+import { renderWithRouter, cleanup } from '../../utils/test-utils';
 import TrackDetail from '../track-detail';
 
 const mockTrack = {
@@ -32,6 +32,6 @@ describe('Module Detail View', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<TrackDetail {...mockTrack} />);
+    renderWithRouter(<TrackDetail {...mockTrack} />);
   });
 });
diff --git a/final/client/src/containers/__tests__/track-card.js b/final/client/src/containers/__tests__/track-card.js
index a1378d1..39c5ff2 100644
--- a/final/client/src/containers/__tests__/track-card.js
+++ b/final/client/src/containers/__tests__/track-card.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
+import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
 import TrackCard from '../track-card';
 
 const mockTrackCardData = {
@@ -21,7 +21,7 @@ describe('Track Card', () => {
 
   it('renders track Card', async () => {
     const mocks = [];
-    const { getByText } = await renderApollo(
+    const { getByText } = await renderApolloWithRouter(
       <TrackCard track={mockTrackCardData} />,
       {
         mocks,
diff --git a/final/client/src/pages/__tests__/tracks.js b/final/client/src/pages/__tests__/tracks.js
index d0a7a46..8a0ed04 100644
--- a/final/client/src/pages/__tests__/tracks.js
+++ b/final/client/src/pages/__tests__/tracks.js
@@ -1,9 +1,26 @@
 import React from 'react';
 // this adds custom jest matchers from jest-dom
 import '@testing-library/jest-dom/extend-expect';
-import { InMemoryCache } from '@apollo/client';
-import { renderApollo, cleanup, waitForElement } from '../../utils/test-utils';
-import Tracks, { TRACKS } from '../tracks';
+import { InMemoryCache, gql } from '@apollo/client';
+import { renderApolloWithRouter, cleanup, waitForElement } from '../../utils/test-utils';
+import Tracks from '../tracks';
+
+/** Best practice is to export this operation from the component file. We've defined it separately to remain consistent with the course content. */
+const TRACKS = gql`
+  query getTracks {
+    tracksForHome {
+      id
+      title
+      thumbnail
+      length
+      modulesCount
+      author {
+        name
+        photo
+      }
+    }
+  }
+`;
 
 const mockTrack = {
   id: 'c_0',
@@ -35,7 +52,7 @@ describe('Tracks Page', () => {
       },
     ];
 
-    const { getByText } = await renderApollo(<Tracks />, {
+    const { getByText } = await renderApolloWithRouter(<Tracks />, {
       mocks,
       cache,
     });
diff --git a/final/client/src/utils/test-utils.js b/final/client/src/utils/test-utils.js
index a8c0b45..bd30f43 100644
--- a/final/client/src/utils/test-utils.js
+++ b/final/client/src/utils/test-utils.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom'
 import '@testing-library/jest-dom/extend-expect';
 import { MockedProvider } from '@apollo/client/testing';
 
@@ -22,5 +23,13 @@ const renderApollo = (
   );
 };
 
+export const renderWithRouterGenerator = (renderer) => (node, options) => {
+  return renderer(<BrowserRouter>{node}</BrowserRouter>, options)
+}
+
+export const renderWithRouter = renderWithRouterGenerator(render)
+
+export const renderApolloWithRouter = renderWithRouterGenerator(renderApollo)
+
 export * from '@testing-library/react';
 export { renderApollo };