update app Devices/__tests__ to vitest

app/src/organisms/Devices/__tests__/CalibrationStatusBanner.test.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { MemoryRouter } from 'react-router-dom'
 import { i18n } from '../../../i18n'
 import { CalibrationStatusBanner } from '../CalibrationStatusBanner'
 import { useCalibrationTaskList } from '../hooks'
 
-jest.mock('../hooks')
-
-const mockUseCalibrationTaskList = useCalibrationTaskList as jest.MockedFunction<
-  typeof useCalibrationTaskList
->
+vi.mock('../hooks')
 
 const render = (
   props: React.ComponentProps<typeof CalibrationStatusBanner>
@@ -29,55 +28,59 @@ describe('CalibrationStatusBanner', () => {
   beforeEach(() => {
     props = { robotName: 'otie' }
   })
-  afterEach(() => {
-    jest.resetAllMocks()
-  })
+
   it('should render null if status is complete', () => {
-    mockUseCalibrationTaskList.mockReturnValue({
+    vi.mocked(useCalibrationTaskList).mockReturnValue({
       activeIndex: null,
       taskList: [],
       taskListStatus: 'complete',
       isLoading: false,
     })
-    const { queryByText, queryByRole } = render(props)
-    expect(queryByText('Recalibration recommended')).toBeNull()
-    expect(queryByText('Robot is missing calibration data')).toBeNull()
-    expect(queryByRole('link', { name: 'Go to calibration' })).toBeNull()
+    render(props)
+    expect(screen.queryByText('Recalibration recommended')).toBeNull()
+    expect(screen.queryByText('Robot is missing calibration data')).toBeNull()
+    expect(screen.queryByRole('link', { name: 'Go to calibration' })).toBeNull()
   })
   it('should render null if loading', () => {
-    mockUseCalibrationTaskList.mockReturnValue({
+    vi.mocked(useCalibrationTaskList).mockReturnValue({
       activeIndex: null,
       taskList: [],
       taskListStatus: 'complete',
       isLoading: true,
     })
-    const { queryByText, queryByRole } = render(props)
-    expect(queryByText('Recalibration recommended')).toBeNull()
-    expect(queryByText('Robot is missing calibration data')).toBeNull()
-    expect(queryByRole('link', { name: 'Go to calibration' })).toBeNull()
+    render(props)
+    expect(screen.queryByText('Recalibration recommended')).toBeNull()
+    expect(screen.queryByText('Robot is missing calibration data')).toBeNull()
+    expect(screen.queryByRole('link', { name: 'Go to calibration' })).toBeNull()
   })
   it('should render recalibration recommended if status bad', () => {
-    mockUseCalibrationTaskList.mockReturnValue({
+    vi.mocked(useCalibrationTaskList).mockReturnValue({
       activeIndex: null,
       taskList: [],
       taskListStatus: 'bad',
       isLoading: false,
     })
-    const { getByText, queryByText, getByRole } = render(props)
-    expect(getByText('Recalibration recommended')).toBeInTheDocument()
-    expect(queryByText('Robot is missing calibration data')).toBeNull()
-    expect(getByRole('link', { name: 'Go to calibration' })).toBeInTheDocument()
+    render(props)
+    expect(screen.getByText('Recalibration recommended')).toBeInTheDocument()
+    expect(screen.queryByText('Robot is missing calibration data')).toBeNull()
+    expect(
+      screen.getByRole('link', { name: 'Go to calibration' })
+    ).toBeInTheDocument()
   })
   it('should render calibration required if status bad', () => {
-    mockUseCalibrationTaskList.mockReturnValue({
+    vi.mocked(useCalibrationTaskList).mockReturnValue({
       activeIndex: null,
       taskList: [],
       taskListStatus: 'incomplete',
       isLoading: false,
     })
-    const { getByText, queryByText, getByRole } = render(props)
-    expect(getByText('Robot is missing calibration data')).toBeInTheDocument()
-    expect(queryByText('Recalibration recommended')).toBeNull()
-    expect(getByRole('link', { name: 'Go to calibration' })).toBeInTheDocument()
+    render(props)
+    expect(
+      screen.getByText('Robot is missing calibration data')
+    ).toBeInTheDocument()
+    expect(screen.queryByText('Recalibration recommended')).toBeNull()
+    expect(
+      screen.getByRole('link', { name: 'Go to calibration' })
+    ).toBeInTheDocument()
   })
 })

app/src/organisms/Devices/__tests__/ConnectionTroubleshootingModal.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
-import { fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../i18n'
 import { ConnectionTroubleshootingModal } from '../ConnectionTroubleshootingModal'
 
@@ -16,33 +18,37 @@ describe('ConnectionTroubleshootingModal', () => {
   let props: React.ComponentProps<typeof ConnectionTroubleshootingModal>
   beforeEach(() => {
     props = {
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     }
   })
   it('should render correct text', () => {
-    const { getByText, getByRole } = render(props)
-    getByText('Why is this robot unavailable?')
-    getByText(
+    render(props)
+    screen.getByText('Why is this robot unavailable?')
+    screen.getByText(
       'If you’re having trouble with the robot’s connection, try these troubleshooting tasks. First, double check that the robot is powered on.'
     )
-    getByText('Wait for a minute after connecting the robot to the computer')
-    getByText('Make sure the robot is connected to this computer')
-    getByText('If connecting wirelessly:')
-    getByText('Check that the computer and robot are on the same network')
-    getByText('If connecting via USB:')
-    getByText('If you’re still having issues:')
-    getByText('Restart the robot')
-    getByText('Restart the app')
-    getByText(
+    screen.getByText(
+      'Wait for a minute after connecting the robot to the computer'
+    )
+    screen.getByText('Make sure the robot is connected to this computer')
+    screen.getByText('If connecting wirelessly:')
+    screen.getByText(
+      'Check that the computer and robot are on the same network'
+    )
+    screen.getByText('If connecting via USB:')
+    screen.getByText('If you’re still having issues:')
+    screen.getByText('Restart the robot')
+    screen.getByText('Restart the app')
+    screen.getByText(
       'If none of these work, contact Opentrons Support for help (via the question mark link in this app, or by emailing [email protected].)'
     )
-    getByRole('link', {
+    screen.getByRole('link', {
       name: 'Learn more about troubleshooting connection problems',
     })
   })
   it('should render button and button is clickable', () => {
-    const { getByRole } = render(props)
-    const btn = getByRole('button', { name: 'close' })
+    render(props)
+    const btn = screen.getByRole('button', { name: 'close' })
     fireEvent.click(btn)
     expect(props.onClose).toHaveBeenCalled()
   })

app/src/organisms/Devices/__tests__/DevicesEmptyState.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, expect, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 
 import { i18n } from '../../../i18n'
 import { startDiscovery } from '../../../redux/discovery'
@@ -9,11 +11,7 @@ import {
   TROUBLESHOOTING_CONNECTION_PROBLEMS_URL,
 } from '../DevicesEmptyState'
 
-jest.mock('../../../redux/discovery')
-
-const mockStartDiscovery = startDiscovery as jest.MockedFunction<
-  typeof startDiscovery
->
+vi.mock('../../../redux/discovery')
 
 const render = () => {
   return renderWithProviders(<DevicesEmptyState />, {
@@ -23,25 +21,25 @@ const render = () => {
 
 describe('DevicesEmptyState', () => {
   it('renders a "No robots found" message', () => {
-    const [{ getByText }] = render()
+    render()
 
-    getByText('No robots found')
+    screen.getByText('No robots found')
   })
 
   it('renders a refresh button that scans for robots', () => {
-    const [{ getByRole }] = render()
+    render()
 
-    const refreshButton = getByRole('button', {
+    const refreshButton = screen.getByRole('button', {
       name: 'Refresh',
     })
     fireEvent.click(refreshButton)
-    expect(mockStartDiscovery).toBeCalled()
+    expect(startDiscovery).toBeCalled()
   })
 
   it('link to support documents', () => {
-    const [{ getByRole }] = render()
+    render()
 
-    const troubleshootingLink = getByRole('link', {
+    const troubleshootingLink = screen.getByRole('link', {
       name: 'Learn more about troubleshooting connection problems',
     })
     expect(troubleshootingLink.getAttribute('href')).toBe(

app/src/organisms/Devices/__tests__/EstopBanner.test.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-
-import { renderWithProviders } from '@opentrons/components'
-
+import { screen } from '@testing-library/react'
+import { describe, it, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { EstopBanner } from '../EstopBanner'
 
@@ -17,20 +18,20 @@ describe('EstopBanner', () => {
   })
 
   it('should render text and call a mock function when tapping text button - estop physicallyEngaged', () => {
-    const [{ getByText }] = render(props)
-    getByText('E-stop pressed. Robot movement is halted.')
-    getByText('Reset E-stop')
+    render(props)
+    screen.getByText('E-stop pressed. Robot movement is halted.')
+    screen.getByText('Reset E-stop')
   })
   it('should render text and call a mock function when tapping text button - estop logicallyEngaged', () => {
     props.status = 'logicallyEngaged'
-    const [{ getByText }] = render(props)
-    getByText('E-stop disengaged, but robot operation still halted.')
-    getByText('Resume operation')
+    render(props)
+    screen.getByText('E-stop disengaged, but robot operation still halted.')
+    screen.getByText('Resume operation')
   })
   it('should render text and call a mock function when tapping text button - estop notPresent', () => {
     props.status = 'notPresent'
-    const [{ getByText }] = render(props)
-    getByText('E-stop disconnected. Robot movement is halted.')
-    getByText('Resume operation')
+    render(props)
+    screen.getByText('E-stop disconnected. Robot movement is halted.')
+    screen.getByText('Resume operation')
   })
 })