diff --git a/app/src/organisms/Alerts/__tests__/Alerts.test.tsx b/app/src/organisms/Alerts/__tests__/Alerts.test.tsx
index 8c21097b1e9..1eed718cb73 100644
--- a/app/src/organisms/Alerts/__tests__/Alerts.test.tsx
+++ b/app/src/organisms/Alerts/__tests__/Alerts.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import * as AppAlerts from '../../../redux/alerts'
 import { Alerts } from '..'
 import { LostConnectionAlert } from '../LostConnectionAlert'
diff --git a/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx b/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx
index 22e75d08796..5b5780a2d8a 100644
--- a/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx
+++ b/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import uniqueId from 'lodash/uniqueId'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import { act } from 'react-dom/test-utils'
 
 import * as RobotApi from '../../../redux/robot-api'
diff --git a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
index 931326029a8..bd5f5243151 100644
--- a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
+++ b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import {
+  WrapperWithStore,
+  mountWithStore,
+  CheckboxField,
+} from '@opentrons/components'
 import { act } from 'react-dom/test-utils'
 
 import { AskForCalibrationBlockModal } from '../AskForCalibrationBlockModal'
-import { CheckboxField } from '@opentrons/components'
 import { setUseTrashSurfaceForTipCal } from '../../../redux/calibration'
 
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
-
 type RenderReturnType = WrapperWithStore<
   React.ComponentProps<typeof AskForCalibrationBlockModal>
 >
diff --git a/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
index 769967bcac7..ba20cb47faa 100644
--- a/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
+++ b/app/src/organisms/CalibrationPanels/__tests__/ChooseTipRack.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 
 import { mockAttachedPipette } from '../../../redux/pipettes/__fixtures__'
 import { mockDeckCalTipRack } from '../../../redux/sessions/__fixtures__'
@@ -17,7 +17,7 @@ import { getAttachedPipettes } from '../../../redux/pipettes'
 import { ChooseTipRack } from '../ChooseTipRack'
 import type { AttachedPipettesByMount } from '../../../redux/pipettes/types'
 import type { ReactWrapper } from 'enzyme'
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 
 jest.mock('../../../redux/pipettes/selectors')
 jest.mock('../../../redux/calibration/')
diff --git a/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx b/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx
index 95eccac2a2f..32fe0a3a2f6 100644
--- a/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx
+++ b/app/src/organisms/ChangePipette/__tests__/ConfirmPipette.test.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import {
   mountWithStore,
   WrapperWithStore,
-} from '@opentrons/components/__utils__'
-
+  TitleBar,
+  Icon,
+} from '@opentrons/components'
 import { ConfirmPipette } from '../ConfirmPipette'
 import { CheckPipettesButton } from '../CheckPipettesButton'
-import { TitleBar, Icon } from '@opentrons/components'
 
 import type { Action, State } from '../../../redux/types'
 import type { PipetteOffsetCalibration } from '../../../redux/calibration/types'
diff --git a/app/src/organisms/ProtocolModuleList/__tests__/ProtocolModuleList.test.tsx b/app/src/organisms/ProtocolModuleList/__tests__/ProtocolModuleList.test.tsx
index 60f583590bb..fc3b24346f6 100644
--- a/app/src/organisms/ProtocolModuleList/__tests__/ProtocolModuleList.test.tsx
+++ b/app/src/organisms/ProtocolModuleList/__tests__/ProtocolModuleList.test.tsx
@@ -1,9 +1,13 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { mountWithProviders } from '@opentrons/components/__utils__'
-
+import {
+  mountWithProviders,
+  Box,
+  Flex,
+  ListItem,
+  Tooltip,
+} from '@opentrons/components'
 import { i18n } from '../../../i18n'
