diff --git a/ui/src/components/timelineGallery/TimelineGallery.test.tsx b/ui/src/components/timelineGallery/TimelineGallery.test.tsx
new file mode 100644
index 00000000..ed997604
--- /dev/null
+++ b/ui/src/components/timelineGallery/TimelineGallery.test.tsx
@@ -0,0 +1,39 @@
+import { MockedProvider } from '@apollo/client/testing'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
+import TimelineGallery, { MY_TIMELINE_QUERY } from './TimelineGallery'
+import { timelineData } from './timelineTestData'
+
+jest.mock('../../hooks/useScrollPagination')
+
+test('timeline with media', async () => {
+  const graphqlMocks = [
+    {
+      request: {
+        query: MY_TIMELINE_QUERY,
+        variables: { onlyFavorites: false, offset: 0, limit: 200 },
+      },
+      result: {
+        data: {
+          myTimeline: timelineData,
+        },
+      },
+    },
+  ]
+
+  render(
+    <MemoryRouter initialEntries={['/timeline']}>
+      <MockedProvider mocks={graphqlMocks}>
+        <TimelineGallery />
+      </MockedProvider>
+    </MemoryRouter>
+  )
+
+  expect(screen.queryByLabelText('Show only favorites')).toBeInTheDocument()
+
+  expect(await screen.findAllByRole('link')).toHaveLength(4)
+  expect(await screen.findAllByRole('img')).toHaveLength(5)
+
+  screen.debug()
+})
diff --git a/ui/src/components/timelineGallery/TimelineGallery.tsx b/ui/src/components/timelineGallery/TimelineGallery.tsx
index 438f498b..f2428886 100644
--- a/ui/src/components/timelineGallery/TimelineGallery.tsx
+++ b/ui/src/components/timelineGallery/TimelineGallery.tsx
@@ -22,7 +22,7 @@ import { urlPresentModeSetupHook } from '../photoGallery/photoGalleryReducer'
 import TimelineFilters from './TimelineFilters'
 import client from '../../apolloClient'
 
-const MY_TIMELINE_QUERY = gql`
+export const MY_TIMELINE_QUERY = gql`
   query myTimeline(
     $onlyFavorites: Boolean
     $limit: Int
@@ -183,6 +183,8 @@ const TimelineGallery = () => {
     />
   ))
 
