diff --git a/packages/lib-classifier/src/components/Classifier/Classifier.spec.js b/packages/lib-classifier/src/components/Classifier/Classifier.spec.js
index 4b5504c810..e3312c2b29 100644
--- a/packages/lib-classifier/src/components/Classifier/Classifier.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/Classifier.spec.js
@@ -65,7 +65,7 @@ describe('Components > Classifier', function () {
   describe('while the subject is loading', function () {
     let subjectImage, tabPanel, taskAnswers, taskTab, tutorialTab, workflow
 
-    before(function () {
+    before(async function () {
       sinon.replace(window, 'Image', MockSlowImage)
       const subject = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example.png' }] })
       const store = mockStore({ subject })
@@ -80,6 +80,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       taskTab = screen.getByRole('tab', { name: 'TaskArea.task'})
       tutorialTab = screen.getByRole('tab', { name: 'TaskArea.tutorial'})
       subjectImage = screen.getByRole('img', { name: `Subject ${subject.id}` })
@@ -143,6 +144,8 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
+
       await when(() => store.subjectViewer.loadingState === asyncStates.success)
       taskTab = screen.getByRole('tab', { name: 'TaskArea.task'})
       tutorialTab = screen.getByRole('tab', { name: 'TaskArea.tutorial'})
@@ -254,6 +257,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       await when(() => store.subjectViewer.loadingState === asyncStates.success)
       const newSnapshot = {
         ...workflowSnapshot,
@@ -354,6 +358,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       tutorialHeading = await screen.findByRole('heading', { name: 'ModalTutorial.title' })
     })
 
@@ -392,6 +397,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       await when(() => store.tutorials.active.hasNotBeenSeen)
       tutorialHeading = screen.queryByRole('heading', { name: 'ModalTutorial.title' })
     })
@@ -413,7 +419,7 @@ describe('Components > Classifier', function () {
 
       const roles = []
       const subjectOneSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example1.png' }] })
-      const subjectTwoSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example2.png' }] })
+      const subjectTwoSnapshot = SubjectFactory.build({ locations: [{ 'image/png': 'https://foo.bar/example.png' }] })
       const workflowSnapshot = branchingWorkflow
       workflowSnapshot.strings = workflowStrings
       workflowSnapshot.grouped = true
@@ -469,6 +475,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       await when(() => store.subjectViewer.loadingState === asyncStates.success)
       rerender(
         <Classifier
@@ -480,6 +487,7 @@ describe('Components > Classifier', function () {
           wrapper: withStore(store)
         }
       )
+      await screen.findByTestId('subject-viewer')
       workflow = store.workflows.active
       await when(() => store.subjectViewer.loadingState === asyncStates.loading)
       await when(() => store.subjectViewer.loadingState === asyncStates.success)
@@ -506,7 +514,7 @@ describe('Components > Classifier', function () {
     })
 
     it('should show a subject image from the selected set', function () {
-      expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example2.png')
+      expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
     })
 
     describe('task answers', function () {
diff --git a/packages/lib-classifier/src/components/Classifier/ClassifierContainer.spec.js b/packages/lib-classifier/src/components/Classifier/ClassifierContainer.spec.js
index 70580e40a9..37ff6a35aa 100644
--- a/packages/lib-classifier/src/components/Classifier/ClassifierContainer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/ClassifierContainer.spec.js
@@ -419,6 +419,7 @@ describe('components > ClassifierContainer', function () {
     })
 
     it('should be able to view inactive workflows', async function () {
+      await screen.findByTestId('subject-viewer')
       await waitFor(() => {
         const subjectImage = screen.getByRole('img', {name: `Subject ${subjectSnapshot.id}` })
         expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
@@ -515,6 +516,7 @@ describe('components > ClassifierContainer', function () {
     })
 
     it('should be able to view inactive workflows', async function () {
+      await screen.findByTestId('subject-viewer')
       await waitFor(() => {
         const subjectImage = screen.getByRole('img', {name: `Subject ${subjectSnapshot.id}` })
         expect(subjectImage.getAttribute('href')).to.equal('https://foo.bar/example.png')
diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.spec.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.spec.js
index 330dbac932..c14d8196c8 100644
--- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.spec.js
@@ -3,10 +3,11 @@ import { composeStory } from '@storybook/react'
 import Meta, { Default, mockTasks } from './CenteredLayout.stories.js'
 
 describe('Component > Layouts > Centered', function () {
-  it('should render a subject and a task', function () {
+  it('should render a subject and a task', async function () {
     const DefaultStory = composeStory(Default, Meta)
     render(<DefaultStory />)
-    expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
+    await screen.findByTestId('subject-viewer')
+    expect(await screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
     expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
   })
 })
diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.spec.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.spec.js
index 57b42ebc85..62286cbb6e 100644
--- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.spec.js
@@ -4,9 +4,10 @@ import Meta, { Default, mockTasks } from './MaxWidth.stories.js'
 
 describe('Component > Layouts > MaxWidth', function () {
 
-  it('should render a subject and a task', function () {
+  it('should render a subject and a task', async function () {
     const DefaultStory = composeStory(Default, Meta)
     render(<DefaultStory />)
+    await screen.findByTestId('subject-viewer')
     expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
     expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
   })
diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.spec.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.spec.js
index c97a793424..cc1d1e13d0 100644
--- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.spec.js
@@ -3,9 +3,10 @@ import { composeStory } from '@storybook/react'
 import Meta, { Default, mockTasks } from './NoMaxWidth.stories.js'
 
 describe('Component > Layouts > NoMaxWidth', function () {
-  it('should render a subject and a task', function () {
+  it('should render a subject and a task', async function () {
     const DefaultStory = composeStory(Default, Meta)
     render(<DefaultStory />)
+    await screen.findByTestId('subject-viewer')
     expect(screen.getByLabelText('Subject 1')).exists() // img aria-label from SVGImage
     expect(screen.getByText(mockTasks.init.strings.question)).exists() // task question paragraph
   })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
index 02b0743c34..82c1f996b1 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react';
 import asyncStates from '@zooniverse/async-states'
 import PropTypes from 'prop-types'
 import { useTranslation } from '@translations/i18n'
@@ -41,44 +41,38 @@ function SubjectViewer({
   subjectQueueState = asyncStates.initialized,
   subjectReadyState
 }) {
-  const { t } = useTranslation('components')
-  const [Viewer, setViewer] = useState(null)
+  const [ViewComponent, setViewComponent] = useState(null);
 
-  async function loadViewer() {
-    setViewer(await getViewer(subject?.viewer))
-  }
+  useEffect(() => {
+    setViewComponent(null)
 
-  switch (subjectQueueState) {
-    case asyncStates.initialized: {
-      return null
-    }
-    case asyncStates.loading: {
-      return (<div>{t('SubjectViewer.loading')}</div>)
+    async function loadViewer() {
+      setViewComponent(await getViewer(subject?.viewer))
     }
-    case asyncStates.error: {
-      console.error('There was an error loading the subjects')
-      return null
-    }
-    case asyncStates.success: {
-      if (Viewer === null) {
-        loadViewer();
-      } else if (Viewer) {
-        return (
-          <Viewer
-            enableInteractionLayer={enableInteractionLayer}
-            key={subject.id}
-            subject={subject}
-            loadingState={subjectReadyState}
-            onError={onError}
-            onReady={onSubjectReady}
-            viewerConfiguration={subject?.viewerConfiguration}
-          />
-        )
-      }
+    loadViewer()
+  }, [subject])
 
-      return null
-    }
-  }
+  const { t } = useTranslation('components')
+
+	if (subjectQueueState === asyncStates.loading) {
+		return (<div>{t('SubjectViewer.loading')}</div>)
+	} else if (subjectQueueState === asyncStates.error) {
+		console.error('There was an error loading the subjects')
+	} else if (subjectQueueState === asyncStates.success && subject && ViewComponent) {
+    return (<div data-testid="subject-viewer">
+      <ViewComponent
+        enableInteractionLayer={enableInteractionLayer}
+        key={subject.id}
+        subject={subject}
+        loadingState={subjectReadyState}
+        onError={onError}
+        onReady={onSubjectReady}
+        viewerConfiguration={subject?.viewerConfiguration}
+      />
+    </div>)
+	}
+
+	return null
 }
 
 SubjectViewer.propTypes = {
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
index 7f0d271949..c3d753a74a 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
@@ -1,60 +1,44 @@
+import { render, screen } from '@testing-library/react'
 import asyncStates from '@zooniverse/async-states'
-import { shallow } from 'enzyme'
-
 import { SubjectViewer } from './SubjectViewer'
-import SingleImageViewer from './components/SingleImageViewer'
-import JSONDataViewer from './components/JSONDataViewer'
 
 describe('Component > SubjectViewer', function () {
   it('should render without crashing', function () {
-    const wrapper = shallow(<SubjectViewer />)
-    expect(wrapper).to.be.ok()
+    render(<SubjectViewer />)
+    expect(screen).to.be.ok()
   })
 
   it('should render nothing if the subject store is initialized', function () {
-    const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.initialized} />)
-    expect(wrapper.type()).to.be.null()
+    const { container } = render(<SubjectViewer subjectQueueState={asyncStates.initialized} />)
+    expect(container.firstChild).to.be.null()
   })
 
+
+	
   it('should render a loading indicator if the subject store is loading', function () {
-    const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.loading} />)
-    expect(wrapper.text()).to.equal('SubjectViewer.loading')
+    render(<SubjectViewer subjectQueueState={asyncStates.loading} />)
+    expect(screen.getByText('SubjectViewer.loading')).to.exist()
   })
 
   it('should render nothing if the subject store errors', function () {
-    const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.error} />)
-    expect(wrapper.type()).to.be.null()
+    const { container } = render(<SubjectViewer subjectQueueState={asyncStates.error} />)
+    expect(container.firstChild).to.be.null()
   })
 
-  it('should render a subject viewer if the subject store successfully loads', function () {
-    const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: 'singleImage' }} />)
-    expect(wrapper.find(SingleImageViewer)).to.have.lengthOf(1)
-  })
-
-  it('should pass along the viewer configuration', function () {
-    const viewerConfiguration = {
-      zoomConfiguration: {
-        direction: 'both',
-        minZoom: 1,
-        maxZoom: 10,
-        zoomInValue: 1.2,
-        zoomOutValue: 0.8
-      }
-    }
-
-    const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: 'variableStar', viewerConfiguration }} />)
-    expect(wrapper.find(JSONDataViewer).props().viewerConfiguration).to.deep.equal(viewerConfiguration)
+  xit('should render a subject viewer if the subject store successfully loads', function () {
+    render(<SubjectViewer subjectQueueState={asyncStates.success} subject={{ viewer: '__TEST__' }} />)
+    expect(screen.findByText('viewer.test')).to.exist()
   })
 
   describe('when there is an null viewer because of invalid subject media', function () {
     it('should render null', function () {
-      const wrapper = shallow(
+      const { container } = render(
         <SubjectViewer
           subjectQueueState={asyncStates.success}
           subject={{ viewer: null }}
         />
       )
-      expect(wrapper.html()).to.be.null()
+      expect(container.firstChild).to.be.null()
     })
   })
 })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/MockViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/MockViewer.js
new file mode 100644
index 0000000000..802b3a9bba
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/MockViewer.js
@@ -0,0 +1,9 @@
+function MockViewer() {
+  return (
+    <div>viewer.test</div>
+  )
+}
+
+MockViewer.propTypes = {}
+
+export default MockViewer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/getViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/getViewer.js
index 1426eb3a11..47f4d326c8 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/getViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getViewer/getViewer.js
@@ -1,7 +1,9 @@
 async function getViewer (viewer) {
   let view = null;
 
-  if (viewer === 'dataImage') {
+  if (viewer === '__TEST__') {
+    view = await import('./MockViewer');
+  } else if (viewer === 'dataImage') {
     view = await import('./../../components/DataImageViewer');
   } else if (viewer === 'flipbook') {
     view = await import('./../../components/FlipbookViewer');