diff --git a/ui/src/components/photoGallery/PhotoGallery.test.tsx b/ui/src/components/photoGallery/PhotoGallery.test.tsx
new file mode 100644
index 00000000..8913178d
--- /dev/null
+++ b/ui/src/components/photoGallery/PhotoGallery.test.tsx
@@ -0,0 +1,125 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import React from 'react'
+import { MediaType } from '../../../__generated__/globalTypes'
+import PhotoGallery from './PhotoGallery'
+import { PhotoGalleryState } from './photoGalleryReducer'
+
+require('../../localization').setupLocalization()
+
+jest.mock('./photoGalleryMutations', () => ({
+  useMarkFavoriteMutation: () => [jest.fn()],
+}))
+
+test('photo gallery with media', () => {
+  const dispatchMedia = jest.fn()
+
+  const mediaState: PhotoGalleryState = {
+    activeIndex: 0,
+    media: [
+      {
+        id: '165',
+        type: MediaType.Photo,
+        thumbnail: {
+          url:
+            'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
+          width: 768,
+          height: 1024,
+          __typename: 'MediaURL',
+        },
+        highRes: null,
+        videoWeb: null,
+        favorite: false,
+        __typename: 'Media',
+      },
+      {
+        id: '122',
+        type: MediaType.Photo,
+        thumbnail: null,
+        highRes: null,
+        videoWeb: null,
+        favorite: false,
+        __typename: 'Media',
+      },
+      {
+        id: '98',
+        type: MediaType.Video,
+        thumbnail: null,
+        highRes: null,
+        videoWeb: null,
+        favorite: false,
+        __typename: 'Media',
+      },
+    ],
+    presenting: false,
+  }
+
+  render(
+    <PhotoGallery
+      dispatchMedia={dispatchMedia}
+      mediaState={mediaState}
+      loading={false}
+    />
+  )
+
+  expect(
+    screen.getByTestId('photo-gallery-wrapper').querySelectorAll('img')
+  ).toHaveLength(3)
+})
+
+describe('photo gallery presenting', () => {
+  const dispatchMedia = jest.fn()
+
+  test('not presenting', () => {
+    const mediaStateNoPresent: PhotoGalleryState = {
+      activeIndex: -1,
+      media: [],
+      presenting: false,
+    }
+
+    render(
+      <PhotoGallery
+        dispatchMedia={dispatchMedia}
+        loading={false}
+        mediaState={mediaStateNoPresent}
+      />
+    )
+
+    expect(screen.queryByTestId('present-overlay')).not.toBeInTheDocument()
+  })
+
+  test('presenting', () => {
+    const mediaStatePresent: PhotoGalleryState = {
+      activeIndex: 0,
+      media: [
+        {
+          id: '165',
+          type: MediaType.Photo,
+          thumbnail: {
+            url:
+              'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
+            width: 768,
+            height: 1024,
+            __typename: 'MediaURL',
+          },
+          highRes: null,
+          videoWeb: null,
+          favorite: false,
+          __typename: 'Media',
+        },
+      ],
+      presenting: true,
+    }
+
+    render(
+      <PhotoGallery
+        dispatchMedia={dispatchMedia}
+        loading={false}
+        mediaState={mediaStatePresent}
+      />
+    )
+
+    expect(screen.getByTestId('present-overlay')).toBeInTheDocument()
+  })
+})
diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx
index a0dbdbe5..8dec7185 100644
--- a/ui/src/components/photoGallery/PhotoGallery.tsx
+++ b/ui/src/components/photoGallery/PhotoGallery.tsx
@@ -97,7 +97,7 @@ const PhotoGallery = ({
 
   return (
     <ClearWrap>
-      <Gallery>
+      <Gallery data-testid="photo-gallery-wrapper">
         <Loader active={loading}>
           {t('general.loading.media', 'Loading media')}
         </Loader>
diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx
new file mode 100644
index 00000000..13aa5132
--- /dev/null
+++ b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx
@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import React from 'react'
+import { MediaType } from '../../../../__generated__/globalTypes'
+import PresentMedia, { PresentMediaProps_Media } from './PresentMedia'
+
+test('render present image', () => {
+  const media: PresentMediaProps_Media = {
+    __typename: 'Media',
+    id: '123',
+    type: MediaType.Photo,
+    highRes: null,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: '/sample_image.jpg',
+    },
+  }
+
+  render(<PresentMedia media={media} />)
+
+  expect(screen.getByTestId('present-img-thumbnail')).toHaveAttribute(
+    'src',
+    'http://localhost/sample_image.jpg'
+  )
+  expect(screen.getByTestId('present-img-highres')).toHaveStyle({
+    display: 'none',
+  })
+})
+
+test('render present video', () => {
+  const media: PresentMediaProps_Media = {
+    __typename: 'Media',
+    id: '123',
+    type: MediaType.Video,
+    highRes: null,
+    videoWeb: {
+      __typename: 'MediaURL',
+      url: '/sample_video.mp4',
+    },
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: '/sample_video_thumb.jpg',
+    },
+  }
+
+  render(<PresentMedia media={media} />)
+
+  expect(screen.getByTestId('present-video')).toHaveAttribute(
+    'poster',
+    'http://localhost/sample_video_thumb.jpg'
+  )
+
+  expect(
+    screen.getByTestId('present-video').querySelector('source')
+  ).toHaveAttribute('src', 'http://localhost/sample_video.mp4')
+})
diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
index daa1f660..0076a097 100644
--- a/ui/src/components/photoGallery/presentView/PresentMedia.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
@@ -48,10 +48,14 @@ const PresentMedia = ({
     case MediaType.Photo:
       return (
         <div {...otherProps}>
-          <StyledPhoto src={media.thumbnail?.url} />
+          <StyledPhoto
+            src={media.thumbnail?.url}
+            data-testid="present-img-thumbnail"
+          />
           <StyledPhoto
             style={{ display: 'none' }}
             src={media.highRes?.url}
+            data-testid="present-img-highres"
             onLoad={e => {
               const elem = e.target as HTMLImageElement
               elem.style.display = 'initial'
@@ -61,7 +65,7 @@ const PresentMedia = ({
         </div>
       )
     case MediaType.Video:
-      return <StyledVideo media={media} />
+      return <StyledVideo media={media} data-testid="present-video" />
   }
 
   exhaustiveCheck(media.type)
diff --git a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx
index e570a176..256e9109 100644
--- a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx
@@ -94,6 +94,7 @@ const PresentNavigationOverlay = ({
 
   return (
     <StyledOverlayContainer
+      data-testid="present-overlay"
       onMouseMove={() => {
         onMouseMove.current && onMouseMove.current()
       }}