+  console.log('MEDIA STATE', mediaState)
+
   return (
     <div className="overflow-x-hidden">
       <TimelineFilters
diff --git a/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts b/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
index 620db4d6..b08f6597 100644
--- a/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
+++ b/ui/src/components/timelineGallery/timelineGalleryReducer.test.ts
@@ -1,10 +1,10 @@
-import { myTimeline_myTimeline } from './__generated__/myTimeline'
 import { MediaType } from '../../__generated__/globalTypes'
 import {
   timelineGalleryReducer,
   TimelineGalleryState,
   TimelineMediaIndex,
 } from './timelineGalleryReducer'
+import { timelineData } from './timelineTestData'
 
 describe('timeline gallery reducer', () => {
   const defaultEmptyState: TimelineGalleryState = {
@@ -17,119 +17,6 @@ describe('timeline gallery reducer', () => {
     timelineGroups: [],
   }
 
-  const timelineData: myTimeline_myTimeline[] = [
-    {
-      __typename: 'Media',
-      id: '1058',
-      title: '122A2876.jpg',
-      type: MediaType.Photo,
-      thumbnail: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
-        width: 1024,
-        height: 682,
-      },
-      highRes: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/122A2876_5cSPMiKL.jpg',
-        width: 6720,
-        height: 4480,
-      },
-      videoWeb: null,
-      favorite: false,
-      album: { __typename: 'Album', id: '522', title: 'random' },
-      date: '2020-12-13T18:03:40Z',
-    },
-    {
-      __typename: 'Media',
-      id: '1059',
-      title: '122A2630-Edit.jpg',
-      type: MediaType.Photo,
-      thumbnail: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
-        width: 1024,
-        height: 682,
-      },
-      highRes: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/122A2630-Edit_ySQWFAgE.jpg',
-        width: 6177,
-        height: 4118,
-      },
-      videoWeb: null,
-      favorite: false,
-      album: { __typename: 'Album', id: '523', title: 'another_album' },
-      date: '2020-11-25T16:14:33Z',
-    },
-    {
-      __typename: 'Media',
-      id: '1060',
-      title: '122A2785-2.jpg',
-      type: MediaType.Photo,
-      thumbnail: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
-        width: 1024,
-        height: 1024,
-      },
-      highRes: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/122A2785-2_mCnWjLdb.jpg',
-        width: 884,
-        height: 884,
-      },
-      videoWeb: null,
-      favorite: false,
-      album: { __typename: 'Album', id: '523', title: 'another_album' },
-      date: '2020-11-25T16:43:59Z',
-    },
-    {
-      __typename: 'Media',
-      id: '1056',
-      title: '122A2630-Edit.jpg',
-      type: MediaType.Photo,
-      thumbnail: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
-        width: 1024,
-        height: 682,
-      },
-      highRes: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/122A2630-Edit_em9g89qg.jpg',
-        width: 6177,
-        height: 4118,
-      },
-      videoWeb: null,
-      favorite: false,
-      album: { __typename: 'Album', id: '522', title: 'random' },
-      date: '2020-11-25T16:14:33Z',
-    },
-    {
-      __typename: 'Media',
-      id: '1054',
-      title: '122A2559.jpg',
-      type: MediaType.Photo,
-      thumbnail: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
-        width: 1024,
-        height: 712,
-      },
-      highRes: {
-        __typename: 'MediaURL',
-        url: 'http://localhost:4001/photo/122A2559_FDsQHuBN.jpg',
-        width: 6246,
-        height: 4346,
-      },
-      videoWeb: null,
-      favorite: false,
-      album: { __typename: 'Album', id: '522', title: 'random' },
-      date: '2020-11-09T15:38:09Z',
-    },
-  ]
-
   const defaultState = timelineGalleryReducer(defaultEmptyState, {
     type: 'replaceTimelineGroups',
     timeline: timelineData,
diff --git a/ui/src/components/timelineGallery/timelineTestData.ts b/ui/src/components/timelineGallery/timelineTestData.ts
new file mode 100644
index 00000000..5d118904
--- /dev/null
+++ b/ui/src/components/timelineGallery/timelineTestData.ts
@@ -0,0 +1,115 @@
+import { MediaType } from '../../__generated__/globalTypes'
+import { myTimeline_myTimeline } from './__generated__/myTimeline'
+
+export const timelineData: myTimeline_myTimeline[] = [
+  {
+    __typename: 'Media',
+    id: '1058',
+    title: '122A2876.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail_122A2876_jpg_Kp1U80vD.jpg',
+      width: 1024,
+      height: 682,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/122A2876_5cSPMiKL.jpg',
+      width: 6720,
+      height: 4480,
+    },
+    videoWeb: null,
+    favorite: false,
+    album: { __typename: 'Album', id: '522', title: 'random' },
+    date: '2020-12-13T18:03:40Z',
+  },
+  {
+    __typename: 'Media',
+    id: '1059',
+    title: '122A2630-Edit.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_pwjtMkpy.jpg',
+      width: 1024,
+      height: 682,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/122A2630-Edit_ySQWFAgE.jpg',
+      width: 6177,
+      height: 4118,
+    },
+    videoWeb: null,
+    favorite: false,
+    album: { __typename: 'Album', id: '523', title: 'another_album' },
+    date: '2020-11-25T16:14:33Z',
+  },
+  {
+    __typename: 'Media',
+    id: '1060',
+    title: '122A2785-2.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail_122A2785-2_jpg_CevmxEXf.jpg',
+      width: 1024,
+      height: 1024,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/122A2785-2_mCnWjLdb.jpg',
+      width: 884,
+      height: 884,
+    },
+    videoWeb: null,
+    favorite: false,
+    album: { __typename: 'Album', id: '523', title: 'another_album' },
+    date: '2020-11-25T16:43:59Z',
+  },
+  {
+    __typename: 'Media',
+    id: '1056',
+    title: '122A2630-Edit.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail_122A2630-Edit_jpg_aJPCSDDl.jpg',
+      width: 1024,
+      height: 682,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/122A2630-Edit_em9g89qg.jpg',
+      width: 6177,
+      height: 4118,
+    },
+    videoWeb: null,
+    favorite: false,
+    album: { __typename: 'Album', id: '522', title: 'random' },
+    date: '2020-11-25T16:14:33Z',
+  },
+  {
+    __typename: 'Media',
+    id: '1054',
+    title: '122A2559.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail_122A2559_jpg_MsOJtPi8.jpg',
+      width: 1024,
+      height: 712,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/122A2559_FDsQHuBN.jpg',
+      width: 6246,
+      height: 4346,
+    },
+    videoWeb: null,
+    favorite: false,
+    album: { __typename: 'Album', id: '522', title: 'random' },
+    date: '2020-11-09T15:38:09Z',
+  },
+]