the rest test case phase 1

Author: koji

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, beforeEach, vi, expect, afterEach } from 'vitest'
+
 import {
   useDeckConfigurationQuery,
   useUpdateDeckConfigurationMutation,
@@ -10,23 +11,17 @@ import {
   WASTE_CHUTE_FIXTURES,
 } from '@opentrons/shared-data'
 
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { AddFixtureModal } from '../AddFixtureModal'
 
 import type { UseQueryResult } from 'react-query'
 import type { DeckConfiguration } from '@opentrons/shared-data'
 
-jest.mock('@opentrons/react-api-client')
-const mockSetShowAddFixtureModal = jest.fn()
-const mockUpdateDeckConfiguration = jest.fn()
-const mockSetCurrentDeckConfig = jest.fn()
-
-const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
-  typeof useUpdateDeckConfigurationMutation
->
-const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
-  typeof useDeckConfigurationQuery
->
+vi.mock('@opentrons/react-api-client')
+const mockSetShowAddFixtureModal = vi.fn()
+const mockUpdateDeckConfiguration = vi.fn()
+const mockSetCurrentDeckConfig = vi.fn()
 
 const render = (props: React.ComponentProps<typeof AddFixtureModal>) => {
   return renderWithProviders(<AddFixtureModal {...props} />, {
@@ -44,10 +39,10 @@ describe('Touchscreen AddFixtureModal', () => {
       setCurrentDeckConfig: mockSetCurrentDeckConfig,
       isOnDevice: true,
     }
-    mockUseUpdateDeckConfigurationMutation.mockReturnValue({
+    vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
-    mockUseDeckConfigurationQuery.mockReturnValue(({
+    vi.mocked(useDeckConfigurationQuery).mockReturnValue(({
       data: [],
     } as unknown) as UseQueryResult<DeckConfiguration>)
   })
@@ -97,13 +92,13 @@ describe('Desktop AddFixtureModal', () => {
       cutoutId: 'cutoutD3',
       setShowAddFixtureModal: mockSetShowAddFixtureModal,
     }
-    mockUseUpdateDeckConfigurationMutation.mockReturnValue({
+    vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
   })
 
   afterEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it('should render text and buttons slot D3', () => {

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
 
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
 
-const mockFunc = jest.fn()
-const mockGoBack = jest.fn()
+const mockFunc = vi.fn()
+const mockGoBack = vi.fn()
 
-jest.mock('react-router-dom', () => {
-  const reactRouterDom = jest.requireActual('react-router-dom')
+vi.mock('react-router-dom', () => {
+  const reactRouterDom = vi.requireActual('react-router-dom')
   return {
     ...reactRouterDom,
     useHistory: () => ({ goBack: mockGoBack } as any),

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
 
-import { renderWithProviders } from '@opentrons/components'
-
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
-
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
-import { fireEvent } from '@testing-library/react'
 
-const mockFunc = jest.fn()
-const PNG_FILE_NAME = 'deck_fixture_setup_qrcode.png'
+const mockFunc = vi.fn()
+const PNG_FILE_NAME =
+  '/app/src/assets/images/on-device-display/deck_fixture_setup_qrcode.png'
 
 const render = (
   props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
@@ -29,21 +29,21 @@ describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
   })
 
   it('should render text and image', () => {
-    const [{ getByText, getByRole }] = render(props)
-    getByText('Deck fixture setup instructions')
-    getByText(
+    render(props)
+    screen.getByText('Deck fixture setup instructions')
+    screen.getByText(
       "First, unscrew and remove the deck slot where you'll install a fixture. Then put the fixture in place and attach it as needed."
     )
-    getByText(
+    screen.getByText(
       'For details on installing different fixture types, scan the QR code or search for “deck configuration” on support.opentrons.com'
     )
-    const img = getByRole('img')
+    const img = screen.getByRole('img')
     expect(img.getAttribute('src')).toEqual(PNG_FILE_NAME)
   })
 
   it('should call a mock function when tapping the close icon', () => {
-    const [{ getByLabelText }] = render(props)
-    fireEvent.click(getByLabelText('closeIcon'))
+    render(props)
+    fireEvent.click(screen.getByLabelText('closeIcon'))
     expect(mockFunc).toHaveBeenCalled()
   })
 })
@@ -58,19 +58,21 @@ describe('Desktop DeckFixtureSetupInstructionsModal', () => {
   })
 
   it('should render text, image, and button', () => {
-    const [{ getAllByText, getByText, getByRole, queryByText }] = render(props)
-    expect(getAllByText('Deck fixture setup instructions').length).toBe(2)
-    getByText(
+    render(props)
+    expect(screen.getAllByText('Deck fixture setup instructions').length).toBe(
+      2
+    )
+    screen.getByText(
       "First, unscrew and remove the deck slot where you'll install a fixture. Then put the fixture in place and attach it as needed."
     )
-    getByText(
+    screen.getByText(
       'For detailed instructions for different types of fixtures, scan the QR code or go to the link below.'
     )
-    const img = getByRole('img')
+    const img = screen.getByRole('img')
     expect(img.getAttribute('src')).toEqual(PNG_FILE_NAME)
     expect(
-      queryByText('www.opentrons.com/support/fixtures')
+      screen.queryByText('www.opentrons.com/support/fixtures')
     ).not.toBeInTheDocument()
-    getByRole('button', { name: 'Close' })
+    screen.getByRole('button', { name: 'Close' })
   })
 })

app/src/organisms/Devices/ProtocolRun/__tests__/BackToTopButton.test.tsx

@@ -1,29 +1,20 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { when, resetAllWhenMocks } from 'jest-when'
+import { fireEvent, screen } from '@testing-library/react'
+import { when } from 'vitest-when'
 import { StaticRouter } from 'react-router-dom'
+import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 
-import { renderWithProviders } from '@opentrons/components'
-
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import {
   useTrackEvent,
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
 } from '../../../../redux/analytics'
 import { BackToTopButton } from '../BackToTopButton'
 
-jest.mock('@opentrons/components', () => {
-  const actualComponents = jest.requireActual('@opentrons/components')
-  return {
-    ...actualComponents,
-    Tooltip: jest.fn(({ children }) => <div>{children}</div>),
-  }
-})
-jest.mock('../../../../redux/analytics')
+import type { Mock } from 'vitest'
 
-const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
-  typeof useTrackEvent
->
+vi.mock('../../../../redux/analytics')
 
 const ROBOT_NAME = 'otie'
 const RUN_ID = '1'
@@ -44,15 +35,15 @@ const render = () => {
   )[0]
 }
 
-let mockTrackEvent: jest.Mock
+let mockTrackEvent: Mock
 
 describe('BackToTopButton', () => {
   beforeEach(() => {
-    mockTrackEvent = jest.fn()
-    when(mockUseTrackEvent).calledWith().mockReturnValue(mockTrackEvent)
+    mockTrackEvent = vi.fn()
+    when(vi.mocked(useTrackEvent)).calledWith().thenReturn(mockTrackEvent)
   })
   afterEach(() => {
-    resetAllWhenMocks()
+    vi.clearAllMocks()
   })
 
   it('should be enabled with no tooltip if there are no missing Ids', () => {
@@ -65,8 +56,8 @@ describe('BackToTopButton', () => {
   })
 
   it('should track a mixpanel event when clicked', () => {
-    const { getByRole } = render()
-    const button = getByRole('link', { name: 'Back to top' })
+    render()
+    const button = screen.getByRole('link', { name: 'Back to top' })
     fireEvent.click(button)
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
@@ -75,8 +66,8 @@ describe('BackToTopButton', () => {
   })
 
   it('should always be enabled', () => {
-    const { getByRole } = render()
-    const button = getByRole('button', { name: 'Back to top' })
+    render()
+    const button = screen.getByRole('button', { name: 'Back to top' })
     expect(button).not.toBeDisabled()
   })
 })

app/src/organisms/Devices/ProtocolRun/__tests__/EmptySetupStep.test.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import { EmptySetupStep } from '../EmptySetupStep'
 
@@ -20,9 +23,9 @@ describe('EmptySetupStep', () => {
   })
 
   it('should render the title, description, and label', () => {
-    const { getByText } = render(props)
-    getByText('mockTitle')
-    getByText('mockDescription')
-    getByText('mockLabel')
+    render(props)
+    screen.getByText('mockTitle')
+    screen.getByText('mockDescription')
+    screen.getByText('mockLabel')
   })
 })

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolAnalysisErrorBanner.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, beforeEach } from 'vitest'
+
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import { ProtocolAnalysisErrorBanner } from '../ProtocolAnalysisErrorBanner'
 
@@ -28,14 +30,14 @@ describe('ProtocolAnalysisErrorBanner', () => {
     }
   })
   it('renders error banner and show error link', () => {
-    const { getByText, getByLabelText } = render(props)
-    getByText('Protocol analysis failed.')
-    getByLabelText('error_link')
+    render(props)
+    screen.getByText('Protocol analysis failed.')
+    screen.getByLabelText('error_link')
   })
   it('renders error details modal when error link clicked', () => {
-    const { getByText, getByLabelText } = render(props)
-    const btn = getByLabelText('error_link')
+    render(props)
+    const btn = screen.getByLabelText('error_link')
     fireEvent.click(btn)
-    getByText('protocol analysis error')
+    screen.getByText('protocol analysis error')
   })
 })