-import { Box, Flex, ListItem, Tooltip } from '@opentrons/components'
 import { mockMagneticModule } from '../../../redux/modules/__fixtures__'
 import * as robotSelectors from '../../../redux/robot/selectors'
 import * as moduleSelectors from '../../../redux/modules/selectors'
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/ExtraAttentionWarning.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/ExtraAttentionWarning.test.tsx
index c1aaee84e82..1bb3ae93754 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/ExtraAttentionWarning.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/ExtraAttentionWarning.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import {
   partialComponentPropsMatcher,
   renderWithProviders,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { ExtraAttentionWarning } from '../ExtraAttentionWarning'
 import { SecureLabwareModal } from '../SecureLabwareModal'
@@ -17,7 +17,7 @@ const mockSecureLabwareModal = SecureLabwareModal as jest.MockedFunction<
 const render = (props: React.ComponentProps<typeof ExtraAttentionWarning>) => {
   return renderWithProviders(<ExtraAttentionWarning {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('ExtraAttentionWarning', () => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareInfoOverlay.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareInfoOverlay.test.tsx
index e77c775b035..dbf3b6ecd5d 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareInfoOverlay.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareInfoOverlay.test.tsx
@@ -5,7 +5,7 @@ import {
   LabwareDefinition2,
 } from '@opentrons/shared-data'
 import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { LabwareInfoOverlay } from '../LabwareInfoOverlay'
 
@@ -25,7 +25,7 @@ const render = (props: React.ComponentProps<typeof LabwareInfoOverlay>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const mockGetLabwareDisplayName = getLabwareDisplayName as jest.MockedFunction<
@@ -55,7 +55,7 @@ describe('LabwareInfoOverlay', () => {
     getByText('Offset Data')
   })
   // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('should renders labware offset data', () => {
+  it.skip('should render labware offset data', () => {
     // implement when data is available
   })
 })
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx
index afa5fbc45f2..49d0cbedf85 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetup.test.tsx
@@ -1,7 +1,14 @@
 import * as React from 'react'
 import { when, resetAllWhenMocks } from 'jest-when'
 import { StaticRouter } from 'react-router-dom'
-import { LabwareRender, RobotWorkSpace, Module } from '@opentrons/components'
+import {
+  renderWithProviders,
+  componentPropsMatcher,
+  partialComponentPropsMatcher,
+  LabwareRender,
+  RobotWorkSpace,
+  Module,
+} from '@opentrons/components'
 import {
   inferModuleOrientationFromXCoordinate,
   LabwareDefinition2,
@@ -11,11 +18,6 @@ import {
 import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
 import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import { fireEvent, screen } from '@testing-library/react'
-import {
-  renderWithProviders,
-  componentPropsMatcher,
-  partialComponentPropsMatcher,
-} from '@opentrons/components/__utils__'
 import { i18n } from '../../../../../i18n'
 import { LabwareSetup } from '..'
 import { LabwareSetupModal } from '../LabwareSetupModal'
@@ -94,7 +96,7 @@ const render = () => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const STUBBED_ORIENTATION_VALUE = 'left'
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetupModal.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetupModal.test.tsx
index f5953860425..50ba7e76de2 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetupModal.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/__tests__/LabwareSetupModal.test.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { LabwareSetupModal } from '../LabwareSetupModal'
 
 const render = (props: React.ComponentProps<typeof LabwareSetupModal>) => {
   return renderWithProviders(<LabwareSetupModal {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('LabwareSetupModal', () => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleInfo.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleInfo.test.tsx
index 300498e6e03..080e51a0015 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleInfo.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleInfo.test.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import '@testing-library/jest-dom'
 import { ModuleModel, ModuleType } from '@opentrons/shared-data'
 import { ModuleInfo } from '../ModuleInfo'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 
 const render = (props: React.ComponentProps<typeof ModuleInfo>) => {
   return renderWithProviders(<ModuleInfo {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 const mockTCModule = {
   labwareOffset: { x: 3, y: 3, z: 3 },
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleSetup.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleSetup.test.tsx
index de5971d6ff1..aeb8b3dfd33 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleSetup.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/ModuleSetup.test.tsx
@@ -2,13 +2,13 @@ import * as React from 'react'
 import '@testing-library/jest-dom'
 import { when, resetAllWhenMocks } from 'jest-when'
 import { StaticRouter } from 'react-router-dom'
-import { RobotWorkSpace } from '@opentrons/components'
-import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import {
   renderWithProviders,
   partialComponentPropsMatcher,
   componentPropsMatcher,
-} from '@opentrons/components/__utils__'
+  RobotWorkSpace,
+} from '@opentrons/components'
+import standardDeckDef from '@opentrons/shared-data/deck/definitions/2/ot2_standard.json'
 import { i18n } from '../../../../../i18n'
 import { ModuleSetup } from '..'
 import { ModuleInfo } from '../ModuleInfo'
@@ -74,7 +74,7 @@ const render = (props: React.ComponentProps<typeof ModuleSetup>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 
 const STUBBED_ORIENTATION_VALUE = 'left'
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/MultipleModuleModal.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/MultipleModuleModal.test.tsx
index e87d3a39a0d..833f48c840e 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/MultipleModuleModal.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/__tests__/MultipleModuleModal.test.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { MultipleModulesModal } from '../MultipleModulesModal'
 
 const render = (props: React.ComponentProps<typeof MultipleModulesModal>) => {
   return renderWithProviders(<MultipleModulesModal {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('MultipleModulesModal', () => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/CalibrationItem.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/CalibrationItem.test.tsx
index 3c372b1fe0c..4d7043354f2 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/CalibrationItem.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/CalibrationItem.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../../i18n'
 import { CalibrationItem } from '../CalibrationItem'
@@ -15,7 +15,7 @@ describe('CalibrationItem', () => {
     return renderWithProviders(
       <CalibrationItem {...{ subText, calibratedDate, title, button }} />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
 
   it('renders all nodes with prop contents', () => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/DeckCalibration.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/DeckCalibration.test.tsx
index bd84288a31f..190cec3d002 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/DeckCalibration.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/DeckCalibration.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { mockDeckCalData } from '../../../../../redux/calibration/__fixtures__'
 import * as calibrationSelectors from '../../../../../redux/calibration/selectors'
 
@@ -13,17 +13,15 @@ jest.mock('../../../../../redux/calibration/selectors')
 const mockGetDeckCalData = calibrationSelectors.getDeckCalibrationData as jest.MockedFunction<
   typeof calibrationSelectors.getDeckCalibrationData
 >
+const render = () => {
+  return renderWithProviders(<DeckCalibration robotName="robot name" />, {
+    i18nInstance: i18n,
+  })[0]
+}
 
 describe('DeckCalibration', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
-
   beforeEach(() => {
     mockGetDeckCalData.mockReturnValue(mockDeckCalData)
-    render = () => {
-      return renderWithProviders(<DeckCalibration robotName="robot name" />, {
-        i18nInstance: i18n,
-      })
-    }
   })
 
   afterEach(() => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/PipetteCalibration.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/PipetteCalibration.test.tsx
index 6353ef1dbcc..ef151a69753 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/PipetteCalibration.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/PipetteCalibration.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import { mockProtocolPipetteTipRackCalInfo } from '../../../../../redux/pipettes/__fixtures__'
 import { PipetteCalibration } from '../PipetteCalibration'
@@ -25,7 +25,7 @@ describe('PipetteCalibration', () => {
         }}
       />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
 
   afterEach(() => {
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/RobotCalibration.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/RobotCalibration.test.tsx
index 1f9f7033460..839c1db8e30 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/RobotCalibration.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/__tests__/RobotCalibration.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../i18n'
 import * as PipetteOffset from '../../../../../redux/calibration/pipette-offset'
 import * as TipLength from '../../../../../redux/calibration/tip-length'
@@ -67,7 +67,7 @@ describe('RobotCalibration', () => {
     jest.useRealTimers()
   })
   it('calls fetches data on mount and on a 10s interval', () => {
-    const { store } = render()
+    const store = render()[1]
 
     expect(store.dispatch).toHaveBeenNthCalledWith(
       1,
@@ -86,7 +86,7 @@ describe('RobotCalibration', () => {
   })
 
   it('renders all text titles and button', () => {
-    const { getByRole } = render()
+    const { getByRole } = render()[0]
     expect(getByRole('heading', { name: 'Required Pipettes' })).toBeTruthy()
     expect(
       getByRole('heading', { name: 'Required Tip Length Calibrations' })
@@ -101,18 +101,18 @@ describe('RobotCalibration', () => {
     ).toBeTruthy()
   })
   it('changes Proceed CTA copy based on next step', () => {
-    const { getByRole } = render({ nextStep: 'labware_setup_step' })
+    const { getByRole } = render({ nextStep: 'labware_setup_step' })[0]
     expect(
       getByRole('button', { name: 'Proceed to Labware Setup' })
     ).toBeTruthy()
   })
   it('calls the expandStep function on click', () => {
-    const { getByRole } = render()
+    const { getByRole } = render()[0]
     fireEvent.click(getByRole('button', { name: 'Proceed to Module Setup' }))
     expect(mockExpandStep).toHaveBeenCalled()
   })
   it('does not the expandStep function on click if button is disabled', () => {
-    const { getByRole } = render({ calibrationStatus: { complete: false } })
+    const { getByRole } = render({ calibrationStatus: { complete: false } })[0]
     fireEvent.click(getByRole('button', { name: 'Proceed to Module Setup' }))
     expect(mockExpandStep).not.toHaveBeenCalled()
   })
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/__tests__/ProceedToRunCta.test.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/__tests__/ProceedToRunCta.test.tsx
index 05cd181c83b..026d5b30c94 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/__tests__/ProceedToRunCta.test.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/__tests__/ProceedToRunCta.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { StaticRouter } from 'react-router-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import * as hooks from '../hooks'
 import { ProceedToRunCta } from '../ProceedToRunCta'
@@ -53,7 +53,7 @@ const render = (props: React.ComponentProps<typeof ProceedToRunCta>) => {
     {
       i18nInstance: i18n,
     }
-  )
+  )[0]
 }
 describe('ProceedToRunCta', () => {
   let props: React.ComponentProps<typeof ProceedToRunCta>
diff --git a/app/src/organisms/ProtocolSetup/__tests__/CollapsibleStep.test.tsx b/app/src/organisms/ProtocolSetup/__tests__/CollapsibleStep.test.tsx
index 3d4647ab7d2..86abe92a504 100644
--- a/app/src/organisms/ProtocolSetup/__tests__/CollapsibleStep.test.tsx
+++ b/app/src/organisms/ProtocolSetup/__tests__/CollapsibleStep.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 import { CollapsibleStep } from '../RunSetupCard/CollapsibleStep'
@@ -29,7 +29,7 @@ describe('CollapsibleStep', () => {
         }}
       />,
       { i18nInstance: i18n }
-    )
+    )[0]
   }
   let toggleExpandedMock: jest.MockedFunction<() => void>
 
diff --git a/app/src/organisms/ProtocolSetup/__tests__/MetadataCard.test.tsx b/app/src/organisms/ProtocolSetup/__tests__/MetadataCard.test.tsx
index 23770ac8831..a691ad69fed 100644
--- a/app/src/organisms/ProtocolSetup/__tests__/MetadataCard.test.tsx
+++ b/app/src/organisms/ProtocolSetup/__tests__/MetadataCard.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 import { MetadataCard } from '../MetadataCard'
@@ -14,7 +14,7 @@ const useProtocolMetadata = hooks.useProtocolMetadata as jest.MockedFunction<
 
 describe('MetadataCard', () => {
   const render = () => {
-    return renderWithProviders(<MetadataCard />, { i18nInstance: i18n })
+    return renderWithProviders(<MetadataCard />, { i18nInstance: i18n })[0]
   }
 
   beforeEach(() => {
diff --git a/app/src/organisms/ProtocolSetup/__tests__/RunSetupCard.test.tsx b/app/src/organisms/ProtocolSetup/__tests__/RunSetupCard.test.tsx
index 3a5959119cc..d4f7d3ea34c 100644
--- a/app/src/organisms/ProtocolSetup/__tests__/RunSetupCard.test.tsx
+++ b/app/src/organisms/ProtocolSetup/__tests__/RunSetupCard.test.tsx
@@ -6,7 +6,7 @@ import {
   componentPropsMatcher,
   partialComponentPropsMatcher,
   renderWithProviders,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 import noModulesProtocol from '@opentrons/shared-data/protocol/fixtures/4/simpleV4.json'
 import withModulesProtocol from '@opentrons/shared-data/protocol/fixtures/4/testModulesProtocol.json'
 
@@ -89,9 +89,11 @@ const mockGetProtocolCalibrationComplete = calibrationSelectors.getProtocolCalib
   typeof calibrationSelectors.getProtocolCalibrationComplete
 >
 
-describe('RunSetupCard', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
+const render = () => {
+  return renderWithProviders(<RunSetupCard />, { i18nInstance: i18n })[0]
+}
 
+describe('RunSetupCard', () => {
   beforeEach(() => {
     mockGetConnectedRobot.mockReturnValue(mockConnectedRobot)
     mockGetAttachedPipettes.mockReturnValue(mockAttachedPipettes)
@@ -125,9 +127,7 @@ describe('RunSetupCard', () => {
         })
       )
       .mockReturnValue(<div>Mock Robot Calibration</div>)
-    render = () => {
-      return renderWithProviders(<RunSetupCard />, { i18nInstance: i18n })
-    }
+
     when(mockProceedToRun)
       .mockReturnValue(<div></div>)
       .calledWith(
diff --git a/app/src/organisms/ProtocolUpload/__tests__/ConfirmExitProtocolUploadModal.test.tsx b/app/src/organisms/ProtocolUpload/__tests__/ConfirmExitProtocolUploadModal.test.tsx
index acbd384c56f..d615599928e 100644
--- a/app/src/organisms/ProtocolUpload/__tests__/ConfirmExitProtocolUploadModal.test.tsx
+++ b/app/src/organisms/ProtocolUpload/__tests__/ConfirmExitProtocolUploadModal.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 import { fireEvent } from '@testing-library/react'
 import { i18n } from '../../../i18n'
 import { ConfirmExitProtocolUploadModal } from '../ConfirmExitProtocolUploadModal'
@@ -9,7 +9,7 @@ const render = (
 ) => {
   return renderWithProviders(<ConfirmExitProtocolUploadModal {...props} />, {
     i18nInstance: i18n,
-  })
+  })[0]
 }
 
 describe('ConfirmExitProtocolUploadModal', () => {
diff --git a/app/src/organisms/ProtocolUpload/__tests__/ProtocolUpload.test.tsx b/app/src/organisms/ProtocolUpload/__tests__/ProtocolUpload.test.tsx
index 392ce78eda3..2ab2820f369 100644
--- a/app/src/organisms/ProtocolUpload/__tests__/ProtocolUpload.test.tsx
+++ b/app/src/organisms/ProtocolUpload/__tests__/ProtocolUpload.test.tsx
@@ -6,7 +6,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import {
   renderWithProviders,
   componentPropsMatcher,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 import withModulesProtocol from '@opentrons/shared-data/protocol/fixtures/4/testModulesProtocol.json'
 
 import { i18n } from '../../../i18n'
@@ -44,10 +44,11 @@ const getCalibrationStatus = calibrationSelectors.getCalibrationStatus as jest.M
 const mockConfirmExitProtocolUploadModal = ConfirmExitProtocolUploadModal as jest.MockedFunction<
   typeof ConfirmExitProtocolUploadModal
 >
+const render = () => {
+  return renderWithProviders(<ProtocolUpload />, { i18nInstance: i18n })
+}
 
 describe('ProtocolUpload', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
-
   beforeEach(() => {
     getConnectedRobot.mockReturnValue(mockConnectedRobot)
     getProtocolFile.mockReturnValue(null)
@@ -64,10 +65,6 @@ describe('ProtocolUpload', () => {
       .mockImplementation(({ exit }) => (
         <div onClick={exit}>mock confirm exit protocol upload modal</div>
       ))
-
-    render = () => {
-      return renderWithProviders(<ProtocolUpload />, { i18nInstance: i18n })
-    }
   })
 
   afterEach(() => {
@@ -75,7 +72,7 @@ describe('ProtocolUpload', () => {
   })
 
   it('renders Protocol Upload Input for empty state', () => {
-    const { getByRole, queryByText } = render()
+    const { getByRole, queryByText } = render()[0]
 
     expect(getByRole('button', { name: 'Choose File...' })).toBeTruthy()
     expect(queryByText('Organization/Author')).toBeNull()
@@ -83,7 +80,7 @@ describe('ProtocolUpload', () => {
   it('renders Protocol Setup if file loaded', () => {
     getProtocolFile.mockReturnValue({ metadata: {} } as any)
     getProtocolName.mockReturnValue('some file name')
-    const { queryByRole, getByText } = render()
+    const { queryByRole, getByText } = render()[0]
 
     expect(queryByRole('button', { name: 'Choose File...' })).toBeNull()
     expect(getByText('Organization/Author')).toBeTruthy()
@@ -92,7 +89,7 @@ describe('ProtocolUpload', () => {
   it('opens up the confirm close protocol modal when clicked', () => {
     getProtocolFile.mockReturnValue(withModulesProtocol as any)
     getProtocolName.mockReturnValue('some file name')
-    const { getByRole, getByText } = render()
+    const { getByRole, getByText } = render()[0]
     fireEvent.click(getByRole('button', { name: 'close' }))
     getByText('mock confirm exit protocol upload modal')
   })
@@ -100,7 +97,7 @@ describe('ProtocolUpload', () => {
   it('closes the confirm close protocol modal when Yes, close now is clicked', () => {
     getProtocolFile.mockReturnValue(withModulesProtocol as any)
     getProtocolName.mockReturnValue('some file name')
-    const { store, getByRole, getByText } = render()
+    const [{ getByRole, getByText }, store] = render()
     fireEvent.click(getByRole('button', { name: 'close' }))
     const mockCloseModal = getByText('mock confirm exit protocol upload modal')
     fireEvent.click(mockCloseModal)
@@ -111,7 +108,7 @@ describe('ProtocolUpload', () => {
   })
 
   it('calls ingest protocol if handleUpload', () => {
-    const { getByTestId } = render()
+    const { getByTestId } = render()[0]
 
     const protocolFile = new File(
       [JSON.stringify(withModulesProtocol)],
diff --git a/app/src/organisms/ProtocolUpload/__tests__/UploadInput.test.tsx b/app/src/organisms/ProtocolUpload/__tests__/UploadInput.test.tsx
index 5b09c5623f7..018af272416 100644
--- a/app/src/organisms/ProtocolUpload/__tests__/UploadInput.test.tsx
+++ b/app/src/organisms/ProtocolUpload/__tests__/UploadInput.test.tsx
@@ -1,23 +1,23 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
 import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components/__utils__'
+import { renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 import { UploadInput } from '../UploadInput'
 
+const render = (props: React.ComponentProps<typeof UploadInput>) => {
+  return renderWithProviders(<UploadInput onUpload={props.onUpload} />, {
+    i18nInstance: i18n,
+  })[0]
+}
+
 describe('UploadInput', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
-  let handleUpload: jest.MockedFunction<
-    React.ComponentProps<typeof UploadInput>['onUpload']
-  >
+  let props = {} as React.ComponentProps<typeof UploadInput>
 
   beforeEach(() => {
-    handleUpload = jest.fn()
-    render = () => {
-      return renderWithProviders(<UploadInput onUpload={handleUpload} />, {
-        i18nInstance: i18n,
-      })
+    props = {
+      onUpload: jest.fn(),
     }
   })
 
@@ -26,7 +26,7 @@ describe('UploadInput', () => {
   })
 
   it('renders correct contents for empty state', () => {
-    const { getByRole } = render()
+    const { getByRole } = render(props)
 
     expect(getByRole('heading')).toHaveTextContent(
       /Open a protocol to get started/i
@@ -45,7 +45,7 @@ describe('UploadInput', () => {
   })
 
   it('opens file select on button click', () => {
-    const { getByRole, getByTestId } = render()
+    const { getByRole, getByTestId } = render(props)
     const button = getByRole('button', { name: 'Choose File...' })
     const input = getByTestId('file_input')
     input.click = jest.fn()
@@ -53,9 +53,9 @@ describe('UploadInput', () => {
     expect(input.click).toHaveBeenCalled()
   })
   it('calls create session on choose file', () => {
-    const { getByTestId } = render()
+    const { getByTestId } = render(props)
     const input = getByTestId('file_input')
     fireEvent.change(input, { target: { files: ['dummyFile'] } })
-    expect(handleUpload).toHaveBeenCalledWith('dummyFile')
+    expect(props.onUpload).toHaveBeenCalledWith('dummyFile')
   })
 })
diff --git a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index 705701ffed6..f7675c7b4ca 100644
--- a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { Link as InternalLink } from 'react-router-dom'
-import { mountWithStore } from '@opentrons/components/__utils__'
-
-import { BaseModal, Flex, Icon } from '@opentrons/components'
+import { mountWithStore, BaseModal, Flex, Icon } from '@opentrons/components'
 import * as Shell from '../../../redux/shell'
 import { ErrorModal } from '../../../molecules/modals'
 import { ReleaseNotes } from '../../../molecules/ReleaseNotes'
diff --git a/app/src/pages/Calibrate/CalibratePanel/__tests__/CalibrationData.test.tsx b/app/src/pages/Calibrate/CalibratePanel/__tests__/CalibrationData.test.tsx
index 56e5c0b4c0d..e07a9a3376c 100644
--- a/app/src/pages/Calibrate/CalibratePanel/__tests__/CalibrationData.test.tsx
+++ b/app/src/pages/Calibrate/CalibratePanel/__tests__/CalibrationData.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import { CalibrationData } from '../CalibrationData'
 
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 
 describe('CalibrationData', () => {
   let render: (
diff --git a/app/src/pages/Calibrate/CalibratePanel/__tests__/LabwareGroup.test.tsx b/app/src/pages/Calibrate/CalibratePanel/__tests__/LabwareGroup.test.tsx
index 7addfb91c34..177d15e84aa 100644
--- a/app/src/pages/Calibrate/CalibratePanel/__tests__/LabwareGroup.test.tsx
+++ b/app/src/pages/Calibrate/CalibratePanel/__tests__/LabwareGroup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import wellPlate96Def from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
diff --git a/app/src/pages/Calibrate/CalibratePanel/__tests__/PipetteList.test.tsx b/app/src/pages/Calibrate/CalibratePanel/__tests__/PipetteList.test.tsx
index 53aec58ddd3..56995e78026 100644
--- a/app/src/pages/Calibrate/CalibratePanel/__tests__/PipetteList.test.tsx
+++ b/app/src/pages/Calibrate/CalibratePanel/__tests__/PipetteList.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import * as PipettesSelectors from '../../../../redux/pipettes/selectors'
diff --git a/app/src/pages/Calibrate/CalibratePanel/__tests__/TipLengthCalibrationData.test.tsx b/app/src/pages/Calibrate/CalibratePanel/__tests__/TipLengthCalibrationData.test.tsx
index a849cb7892a..990538aec3d 100644
--- a/app/src/pages/Calibrate/CalibratePanel/__tests__/TipLengthCalibrationData.test.tsx
+++ b/app/src/pages/Calibrate/CalibratePanel/__tests__/TipLengthCalibrationData.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import { TipLengthCalibrationData } from '../TipLengthCalibrationData'
 
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 
 describe('TipLengthCalibrationData', () => {
   let render: (
diff --git a/app/src/pages/Calibrate/__tests__/CalibrateTipLengthControl.test.tsx b/app/src/pages/Calibrate/__tests__/CalibrateTipLengthControl.test.tsx
index 6941aa2cce1..8203adbe34b 100644
--- a/app/src/pages/Calibrate/__tests__/CalibrateTipLengthControl.test.tsx
+++ b/app/src/pages/Calibrate/__tests__/CalibrateTipLengthControl.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 
 import wellPlate96Def from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
 import tiprack300Def from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
@@ -16,7 +16,7 @@ import * as Analytics from '../../../redux/analytics/actions'
 import type { Labware } from '../../../redux/robot/types'
 import type { State } from '../../../redux/types'
 import type { DispatchApiRequestType } from '../../../redux/robot-api'
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 
 jest.mock('../../../redux/robot-api')
 jest.mock('../../../redux/robot/selectors')
diff --git a/app/src/pages/More/AddLabwareCard/__tests__/AddLabwareCard.test.tsx b/app/src/pages/More/AddLabwareCard/__tests__/AddLabwareCard.test.tsx
index c2c9d3a4d73..fbd3c37f2d6 100644
--- a/app/src/pages/More/AddLabwareCard/__tests__/AddLabwareCard.test.tsx
+++ b/app/src/pages/More/AddLabwareCard/__tests__/AddLabwareCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 
 import * as CustomLabware from '../../../../redux/custom-labware'
 import * as CustomLabwareFixtures from '../../../../redux/custom-labware/__fixtures__'
@@ -8,7 +8,7 @@ import { ManagePath } from '../ManagePath'
 import { AddLabware } from '../AddLabware'
 import { AddLabwareFailureModal } from '../AddLabwareFailureModal'
 
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 import type { State, Action } from '../../../../redux/types'
 
 jest.mock('../../../../redux/custom-labware/selectors')
diff --git a/app/src/pages/More/AppSettings/__tests__/AppAdvancedSettingsCard.test.tsx b/app/src/pages/More/AppSettings/__tests__/AppAdvancedSettingsCard.test.tsx
index 01d82a10212..4dca8187e0b 100644
--- a/app/src/pages/More/AppSettings/__tests__/AppAdvancedSettingsCard.test.tsx
+++ b/app/src/pages/More/AppSettings/__tests__/AppAdvancedSettingsCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import * as Config from '../../../../redux/config'
 import { AppAdvancedSettingsCard } from '../AppAdvancedSettingsCard'
 
diff --git a/app/src/pages/More/AppSettings/__tests__/AppSoftwareSettingsCard.test.tsx b/app/src/pages/More/AppSettings/__tests__/AppSoftwareSettingsCard.test.tsx
index 74758881bfc..6d78e923ab7 100644
--- a/app/src/pages/More/AppSettings/__tests__/AppSoftwareSettingsCard.test.tsx
+++ b/app/src/pages/More/AppSettings/__tests__/AppSoftwareSettingsCard.test.tsx
@@ -1,8 +1,12 @@
 // tests for the AppSoftwareSettingsCard
 import * as React from 'react'
-
-import { mountWithStore } from '@opentrons/components/__utils__'
-import { Card, LabeledValue, Link, SecondaryBtn } from '@opentrons/components'
+import {
+  mountWithStore,
+  Card,
+  LabeledValue,
+  Link,
+  SecondaryBtn,
+} from '@opentrons/components'
 import * as Shell from '../../../../redux/shell'
 import { Portal } from '../../../../App/portal'
 import { TitledControl } from '../../../../atoms/TitledControl'
diff --git a/app/src/pages/More/AppSettings/__tests__/UpdateNotificationsControl.test.tsx b/app/src/pages/More/AppSettings/__tests__/UpdateNotificationsControl.test.tsx
index 88e731dba7a..eedbaced0a4 100644
--- a/app/src/pages/More/AppSettings/__tests__/UpdateNotificationsControl.test.tsx
+++ b/app/src/pages/More/AppSettings/__tests__/UpdateNotificationsControl.test.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
-
-import { BORDER_SOLID_LIGHT } from '@opentrons/components'
+import { mountWithStore, BORDER_SOLID_LIGHT } from '@opentrons/components'
 import * as Alerts from '../../../../redux/alerts'
 import * as Analytics from '../../../../redux/analytics'
 import { TitledControl } from '../../../../atoms/TitledControl'
diff --git a/app/src/pages/Robots/InstrumentSettings/__tests__/PipetteInfo.test.tsx b/app/src/pages/Robots/InstrumentSettings/__tests__/PipetteInfo.test.tsx
index ba31d39ab5a..eeae982bc1f 100644
--- a/app/src/pages/Robots/InstrumentSettings/__tests__/PipetteInfo.test.tsx
+++ b/app/src/pages/Robots/InstrumentSettings/__tests__/PipetteInfo.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 
 import * as Config from '../../../../redux/config'
 import {
diff --git a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx
index 387f33424d1..d8dc26d3e90 100644
--- a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react'
 
-import {
-  mountWithStore,
-  WrapperWithStore,
-} from '@opentrons/components/__utils__'
+import { mountWithStore, WrapperWithStore } from '@opentrons/components'
 import { mockConnectableRobot as mockRobot } from '../../../../../redux/discovery/__fixtures__'
 import * as Buildroot from '../../../../../redux/buildroot'
 import { UpdateBuildroot } from '..'
diff --git a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/VersionInfoModal.test.tsx b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/VersionInfoModal.test.tsx
index 242242f6ee9..19f4b5e3970 100644
--- a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/VersionInfoModal.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/VersionInfoModal.test.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react'
 
-import { mountWithStore } from '@opentrons/components/__utils__'
-import { AlertModal, OutlineButton } from '@opentrons/components'
+import {
+  mountWithStore,
+  AlertModal,
+  OutlineButton,
+} from '@opentrons/components'
 import { mockReachableRobot } from '../../../../../redux/discovery/__fixtures__'
 import { UPGRADE, DOWNGRADE, REINSTALL } from '../../../../../redux/buildroot'
 import * as Shell from '../../../../../redux/shell'
diff --git a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/ViewUpdateModal.test.tsx b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/ViewUpdateModal.test.tsx
index 2d2143af4bb..fdbe651ec05 100644
--- a/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/ViewUpdateModal.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/UpdateBuildroot/__tests__/ViewUpdateModal.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import * as Buildroot from '../../../../../redux/buildroot'
 
 import { DownloadUpdateModal } from '../DownloadUpdateModal'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/AdvancedSettingsCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/AdvancedSettingsCard.test.tsx
index c499811000a..686d424fd46 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/AdvancedSettingsCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/AdvancedSettingsCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/CalibrationCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/CalibrationCard.test.tsx
index 48c1876cc27..4817e4bba24 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/CalibrationCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/CalibrationCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 import { saveAs } from 'file-saver'
 
 import { i18n } from '../../../../i18n'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/CheckCalibrationControl.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/CheckCalibrationControl.test.tsx
index 40a06db7f1f..fdb8f68dd03 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/CheckCalibrationControl.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/CheckCalibrationControl.test.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react'
 import {
+  Tooltip,
+  PrimaryBtn,
+  SecondaryBtn,
   mountWithProviders,
   WrapperWithStore,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import * as Sessions from '../../../../redux/sessions'
-
-import { Tooltip, PrimaryBtn, SecondaryBtn } from '@opentrons/components'
 import { TitledControl } from '../../../../atoms/TitledControl'
 import { CheckCalibrationControl } from '../CheckCalibrationControl'
 
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/ConnectionCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/ConnectionCard.test.tsx
index ffd2163d9ca..f6862f0a792 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/ConnectionCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/ConnectionCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 
 import * as Networking from '../../../../redux/networking'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/ControlsCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/ControlsCard.test.tsx
index 76f989c87d4..72a9b72cbaf 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/ControlsCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/ControlsCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import * as RobotControls from '../../../../redux/robot-controls'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/DeckCalibrationControl.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/DeckCalibrationControl.test.tsx
index 88c469996cd..cecca617cb5 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/DeckCalibrationControl.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/DeckCalibrationControl.test.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react'
-import {
-  mountWithProviders,
-  WrapperWithStore,
-} from '@opentrons/components/__utils__'
+import { mountWithProviders, WrapperWithStore } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/InformationCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/InformationCard.test.tsx
index f6bde96bc42..54ecfcb615e 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/InformationCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/InformationCard.test.tsx
@@ -2,8 +2,11 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 
-import { mountWithProviders } from '@opentrons/components/__utils__'
-import { SecondaryBtn, Tooltip } from '@opentrons/components'
+import {
+  SecondaryBtn,
+  Tooltip,
+  mountWithProviders,
+} from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 
 import * as Buildroot from '../../../../redux/buildroot'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/OpenJupyterControl.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/OpenJupyterControl.test.tsx
index f66955effe8..ee89446d2be 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/OpenJupyterControl.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/OpenJupyterControl.test.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
-import { SecondaryBtn } from '@opentrons/components'
-
+import { SecondaryBtn, mountWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import * as Analytics from '../../../../redux/analytics'
 import { OpenJupyterControl } from '../OpenJupyterControl'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/PipetteOffsetItem.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/PipetteOffsetItem.test.tsx
index d7bebc04ee7..818538b4efc 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/PipetteOffsetItem.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/PipetteOffsetItem.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 import { getLabwareDisplayName } from '@opentrons/shared-data'
 import { i18n } from '../../../../i18n'
 import { PipetteOffsetItem } from '../PipetteOffsetItem'
@@ -7,7 +7,7 @@ import { findLabwareDefWithCustom } from '../../../../assets/labware/findLabware
 
 import type { ReactWrapper } from 'enzyme'
 import type { State, Action } from '../../../../redux/types'
-import type { WrapperWithStore } from '@opentrons/components/__utils__'
+import type { WrapperWithStore } from '@opentrons/components'
 import type {
   AttachedPipette,
   PipetteCalibrations,
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/RobotSettings.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/RobotSettings.test.tsx
index c424577f280..90a80654e94 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/RobotSettings.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/RobotSettings.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { StaticRouter, Route, Redirect } from 'react-router-dom'
 
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { SpinnerModalPage, mountWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 import {
   mockConnectableRobot,
@@ -17,7 +17,6 @@ import {
   selectors as RobotSelectors,
 } from '../../../../redux/robot'
 
-import { SpinnerModalPage } from '@opentrons/components'
 import { Page } from '../../../../atoms/Page'
 import { ErrorModal } from '../../../../molecules/modals'
 import { ReachableRobotBanner } from '../ReachableRobotBanner'
diff --git a/app/src/pages/Robots/RobotSettings/__tests__/StatusCard.test.tsx b/app/src/pages/Robots/RobotSettings/__tests__/StatusCard.test.tsx
index 741633c1217..7e0bb4fd4e7 100644
--- a/app/src/pages/Robots/RobotSettings/__tests__/StatusCard.test.tsx
+++ b/app/src/pages/Robots/RobotSettings/__tests__/StatusCard.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { SecondaryBtn, Icon, mountWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
 
 import * as Fixtures from '../../../../redux/discovery/__fixtures__'
@@ -7,7 +7,6 @@ import {
   actions as RobotActions,
   selectors as RobotSelectors,
 } from '../../../../redux/robot'
-import { SecondaryBtn, Icon } from '@opentrons/components'
 import { StatusCard } from '../StatusCard'
 
 import type { ViewableRobot } from '../../../../redux/discovery/types'
diff --git a/app/src/pages/Run/RunPanel/__tests__/RunPanel.test.tsx b/app/src/pages/Run/RunPanel/__tests__/RunPanel.test.tsx
index 72cfc2dd90b..203cd5b42dc 100644
--- a/app/src/pages/Run/RunPanel/__tests__/RunPanel.test.tsx
+++ b/app/src/pages/Run/RunPanel/__tests__/RunPanel.test.tsx
@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import {
   partialComponentPropsMatcher,
   renderWithProviders,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 
@@ -29,9 +29,25 @@ const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction<
   typeof useFeatureFlag
 >
 
-describe('RunSetupCard', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
+const render = () => {
+  return renderWithProviders(
+    <RunPanelComponent
+      disabled={true}
+      modulesReady={true}
+      isReadyToRun={true}
+      isPaused={true}
+      isRunning={true}
+      isBlocked={true}
+      onRunClick={() => {}}
+      onPauseClick={() => {}}
+      onResumeClick={() => {}}
+      onResetClick={() => {}}
+    />,
+    { i18nInstance: i18n }
+  )[0]
+}
 
+describe('RunSetupCard', () => {
   beforeEach(() => {
     when(mockRunTimer)
       .calledWith(partialComponentPropsMatcher({}))
@@ -45,24 +61,6 @@ describe('RunSetupCard', () => {
     when(mockRunTimeControl)
       .calledWith(partialComponentPropsMatcher({}))
       .mockImplementation(() => <div>Mock Run Time Control</div>)
-
-    render = () => {
-      return renderWithProviders(
-        <RunPanelComponent
-          disabled={true}
-          modulesReady={true}
-          isReadyToRun={true}
-          isPaused={true}
-          isRunning={true}
-          isBlocked={true}
-          onRunClick={() => {}}
-          onPauseClick={() => {}}
-          onResumeClick={() => {}}
-          onResetClick={() => {}}
-        />,
-        { i18nInstance: i18n }
-      )
-    }
   })
 
   afterEach(() => {
diff --git a/app/src/pages/Run/RunPanel/__tests__/RunTimer.test.tsx b/app/src/pages/Run/RunPanel/__tests__/RunTimer.test.tsx
index aba2fca99f8..8120d9d7723 100644
--- a/app/src/pages/Run/RunPanel/__tests__/RunTimer.test.tsx
+++ b/app/src/pages/Run/RunPanel/__tests__/RunTimer.test.tsx
@@ -3,7 +3,7 @@ import { when } from 'jest-when'
 
 import { RunTimer } from '../RunTimer'
 import { formatSeconds, formatTime } from '../utils'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import * as selectors from '../../../../redux/robot/selectors'
 import { State } from '../../../../redux/types'
 
diff --git a/app/src/pages/Run/__tests__/Run.test.tsx b/app/src/pages/Run/__tests__/Run.test.tsx
index 311fa785bd7..d0cbf58066c 100644
--- a/app/src/pages/Run/__tests__/Run.test.tsx
+++ b/app/src/pages/Run/__tests__/Run.test.tsx
@@ -5,7 +5,7 @@ import { StaticRouter } from 'react-router-dom'
 import {
   componentPropsMatcher,
   renderWithProviders,
-} from '@opentrons/components/__utils__'
+} from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 
@@ -27,22 +27,20 @@ const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction<
   typeof useFeatureFlag
 >
 
-describe('Run Page', () => {
-  let render: () => ReturnType<typeof renderWithProviders>
+const render = () => {
+  return renderWithProviders(
+    <StaticRouter>
+      <Run />
+    </StaticRouter>,
+    { i18nInstance: i18n }
+  )[0]
+}
 
+describe('Run Page', () => {
   beforeEach(() => {
     when(mockRunDetails)
       .calledWith(componentPropsMatcher({}))
       .mockReturnValue(<div>Mock Run Details</div>)
-
-    render = () => {
-      return renderWithProviders(
-        <StaticRouter>
-          <Run />
-        </StaticRouter>,
-        { i18nInstance: i18n }
-      )
-    }
   })
 
   afterEach(() => {
diff --git a/app/src/pages/Upload/FileInfo/__tests__/ProtocolLabwareList.test.tsx b/app/src/pages/Upload/FileInfo/__tests__/ProtocolLabwareList.test.tsx
index e8527921304..1370c17d6e0 100644
--- a/app/src/pages/Upload/FileInfo/__tests__/ProtocolLabwareList.test.tsx
+++ b/app/src/pages/Upload/FileInfo/__tests__/ProtocolLabwareList.test.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
-import { mountWithProviders } from '@opentrons/components/__utils__'
-
+import { Tooltip, Text, mountWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../i18n'
-import { Tooltip, Text } from '@opentrons/components'
 import { ProtocolLabwareList } from '../ProtocolLabwareList'
 
 const LABWARE = [
diff --git a/app/src/pages/Upload/UploadPanel/__tests__/index.test.tsx b/app/src/pages/Upload/UploadPanel/__tests__/index.test.tsx
index d0e2de1d13c..0884ef8caff 100644
--- a/app/src/pages/Upload/UploadPanel/__tests__/index.test.tsx
+++ b/app/src/pages/Upload/UploadPanel/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StaticRouter, Route } from 'react-router-dom'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 
diff --git a/app/src/pages/Upload/__tests__/index.test.tsx b/app/src/pages/Upload/__tests__/index.test.tsx
index 605e2dda450..281892ed9fd 100644
--- a/app/src/pages/Upload/__tests__/index.test.tsx
+++ b/app/src/pages/Upload/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StaticRouter, Route } from 'react-router-dom'
-import { mountWithProviders } from '@opentrons/components/__utils__'
+import { mountWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
 
diff --git a/app/src/redux/robot-api/__tests__/hooks.test.tsx b/app/src/redux/robot-api/__tests__/hooks.test.tsx
index 32db9a14998..bc6a9ee9023 100644
--- a/app/src/redux/robot-api/__tests__/hooks.test.tsx
+++ b/app/src/redux/robot-api/__tests__/hooks.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import uniqueId from 'lodash/uniqueId'
-import { mountWithStore } from '@opentrons/components/__utils__'
+import { mountWithStore } from '@opentrons/components'
 import { PENDING, SUCCESS } from '../constants'
 import { useDispatchApiRequest, useDispatchApiRequests } from '../hooks'
 
diff --git a/components/package.json b/components/package.json
index 3cd23d84ede..23548565f94 100644
--- a/components/package.json
+++ b/components/package.json
@@ -30,10 +30,14 @@
     "@types/styled-components": "^5.1.7",
     "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
+    "jest-when": "^3.0.1",
     "lodash": "4.17.15",
     "react-popper": "1.0.0",
     "react-remove-scroll": "1.0.8",
     "react-select": "3.0.8",
     "styled-components": "5.1.1"
+  },
+  "browser": {
+    "jest-when": false
   }
 }
diff --git a/components/src/hardware-sim/Pipette/EightEmanatingNozzles.tsx b/components/src/hardware-sim/Pipette/EightEmanatingNozzles.tsx
new file mode 100644
index 00000000000..fa1521eef2c
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/EightEmanatingNozzles.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { EmanatingNozzle } from './EmanatingNozzle'
+
+export const EightEmanatingNozzles = (props: {
+  cx: number
+  initialCy: number
+}): JSX.Element => {
+  const { cx, initialCy } = props
+  const MULTI_CHANNEL_NOZZLE_SPACING = 9
+  return (
+    <React.Fragment>
+      {[...Array(8)].map((_, i: number) => {
+        return (
+          <EmanatingNozzle
+            cx={cx}
+            cy={initialCy + i * MULTI_CHANNEL_NOZZLE_SPACING}
+            key={`Circle_${i}`}
+          />
+        )
+      })}
+    </React.Fragment>
+  )
+}
diff --git a/components/src/hardware-sim/Pipette/EmanatingNozzle.tsx b/components/src/hardware-sim/Pipette/EmanatingNozzle.tsx
new file mode 100644
index 00000000000..57a84d9744a
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/EmanatingNozzle.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { C_SELECTED_DARK, C_TRANSPARENT } from '../../styles'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from './constants'
+
+export const EmanatingNozzle = (props: {
+  cx: number
+  cy: number
+}): JSX.Element => {
+  const { cx, cy } = props
+  return (
+    <React.Fragment>
+      <circle
+        data-testid="origin_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={C_SELECTED_DARK}
+        fill={C_SELECTED_DARK}
+      ></circle>
+      <circle
+        data-testid="emanating_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={C_SELECTED_DARK}
+        strokeWidth={'2px'}
+        fill={C_TRANSPARENT}
+      >
+        <animate
+          data-testid="animation_radius"
+          attributeName="r"
+          from={5}
+          to={SINGLE_CHANNEL_PIPETTE_HEIGHT / 2}
+          begin={0}
+          dur={1.1}
+          calcMode="ease-out"
+          repeatCount="indefinite"
+        />
+        <animate
+          data-testid="animation_radius"
+          attributeName="opacity"
+          from={0.7}
+          to={0}
+          begin={0}
+          dur={1.1}
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </React.Fragment>
+  )
+}
diff --git a/components/src/hardware-sim/Pipette/PipetteRender.stories.tsx b/components/src/hardware-sim/Pipette/PipetteRender.stories.tsx
new file mode 100644
index 00000000000..fef14d1a7e9
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/PipetteRender.stories.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react'
+import pipetteNameSpecFixtures from '@opentrons/shared-data/pipette/fixtures/name/pipetteNameSpecFixtures.json'
+import _uncasted_opentrons300UlTiprack from '@opentrons/shared-data/labware/definitions/2/opentrons_96_tiprack_300ul/1.json'
+import _uncasted_opentrons10UlTiprack from '@opentrons/shared-data/labware/definitions/2/opentrons_96_tiprack_10ul/1.json'
+import _uncasted_nest12Reservoir15ml from '@opentrons/shared-data/labware/definitions/2/nest_12_reservoir_15ml/1.json'
+import _uncasted_axygenReservoir90ml from '@opentrons/shared-data/labware/definitions/2/axygen_1_reservoir_90ml/1.json'
+import _uncasted_opentrons6TuberackNest50mlConical from '@opentrons/shared-data/labware/definitions/2/opentrons_6_tuberack_nest_50ml_conical/1.json'
+import { LabwareRender } from '../Labware'
+import { RobotWorkSpace } from '../Deck'
+import { PipetteRender } from './'
+
+import type { Story, Meta } from '@storybook/react'
+import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+
+const DECK_MAP_VIEWBOX = '0 -140 230 230'
+
+const opentrons300UlTiprack = (_uncasted_opentrons300UlTiprack as unknown) as LabwareDefinition2
+const opentrons10UlTiprack = (_uncasted_opentrons10UlTiprack as unknown) as LabwareDefinition2
+const nest12Reservoir15ml = _uncasted_nest12Reservoir15ml as LabwareDefinition2
+const axygenReservoir90ml = _uncasted_axygenReservoir90ml as LabwareDefinition2
+const opentrons6TuberackNest50mlConical = _uncasted_opentrons6TuberackNest50mlConical as LabwareDefinition2
+
+const labwareDefMap: Record<string, LabwareDefinition2> = {
+  [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
+  [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
+  [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,
+  [axygenReservoir90ml.metadata.displayName]: axygenReservoir90ml,
+  [opentrons6TuberackNest50mlConical.metadata
+    .displayName]: opentrons6TuberackNest50mlConical,
+}
+const pipetteNames = Object.keys(pipetteNameSpecFixtures) as PipetteName[]
+
+export default {
+  title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
+} as Meta
+
+const Template: Story<{
+  labwareName: string
+  pipetteName: PipetteName
+}> = args => {
+  const labwareDef = labwareDefMap[args.labwareName]
+  return (
+    <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
+      {() => (
+        <React.Fragment>
+          <LabwareRender definition={labwareDef} />
+          <PipetteRender
+            labwareDef={labwareDef}
+            pipetteName={args.pipetteName}
+          />
+        </React.Fragment>
+      )}
+    </RobotWorkSpace>
+  )
+}
+export const Pipette = Template.bind({})
+
+Pipette.argTypes = {
+  labwareName: {
+    control: {
+      type: 'select',
+      options: Object.keys(labwareDefMap).map(
+        d => labwareDefMap[d].metadata.displayName
+      ),
+    },
+    defaultValue: opentrons300UlTiprack.metadata.displayName,
+  },
+  pipetteName: {
+    control: {
+      type: 'select',
+      options: pipetteNames,
+    },
+    defaultValue: pipetteNames[0],
+  },
+}
diff --git a/components/src/hardware-sim/Pipette/PipetteRender.tsx b/components/src/hardware-sim/Pipette/PipetteRender.tsx
new file mode 100644
index 00000000000..e879faf9400
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/PipetteRender.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import {
+  getPipetteNameSpecs,
+  LabwareDefinition2,
+  PipetteName,
+} from '@opentrons/shared-data'
+import { C_MED_DARK_GRAY, C_MED_GRAY } from '../../styles'
+import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
+import {
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_CENTER_Y_NOZZLE,
+  MULTI_CHANNEL_Y_OFFSET,
+} from './constants'
+import { EmanatingNozzle } from './EmanatingNozzle'
+import { EightEmanatingNozzles } from './EightEmanatingNozzles'
+import styles from './styles.css'
+
+interface PipetteRenderProps {
+  labwareDef: LabwareDefinition2
+  pipetteName: PipetteName
+}
+
+export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
+  const { labwareDef, pipetteName } = props
+  const channels = getPipetteNameSpecs(pipetteName)?.channels
+  const cx =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_WIDTH / 2
+      : MULTI_CHANNEL_PIPETTE_WIDTH / 2
+  const cy =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_HEIGHT / 2
+      : MULTI_CHANNEL_CENTER_Y_NOZZLE
+  const x = labwareDef.wells.A1.x - cx
+  const y = channels === 1 ? labwareDef.wells.A1.y - cy : MULTI_CHANNEL_Y_OFFSET
+
+  return (
+    <RobotCoordsForeignDiv
+      width={
+        channels === 1
+          ? SINGLE_CHANNEL_PIPETTE_WIDTH
+          : MULTI_CHANNEL_PIPETTE_WIDTH
+      }
+      height={
+        channels === 1
+          ? SINGLE_CHANNEL_PIPETTE_HEIGHT
+          : MULTI_CHANNEL_PIPETTE_HEIGHT
+      }
+      x={x}
+      y={y}
+      className={classNames(styles.overflow)}
+      innerDivProps={{
+        style: {
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
+          boxSizing: 'border-box',
+          borderRadius: '4px',
+          boxShadow: `inset 0 0 0 1px ${C_MED_DARK_GRAY}`,
+          backgroundColor: `${C_MED_GRAY}80`,
+        },
+      }}
+    >
+      <svg overflow="visible">
+        {channels === 1 ? (
+          <EmanatingNozzle cx={cx} cy={cy} />
+        ) : (
+          <EightEmanatingNozzles cx={cx} initialCy={cy} />
+        )}
+      </svg>
+    </RobotCoordsForeignDiv>
+  )
+}
diff --git a/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx b/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx
new file mode 100644
index 00000000000..e31ee337dfb
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { when } from 'jest-when'
+import { anyProps } from '../../../testing/utils'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+
+jest.mock('../EmanatingNozzle')
+
+const mockEmanatingNozzle = EmanatingNozzle as jest.MockedFunction<
+  typeof EmanatingNozzle
+>
+
+describe('EightEmanatingNozzles', () => {
+  beforeEach(() => {
+    when(mockEmanatingNozzle)
+      .calledWith(anyProps())
+      .mockReturnValue(<div>mock emanating nozzle</div>)
+  })
+  it('should render eight emanating nozzles', () => {
+    render(<EightEmanatingNozzles cx={5} initialCy={10} />)
+    expect(mockEmanatingNozzle).toHaveBeenCalledTimes(8)
+  })
+})
diff --git a/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx
new file mode 100644
index 00000000000..cb45e9e50f6
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { C_SELECTED_DARK, C_TRANSPARENT } from '../../../styles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
+
+describe('EmanatingNozzle', () => {
+  it('should render an small origin circle', () => {
+    const { getByTestId } = render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const originCircle = getByTestId('origin_circle')
+    expect(originCircle).toHaveAttribute('cx', '5')
+    expect(originCircle).toHaveAttribute('cy', '10')
+    expect(originCircle).toHaveAttribute('r', '0.5')
+    expect(originCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
+    expect(originCircle).toHaveAttribute('fill', C_SELECTED_DARK)
+  })
+  it('should render a medium sized animating circle', () => {
+    const { getByTestId } = render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const emanatingCircle = getByTestId('emanating_circle')
+    expect(emanatingCircle).toHaveAttribute('cx', '5')
+    expect(emanatingCircle).toHaveAttribute('cy', '10')
+    expect(emanatingCircle).toHaveAttribute('r', '0.5')
+    expect(emanatingCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
+    expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT)
+  })
+  it('should render a medium sized animating circle that grows', () => {
+    const { getByTestId } = render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const animations = getByTestId('emanating_circle').children
+    const radiusAnimation = animations[0]
+    expect(radiusAnimation).toHaveAttribute('attributeName', 'r')
+    expect(radiusAnimation).toHaveAttribute('from', '5')
+    expect(radiusAnimation).toHaveAttribute(
+      'to',
+      (SINGLE_CHANNEL_PIPETTE_HEIGHT / 2).toString()
+    )
+    expect(radiusAnimation).toHaveAttribute('begin', '0')
+    expect(radiusAnimation).toHaveAttribute('dur', '1.1')
+    expect(radiusAnimation).toHaveAttribute('calcMode', 'ease-out')
+    expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+  it('should render a medium sized animating circle that fades out', () => {
+    const { getByTestId } = render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const animations = getByTestId('emanating_circle').children
+    const opacityAnimation = animations[1]
+    expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity')
+    expect(opacityAnimation).toHaveAttribute('from', '0.7')
+    expect(opacityAnimation).toHaveAttribute('to', '0')
+    expect(opacityAnimation).toHaveAttribute('begin', '0')
+    expect(opacityAnimation).toHaveAttribute('dur', '1.1')
+    expect(opacityAnimation).toHaveAttribute('calcMode', 'linear')
+    expect(opacityAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+})
diff --git a/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx
new file mode 100644
index 00000000000..a1831cf2e68
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { when, resetAllWhenMocks } from 'jest-when'
+import { render } from '@testing-library/react'
+import _uncasted_fixtureTiprack300Ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
+import { anyProps, partialComponentPropsMatcher } from '../../../testing/utils'
+import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
+import { PipetteRender } from '../PipetteRender'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import {
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+} from '../constants'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+jest.mock('../../Deck/RobotCoordsForeignDiv')
+jest.mock('../EmanatingNozzle')
+jest.mock('../EightEmanatingNozzles')
+
+const fixtureTiprack300Ul = _uncasted_fixtureTiprack300Ul as LabwareDefinition2
+
+const mockRobotCoordsForeignDiv = RobotCoordsForeignDiv as jest.MockedFunction<
+  typeof RobotCoordsForeignDiv
+>
+
+const mockEmanatingNozzle = EmanatingNozzle as jest.MockedFunction<
+  typeof EmanatingNozzle
+>
+
+const mockEightEmanatingNozzles = EightEmanatingNozzles as jest.MockedFunction<
+  typeof EightEmanatingNozzles
+>
+
+describe('PipetteRender', () => {
+  beforeEach(() => {
+    when(mockRobotCoordsForeignDiv).mockReturnValue(<div></div>)
+  })
+
+  afterEach(() => {
+    resetAllWhenMocks()
+  })
+
+  describe('when the pipette is single channel', () => {
+    beforeEach(() => {
+      when(mockRobotCoordsForeignDiv)
+        .calledWith(
+          partialComponentPropsMatcher({
+            width: SINGLE_CHANNEL_PIPETTE_WIDTH,
+            height: SINGLE_CHANNEL_PIPETTE_HEIGHT,
+          })
+        )
+        .mockImplementation(({ children }) => (
+          <div>
+            {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+            {children}
+          </div>
+        ))
+
+      when(mockEmanatingNozzle)
+        .calledWith(anyProps())
+        .mockReturnValue(<div>mock emanating nozzle</div>)
+    })
+
+    it('should render a rectangle with the correct dimensions', () => {
+      const { getByText } = render(
+        <PipetteRender
+          labwareDef={fixtureTiprack300Ul}
+          pipetteName={'p1000_single'}
+        />
+      )
+      getByText(
+        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      mockEmanatingNozzle.mockRestore()
+    })
+    it('should render a single emanating nozzle', () => {
+      const { getByText } = render(
+        <PipetteRender
+          labwareDef={fixtureTiprack300Ul}
+          pipetteName={'p1000_single'}
+        />
+      )
+      getByText('mock emanating nozzle')
+      expect(mockEightEmanatingNozzles).not.toHaveBeenCalled()
+    })
+  })
+  describe('when the pipette is 8 channel', () => {
+    beforeEach(() => {
+      when(mockRobotCoordsForeignDiv)
+        .calledWith(
+          partialComponentPropsMatcher({
+            width: MULTI_CHANNEL_PIPETTE_WIDTH,
+            height: MULTI_CHANNEL_PIPETTE_HEIGHT,
+          })
+        )
+        .mockImplementation(({ children }) => (
+          <div>
+            {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+            {children}
+          </div>
+        ))
+
+      when(mockEightEmanatingNozzles)
+        .calledWith(anyProps())
+        .mockReturnValue(<div>mock eight emanating nozzles</div>)
+    })
+    it('should render a rectangle with the correct dimensions', () => {
+      const { getByText } = render(
+        <PipetteRender
+          labwareDef={fixtureTiprack300Ul}
+          pipetteName={'p10_multi'}
+        />
+      )
+      getByText(
+        `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      mockEightEmanatingNozzles.mockRestore()
+    })
+    it('should render eight emanating nozzles', () => {
+      const { getByText } = render(
+        <PipetteRender
+          labwareDef={fixtureTiprack300Ul}
+          pipetteName={'p10_multi'}
+        />
+      )
+      getByText('mock eight emanating nozzles')
+    })
+  })
+})
diff --git a/components/src/hardware-sim/Pipette/constants.ts b/components/src/hardware-sim/Pipette/constants.ts
new file mode 100644
index 00000000000..700361531fe
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/constants.ts
@@ -0,0 +1,8 @@
+export const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7
+export const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5
+
+export const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7
+export const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3
+
+export const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3
+export const MULTI_CHANNEL_Y_OFFSET = -2.5
diff --git a/components/src/hardware-sim/Pipette/index.ts b/components/src/hardware-sim/Pipette/index.ts
new file mode 100644
index 00000000000..718a331dcf0
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/index.ts
@@ -0,0 +1 @@
+export * from './PipetteRender'
diff --git a/components/src/hardware-sim/Pipette/styles.css b/components/src/hardware-sim/Pipette/styles.css
new file mode 100644
index 00000000000..368992440af
--- /dev/null
+++ b/components/src/hardware-sim/Pipette/styles.css
@@ -0,0 +1,3 @@
+.overflow {
+  overflow: visible;
+}
diff --git a/components/src/hardware-sim/index.ts b/components/src/hardware-sim/index.ts
index c5558a60451..51c7a438978 100644
--- a/components/src/hardware-sim/index.ts
+++ b/components/src/hardware-sim/index.ts
@@ -1,5 +1,4 @@
 export * from './Deck'
 export * from './Labware'
-export * from './Deck'
-export * from './Labware'
 export * from './Module'
+export * from './Pipette'
diff --git a/components/src/index.ts b/components/src/index.ts
index ac2d2147ac9..03c7687ca09 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -28,3 +28,6 @@ export * from './styles'
 
 // Pure Types
 export * from './robot-types'
+
+// testing utilities
+export * from './testing/utils'
diff --git a/components/__utils__/index.ts b/components/src/testing/utils/index.ts
similarity index 100%
rename from components/__utils__/index.ts
rename to components/src/testing/utils/index.ts
diff --git a/components/__utils__/matchers.ts b/components/src/testing/utils/matchers.ts
similarity index 81%
rename from components/__utils__/matchers.ts
rename to components/src/testing/utils/matchers.ts
index 0d624618eb8..61d7c133e01 100644
--- a/components/__utils__/matchers.ts
+++ b/components/src/testing/utils/matchers.ts
@@ -2,12 +2,14 @@ import { when } from 'jest-when'
 
 // these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
 // https://github.com/timkindberg/jest-when/issues/66
-export const componentPropsMatcher = (matcher: unknown) =>
+export const componentPropsMatcher = (matcher: unknown): any =>
   // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
   when.allArgs((args, equals) => equals(args[0], matcher))
 
-export const partialComponentPropsMatcher = (argsToMatch: unknown) =>
+export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
   // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
   when.allArgs((args, equals) =>
     equals(args[0], expect.objectContaining(argsToMatch))
   )
+
+export const anyProps = (): any => partialComponentPropsMatcher({})
diff --git a/components/__utils__/mountWithProviders.tsx b/components/src/testing/utils/mountWithProviders.tsx
similarity index 96%
rename from components/__utils__/mountWithProviders.tsx
rename to components/src/testing/utils/mountWithProviders.tsx
index 4629fc78de0..0c1ec948e60 100644
--- a/components/__utils__/mountWithProviders.tsx
+++ b/components/src/testing/utils/mountWithProviders.tsx
@@ -22,6 +22,7 @@ export function mountWithProviders<Element, State, Action>(
   const {
     provideI18n = true,
     provideStore = true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     initialState = {} as State,
     i18nInstance = null,
   } = options || {}
@@ -64,7 +65,7 @@ export function mountWithProviders<Element, State, Action>(
     children: React.ReactNode
     store: Store<State>
     i18n: React.ComponentProps<typeof I18nextProvider>['i18n']
-  }) => (
+  }): JSX.Element => (
     <StateWrapper store={store}>
       <I18nWrapper i18n={i18n}>{children}</I18nWrapper>
     </StateWrapper>
diff --git a/components/__utils__/mountWithStore.ts b/components/src/testing/utils/mountWithStore.ts
similarity index 95%
rename from components/__utils__/mountWithStore.ts
rename to components/src/testing/utils/mountWithStore.ts
index 4393abb1ac4..dcc41e46855 100644
--- a/components/__utils__/mountWithStore.ts
+++ b/components/src/testing/utils/mountWithStore.ts
@@ -26,6 +26,7 @@ export function mountWithStore<Props, State = {}, Action = {}>(
   node: React.ReactElement<Props>,
   options?: MountWithStoreOptions<State>
 ): WrapperWithStore<Props, State, Action> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const initialState = options?.initialState ?? ({} as State)
 
   const store: MockStore<State, Action> = {
diff --git a/components/__utils__/renderWithProviders.tsx b/components/src/testing/utils/renderWithProviders.tsx
similarity index 83%
rename from components/__utils__/renderWithProviders.tsx
rename to components/src/testing/utils/renderWithProviders.tsx
index 94a33c0a76d..fd14ed5ea6c 100644
--- a/components/__utils__/renderWithProviders.tsx
+++ b/components/src/testing/utils/renderWithProviders.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
-import { render } from '@testing-library/react'
+import { render, RenderResult } from '@testing-library/react'
 import { createStore } from 'redux'
 
 import type { Store } from 'redux'
@@ -17,7 +17,8 @@ export interface RenderWithProvidersOptions<State> extends RenderOptions {
 export function renderWithProviders<State>(
   Component: React.ReactElement,
   options?: RenderWithProvidersOptions<State>
-) {
+): [RenderResult, Store<State>] {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const { initialState = {} as State, i18nInstance = null } = options || {}
 
   const store: Store<State> = createStore(jest.fn(), initialState)
@@ -37,5 +38,5 @@ export function renderWithProviders<State>(
     }
   }
 
-  return { ...render(Component, { wrapper: ProviderWrapper }), store }
+  return [render(Component, { wrapper: ProviderWrapper }), store]
 }
diff --git a/jest.config.js b/jest.config.js
index a1e36f56766..61e66ca7a58 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,6 +4,7 @@ module.exports = {
   setupFilesAfterEnv: [
     '<rootDir>/scripts/setup-enzyme.js',
     '<rootDir>/scripts/setup-global-mocks.js',
+    '<rootDir>/scripts/setup-global-imports.js',
   ],
   globals: {
     __webpack_public_path__: '/',