app/src/pages vitest migration

app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
+import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import {
@@ -20,15 +21,15 @@ import {
 
 import { AdvancedSettings } from '../AdvancedSettings'
 
-jest.mock('../../../redux/config')
-jest.mock('../../../redux/calibration')
-jest.mock('../../../redux/custom-labware')
-jest.mock('../../../redux/discovery')
-jest.mock('../../../redux/protocol-analysis')
-jest.mock('../../../redux/system-info')
-jest.mock('@opentrons/components/src/hooks')
-jest.mock('../../../redux/analytics')
-jest.mock('../../../organisms/AdvancedSettings')
+vi.mock('../../../redux/config')
+vi.mock('../../../redux/calibration')
+vi.mock('../../../redux/custom-labware')
+vi.mock('../../../redux/discovery')
+vi.mock('../../../redux/protocol-analysis')
+vi.mock('../../../redux/system-info')
+vi.mock('@opentrons/components/src/hooks')
+vi.mock('../../../redux/analytics')
+vi.mock('../../../organisms/AdvancedSettings')
 
 const render = (): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(
@@ -41,64 +42,36 @@ const render = (): ReturnType<typeof renderWithProviders> => {
   )
 }
 
-const mockAdditionalCustomLabwareSourceFolder = AdditionalCustomLabwareSourceFolder as jest.MockedFunction<
-  typeof AdditionalCustomLabwareSourceFolder
->
-const mockPreventRobotCaching = PreventRobotCaching as jest.MockedFunction<
-  typeof PreventRobotCaching
->
-
-const mockOT2AdvancedSettings = OT2AdvancedSettings as jest.MockedFunction<
-  typeof OT2AdvancedSettings
->
-const mockEnableDevTools = EnableDevTools as jest.MockedFunction<
-  typeof EnableDevTools
->
-const mockU2EInformation = U2EInformation as jest.MockedFunction<
-  typeof U2EInformation
->
-const mockShowLabwareOffsetSnippets = ShowLabwareOffsetSnippets as jest.MockedFunction<
-  typeof ShowLabwareOffsetSnippets
->
-const mockClearUnavailableRobots = ClearUnavailableRobots as jest.MockedFunction<
-  typeof ClearUnavailableRobots
->
-const mockOverridePathToPython = OverridePathToPython as jest.MockedFunction<
-  typeof OverridePathToPython
->
-const mockShowHeaterShakerAttachmentModal = ShowHeaterShakerAttachmentModal as jest.MockedFunction<
-  typeof ShowHeaterShakerAttachmentModal
->
-const mockUpdatedChannel = UpdatedChannel as jest.MockedFunction<
-  typeof UpdatedChannel
->
-
 describe('AdvancedSettings', () => {
   beforeEach(() => {
-    mockPreventRobotCaching.mockReturnValue(<div>mock PreventRobotCaching</div>)
-    mockOT2AdvancedSettings.mockReturnValue(<div>mock OT2AdvancedSettings</div>)
-    mockEnableDevTools.mockReturnValue(<div>mock EnableDevTools</div>)
-    mockU2EInformation.mockReturnValue(<div>mock U2EInformation</div>)
-    mockShowLabwareOffsetSnippets.mockReturnValue(
+    vi.mocked(PreventRobotCaching).mockReturnValue(
+      <div>mock PreventRobotCaching</div>
+    )
+    vi.mocked(OT2AdvancedSettings).mockReturnValue(
+      <div>mock OT2AdvancedSettings</div>
+    )
+    vi.mocked(EnableDevTools).mockReturnValue(<div>mock EnableDevTools</div>)
+    vi.mocked(U2EInformation).mockReturnValue(<div>mock U2EInformation</div>)
+    vi.mocked(ShowLabwareOffsetSnippets).mockReturnValue(
       <div>mock ShowLabwareOffsetSnippets</div>
     )
-    mockClearUnavailableRobots.mockReturnValue(
+    vi.mocked(ClearUnavailableRobots).mockReturnValue(
       <div>mock ClearUnavailableRobots</div>
     )
-    mockOverridePathToPython.mockReturnValue(
+    vi.mocked(OverridePathToPython).mockReturnValue(
       <div>mock OverridePathToPython</div>
     )
-    mockShowHeaterShakerAttachmentModal.mockReturnValue(
+    vi.mocked(ShowHeaterShakerAttachmentModal).mockReturnValue(
       <div>mock ShowHeaterShakerAttachmentModal</div>
     )
-    mockUpdatedChannel.mockReturnValue(<div>mock UpdatedChannel</div>)
-    mockAdditionalCustomLabwareSourceFolder.mockReturnValue(
+    vi.mocked(UpdatedChannel).mockReturnValue(<div>mock UpdatedChannel</div>)
+    vi.mocked(AdditionalCustomLabwareSourceFolder).mockReturnValue(
       <div>mock AdditionalCustomLabwareSourceFolder</div>
     )
   })
 
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('should render mock UpdatedChannel section', () => {

app/src/pages/AppSettings/__test__/AppSettings.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { Route } from 'react-router'
-import { MemoryRouter } from 'react-router-dom'
+import { Route, MemoryRouter } from 'react-router-dom'
+import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import * as Config from '../../../redux/config'
@@ -12,27 +12,11 @@ import { AdvancedSettings } from '../AdvancedSettings'
 import { FeatureFlags } from '../../../organisms/AppSettings/FeatureFlags'
 import { AppSettings } from '..'
 
-jest.mock('../../../redux/config')
-jest.mock('../GeneralSettings')
-jest.mock('../PrivacySettings')
-jest.mock('../AdvancedSettings')
-jest.mock('../../../organisms/AppSettings/FeatureFlags')
-
-const getDevtoolsEnabled = Config.getDevtoolsEnabled as jest.MockedFunction<
-  typeof Config.getDevtoolsEnabled
->
-const mockGeneralSettings = GeneralSettings as jest.MockedFunction<
-  typeof GeneralSettings
->
-const mockPrivacySettings = PrivacySettings as jest.MockedFunction<
-  typeof PrivacySettings
->
-const mockAdvancedSettings = AdvancedSettings as jest.MockedFunction<
-  typeof AdvancedSettings
->
-const mockFeatureFlags = FeatureFlags as jest.MockedFunction<
-  typeof FeatureFlags
->
+vi.mock('../../../redux/config')
+vi.mock('../GeneralSettings')
+vi.mock('../PrivacySettings')
+vi.mock('../AdvancedSettings')
+vi.mock('../../../organisms/AppSettings/FeatureFlags')
 
 const render = (path = '/'): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(
@@ -48,14 +32,16 @@ const render = (path = '/'): ReturnType<typeof renderWithProviders> => {
 }
 describe('AppSettingsHeader', () => {
   beforeEach(() => {
-    getDevtoolsEnabled.mockReturnValue(false)
-    mockGeneralSettings.mockReturnValue(<div>Mock General Settings</div>)
-    mockPrivacySettings.mockReturnValue(<div>Mock Privacy Settings</div>)
-    mockAdvancedSettings.mockReturnValue(<div>Mock Advanced Settings</div>)
-    mockFeatureFlags.mockReturnValue(<div>Mock Feature Flags</div>)
+    vi.mocked(Config.getDevtoolsEnabled).mockReturnValue(false)
+    vi.mocked(GeneralSettings).mockReturnValue(<div>Mock General Settings</div>)
+    vi.mocked(PrivacySettings).mockReturnValue(<div>Mock Privacy Settings</div>)
+    vi.mocked(AdvancedSettings).mockReturnValue(
+      <div>Mock Advanced Settings</div>
+    )
+    vi.mocked(FeatureFlags).mockReturnValue(<div>Mock Feature Flags</div>)
   })
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('renders correct title and navigation tabs', () => {
@@ -70,7 +56,7 @@ describe('AppSettingsHeader', () => {
     expect(queryByText('Feature Flags')).toBeFalsy()
   })
   it('renders feature flags link if dev tools enabled', () => {
-    getDevtoolsEnabled.mockReturnValue(true)
+    vi.mocked(Config.getDevtoolsEnabled).mockReturnValue(true)
     const [{ getByText }] = render('/app-settings/general')
     getByText('Feature Flags')
   })

app/src/pages/AppSettings/__test__/GeneralSettings.test.tsx

@@ -1,28 +1,19 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
+import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { screen } from '@testing-library/react'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import { getAlertIsPermanentlyIgnored } from '../../../redux/alerts'
 import * as Shell from '../../../redux/shell'
 import { GeneralSettings } from '../GeneralSettings'
 
-jest.mock('../../../redux/config')
-jest.mock('../../../redux/shell')
-jest.mock('../../../redux/analytics')
-jest.mock('../../../redux/alerts')
-jest.mock('../../../organisms/UpdateAppModal', () => ({
-  UpdateAppModal: () => null,
-}))
-
-const getAvailableShellUpdate = Shell.getAvailableShellUpdate as jest.MockedFunction<
-  typeof Shell.getAvailableShellUpdate
->
-const mockGetAlertIsPermanentlyIgnored = getAlertIsPermanentlyIgnored as jest.MockedFunction<
-  typeof getAlertIsPermanentlyIgnored
->
+vi.mock('../../../redux/config')
+vi.mock('../../../redux/shell')
+vi.mock('../../../redux/analytics')
+vi.mock('../../../redux/alerts')
 
 const render = (): ReturnType<typeof renderWithProviders> => {
   return renderWithProviders(
@@ -37,11 +28,11 @@ const render = (): ReturnType<typeof renderWithProviders> => {
 
 describe('GeneralSettings', () => {
   beforeEach(() => {
-    getAvailableShellUpdate.mockReturnValue(null)
-    mockGetAlertIsPermanentlyIgnored.mockReturnValue(false)
+    vi.mocked(Shell.getAvailableShellUpdate).mockReturnValue(null)
+    vi.mocked(getAlertIsPermanentlyIgnored).mockReturnValue(false)
   })
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('renders correct titles', () => {
@@ -74,7 +65,7 @@ describe('GeneralSettings', () => {
   })
 
   it('renders correct info if there is update available', () => {
-    getAvailableShellUpdate.mockReturnValue('5.0.0-beta.8')
+    vi.mocked(Shell.getAvailableShellUpdate).mockReturnValue('5.0.0-beta.8')
     const [{ getByRole }] = render()
     getByRole('button', { name: 'View software update' })
   })
@@ -84,8 +75,8 @@ describe('GeneralSettings', () => {
   })
 
   it('renders correct info if there is update available but alert ignored enabled', () => {
-    getAvailableShellUpdate.mockReturnValue('5.0.0-beta.8')
-    mockGetAlertIsPermanentlyIgnored.mockReturnValue(true)
+    vi.mocked(Shell.getAvailableShellUpdate).mockReturnValue('5.0.0-beta.8')
+    vi.mocked(getAlertIsPermanentlyIgnored).mockReturnValue(true)
     expect(screen.queryByText('View software update')).toBeNull()
   })
 

app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { renderWithProviders } from '@opentrons/components'
+import { vi, it, describe, beforeEach, afterEach } from 'vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import * as Networking from '../../../redux/networking'
 import { TitleHeader } from '../../../pages/ConnectViaEthernet/TitleHeader'
 import { DisplayConnectionStatus } from '../../../pages/ConnectViaEthernet/DisplayConnectionStatus'
 import { ConnectViaEthernet } from '../../../pages/ConnectViaEthernet'
 
-jest.mock('../../../redux/networking')
-jest.mock('../../../redux/discovery')
-jest.mock('../TitleHeader')
-jest.mock('../DisplayConnectionStatus')
+vi.mock('../../../redux/networking')
+vi.mock('../../../redux/discovery')
+vi.mock('../TitleHeader')
+vi.mock('../DisplayConnectionStatus')
 
 const initialMockEthernet = {
   ipAddress: '127.0.0.101',
@@ -20,14 +21,6 @@ const initialMockEthernet = {
   type: Networking.INTERFACE_ETHERNET,
 }
 
-const mockTitleHeader = TitleHeader as jest.MockedFunction<typeof TitleHeader>
-const mockDisplayConnectionStatus = DisplayConnectionStatus as jest.MockedFunction<
-  typeof DisplayConnectionStatus
->
-const mockGetNetworkInterfaces = Networking.getNetworkInterfaces as jest.MockedFunction<
-  typeof Networking.getNetworkInterfaces
->
-
 const render = () => {
   return renderWithProviders(
     <MemoryRouter>
@@ -41,19 +34,19 @@ const render = () => {
 
 describe('ConnectViaEthernet', () => {
   beforeEach(() => {
-    mockGetNetworkInterfaces.mockReturnValue({
+    vi.mocked(Networking.getNetworkInterfaces).mockReturnValue({
       wifi: null,
       ethernet: initialMockEthernet,
     })
 
-    mockTitleHeader.mockReturnValue(<div>mock TitleHeader</div>)
-    mockDisplayConnectionStatus.mockReturnValue(
+    vi.mocked(TitleHeader).mockReturnValue(<div>mock TitleHeader</div>)
+    vi.mocked(DisplayConnectionStatus).mockReturnValue(
       <div>mock DisplayConnectionStatus</div>
     )
   })
 
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('should render TitleHeader component and DisplayConnectionStatus component', () => {

app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
+import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import { DisplayConnectionStatus } from '../../../pages/ConnectViaEthernet/DisplayConnectionStatus'
 
-const mockFunc = jest.fn()
-const mockPush = jest.fn()
-jest.mock('react-router-dom', () => {
-  const reactRouterDom = jest.requireActual('react-router-dom')
+const mockFunc = vi.fn()
+const mockPush = vi.fn()
+vi.mock('react-router-dom', async importOriginal => {
+  const actual = await importOriginal()
   return {
-    ...reactRouterDom,
+    ...actual,
     useHistory: () => ({ push: mockPush } as any),
   }
 })

app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
+import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { fireEvent } from '@testing-library/react'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { TitleHeader } from '../../../pages/ConnectViaEthernet/TitleHeader'
 
-const mockPush = jest.fn()
-jest.mock('react-router-dom', () => {
-  const reactRouterDom = jest.requireActual('react-router-dom')
+const mockPush = vi.fn()
+vi.mock('react-router-dom', async importOriginal => {
+  const actual = await importOriginal()
   return {
-    ...reactRouterDom,
+    ...actual,
     useHistory: () => ({ push: mockPush } as any),
   }
 })