update tests that are in L* for vitest migration

app/src/organisms/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx

@@ -67,33 +67,33 @@ describe('CustomLabwareOverflowMenu', () => {
     screen.getByRole('button', { name: 'Delete' })
   })
 
-  it('should call a mock function when canceling delete a labware definition', () => {
+  it('should call a mock function when canceling delete a labware definition', async () => {
     render(props)
     fireEvent.click(screen.getByLabelText('CustomLabwareOverflowMenu_button'))
     fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
-    screen.getByText('Delete this labware definition?')
-    screen.getByText(
+    await screen.getByText('Delete this labware definition?')
+    await screen.getByText(
       'This labware definition will be moved to this computer’s trash and may be unrecoverable.'
     )
-    screen.getByText(
+    await screen.getByText(
       'Robots cannot run Python protocols with missing labware definitions.'
     )
     fireEvent.click(screen.getByText('cancel'))
     expect(mockCancel).toHaveBeenCalled()
   })
 
-  it('should call a mock function when deleting a labware definition', () => {
+  it('should call a mock function when deleting a labware definition', async () => {
     render(props)
     fireEvent.click(screen.getByLabelText('CustomLabwareOverflowMenu_button'))
     fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
-    // screen.getByText('Delete this labware definition?')
-    // screen.getByText(
-    //   'This labware definition will be moved to this computer’s trash and may be unrecoverable.'
-    // )
-    // screen.getByText(
-    //   'Robots cannot run Python protocols with missing labware definitions.'
-    // )
-    // fireEvent.click(screen.getByText('Yes, delete definition'))
-    // expect(mockConfirm).toHaveBeenCalled()
+    await screen.getByText('Delete this labware definition?')
+    await screen.getByText(
+      'This labware definition will be moved to this computer’s trash and may be unrecoverable.'
+    )
+    await screen.getByText(
+      'Robots cannot run Python protocols with missing labware definitions.'
+    )
+    fireEvent.click(screen.getByText('Yes, delete definition'))
+    expect(mockConfirm).toHaveBeenCalled()
   })
 })

app/src/organisms/LabwareCard/__tests__/LabwareCard.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { screen } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, vi, beforeEach } from 'vitest'
 import {
   renderWithProviders,
   nestedTextMatcher,

app/src/organisms/LabwareDetails/StyledComponents/__tests__/ExpandingTitle.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderWithProviders, getFootprintDiagram } from '@opentrons/components'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { getFootprintDiagram } from '@opentrons/components'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { ExpandingTitle } from '../ExpandingTitle'
 
 const render = (props: React.ComponentProps<typeof ExpandingTitle>) => {
@@ -20,20 +22,20 @@ describe('ExpandingTitle', () => {
   })
 
   it('renders correct label and button but does not render diagram initially', () => {
-    const [{ getByText, getByRole, queryByTestId }] = render(props)
+    render(props)
 
-    getByText('Title')
-    getByRole('button')
-    expect(queryByTestId(DIAGRAM_TEST_ID)).not.toBeInTheDocument()
+    screen.getByText('Title')
+    screen.getByRole('button')
+    expect(screen.queryByTestId(DIAGRAM_TEST_ID)).not.toBeInTheDocument()
   })
 
   it('toggles rendering of diagram when button is clicked', () => {
-    const [{ getByRole, getByTestId, queryByTestId }] = render(props)
+    render(props)
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
     fireEvent.click(button)
-    getByTestId(DIAGRAM_TEST_ID)
+    screen.getByTestId(DIAGRAM_TEST_ID)
     fireEvent.click(button)
-    expect(queryByTestId(DIAGRAM_TEST_ID)).not.toBeInTheDocument()
+    expect(screen.queryByTestId(DIAGRAM_TEST_ID)).not.toBeInTheDocument()
   })
 })

app/src/organisms/LabwareDetails/StyledComponents/__tests__/LabeledValue.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { screen } from '@testing-library/react'
+import { describe, it, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { LabeledValue } from '../LabeledValue'
 
 const render = (props: React.ComponentProps<typeof LabeledValue>) => {
@@ -16,21 +18,21 @@ describe('LabeledValue', () => {
   })
 
   it('renders correct label heading', () => {
-    const [{ getByRole }] = render(props)
+    render(props)
 
-    getByRole('heading', { name: 'height' })
+    screen.getByRole('heading', { name: 'height' })
   })
 
   it('renders correct value when value is a string', () => {
-    const [{ getByText }] = render(props)
+    render(props)
 
-    getByText('42')
+    screen.getByText('42')
   })
 
   it('renders correct value when value is a number', () => {
     props.value = 43
-    const [{ getByText }] = render(props)
+    render(props)
 
-    getByText('43')
+    screen.getByText('43')
   })
 })

app/src/organisms/LabwareDetails/__tests__/Dimensions.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { screen } from '@testing-library/react'
+import { describe, it, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { mockDefinition } from '../../../redux/custom-labware/__fixtures__'
 import { Dimensions } from '../Dimensions'
@@ -19,11 +21,10 @@ describe('Dimensions', () => {
   })
 
   it('renders correct label and headings', () => {
-    const [{ getByText, getByRole }] = render(props)
-
-    getByText('Footprint (mm)')
-    getByRole('heading', { name: 'height' })
-    getByRole('heading', { name: 'width' })
-    getByRole('heading', { name: 'length' })
+    render(props)
+    screen.getByText('Footprint (mm)')
+    screen.getByRole('heading', { name: 'height' })
+    screen.getByRole('heading', { name: 'width' })
+    screen.getByRole('heading', { name: 'length' })
   })
 })

app/src/organisms/LabwareDetails/__tests__/Gallery.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { mockDefinition } from '../../../redux/custom-labware/__fixtures__'
 import { labwareImages } from '../labware-images'
 import { Gallery } from '../Gallery'
-import { fireEvent } from '@testing-library/react'
 
 const render = (props: React.ComponentProps<typeof Gallery>) => {
   return renderWithProviders(<Gallery {...props} />)
@@ -22,33 +23,31 @@ describe('Gallery', () => {
     labwareImages.mock_definition = []
     const [{ getByTestId, queryAllByTestId }] = render(props)
 
-    getByTestId('gallery_main_svg')
+    screen.getByTestId('gallery_main_svg')
     expect(queryAllByTestId('gallery_mini_image')).toHaveLength(0)
   })
 
   it('renders one main SVG and two mini images if definition contains one image', () => {
     const [{ getByTestId, queryAllByTestId }] = render(props)
 
-    getByTestId('gallery_main_svg')
+    screen.getByTestId('gallery_main_svg')
     expect(queryAllByTestId('gallery_mini_image')).toHaveLength(2)
   })
 
   it('renders image in main image when mini image is clicked', () => {
-    const [{ getAllByRole, queryAllByTestId }] = render(props)
-
-    let images = getAllByRole('img')
+    render(props)
+    let images = screen.getAllByRole('img')
     expect(images).toHaveLength(1)
-    const miniImages = queryAllByTestId('gallery_mini_image')
+    const miniImages = screen.queryAllByTestId('gallery_mini_image')
     fireEvent.click(miniImages[1])
-    images = getAllByRole('img')
+    images = screen.getAllByRole('img')
     expect(images).toHaveLength(2)
   })
 
   it('renders one main SVG and three mini images if definition contains two images', () => {
     labwareImages.mock_definition = ['image1', 'image2']
-    const [{ getByTestId, queryAllByTestId }] = render(props)
-
-    getByTestId('gallery_main_svg')
-    expect(queryAllByTestId('gallery_mini_image')).toHaveLength(3)
+    render(props)
+    screen.getByTestId('gallery_main_svg')
+    expect(screen.queryAllByTestId('gallery_mini_image')).toHaveLength(3)
   })
 })

app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { useAllLabware } from '../../../pages/Labware/hooks'
 import { mockOpentronsLabwareDetailsDefinition } from '../../../redux/custom-labware/__fixtures__'
@@ -16,35 +17,15 @@ import { WellSpacing } from '../WellSpacing'
 
 import { LabwareDetails } from '..'
 
-jest.mock('../../../pages/Labware/hooks')
-jest.mock('../../LabwareCard/CustomLabwareOverflowMenu')
-jest.mock('../Dimensions')
-jest.mock('../Gallery')
-jest.mock('../ManufacturerDetails')
-jest.mock('../WellProperties')
-jest.mock('../WellCount')
-jest.mock('../WellDimensions')
-jest.mock('../WellSpacing')
-
-const mockCustomLabwareOverflowMenu = CustomLabwareOverflowMenu as jest.MockedFunction<
-  typeof CustomLabwareOverflowMenu
->
-const mockDimensions = Dimensions as jest.MockedFunction<typeof Dimensions>
-const mockGallery = Gallery as jest.MockedFunction<typeof Gallery>
-const mockManufacturerDetails = ManufacturerDetails as jest.MockedFunction<
-  typeof ManufacturerDetails
->
-const mockUseAllLabware = useAllLabware as jest.MockedFunction<
-  typeof useAllLabware
->
-const mockWellCount = WellCount as jest.MockedFunction<typeof WellCount>
-const mockWellProperties = WellProperties as jest.MockedFunction<
-  typeof WellProperties
->
-const mockWellDimensions = WellDimensions as jest.MockedFunction<
-  typeof WellDimensions
->
-const mockWellSpacing = WellSpacing as jest.MockedFunction<typeof WellSpacing>
+vi.mock('../../../pages/Labware/hooks')
+vi.mock('../../LabwareCard/CustomLabwareOverflowMenu')
+vi.mock('../Dimensions')
+vi.mock('../Gallery')
+vi.mock('../ManufacturerDetails')
+vi.mock('../WellProperties')
+vi.mock('../WellCount')
+vi.mock('../WellDimensions')
+vi.mock('../WellSpacing')
 
 const render = (
   props: React.ComponentProps<typeof LabwareDetails>
@@ -57,43 +38,46 @@ const render = (
 describe('LabwareDetails', () => {
   let props: React.ComponentProps<typeof LabwareDetails>
   beforeEach(() => {
-    mockCustomLabwareOverflowMenu.mockReturnValue(
+    vi.mocked(CustomLabwareOverflowMenu).mockReturnValue(
       <div>Mock CustomLabwareOverflowMenu</div>
     )
-    mockUseAllLabware.mockReturnValue([
+    vi.mocked(useAllLabware).mockReturnValue([
       { definition: mockOpentronsLabwareDetailsDefinition },
     ])
-    mockDimensions.mockReturnValue(<div>Mock Dimensions</div>)
-    mockGallery.mockReturnValue(<div>Mock Gallery</div>)
-    mockManufacturerDetails.mockReturnValue(<div>Mock ManufacturerDetails</div>)
-    mockWellCount.mockReturnValue(<div>Mock WellCount</div>)
-    mockWellProperties.mockReturnValue(<div>Mock WellProperties</div>)
-    mockWellDimensions.mockReturnValue(<div>Mock WellDimensions</div>)
-    mockWellSpacing.mockReturnValue(<div>Mock WellSpacing</div>)
+    vi.mocked(Dimensions).mockReturnValue(<div>Mock Dimensions</div>)
+    vi.mocked(Gallery).mockReturnValue(<div>Mock Gallery</div>)
+    vi.mocked(ManufacturerDetails).mockReturnValue(
+      <div>Mock ManufacturerDetails</div>
+    )
+    vi.mocked(WellCount).mockReturnValue(<div>Mock WellCount</div>)
+    vi.mocked(WellProperties).mockReturnValue(<div>Mock WellProperties</div>)
+    vi.mocked(WellDimensions).mockReturnValue(<div>Mock WellDimensions</div>)
+    vi.mocked(WellSpacing).mockReturnValue(<div>Mock WellSpacing</div>)
+
     props = {
       labware: {
         definition: mockOpentronsLabwareDetailsDefinition,
       },
-      onClose: jest.fn(),
+      onClose: vi.fn(),
     }
   })
 
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
   it('should render correct info for opentrons labware', () => {
-    const [{ getByText }] = render(props)
-    getByText('Mock Definition')
-    getByText('Opentrons Definition')
-    getByText('API Name')
-    getByText('mock_definition')
-    getByText('Mock Dimensions')
-    getByText('Mock Gallery')
-    getByText('Mock ManufacturerDetails')
-    getByText('Mock WellCount')
-    getByText('Mock WellProperties')
-    getByText('Mock WellDimensions')
-    getByText('Mock WellSpacing')
+    render(props)
+    screen.getByText('Mock Definition')
+    screen.getByText('Opentrons Definition')
+    screen.getByText('API Name')
+    screen.getByText('mock_definition')
+    screen.getByText('Mock Dimensions')
+    screen.getByText('Mock Gallery')
+    screen.getByText('Mock ManufacturerDetails')
+    screen.getByText('Mock WellCount')
+    screen.getByText('Mock WellProperties')
+    screen.getByText('Mock WellDimensions')
+    screen.getByText('Mock WellSpacing')
   })
 
   it('should no render Mock Well Dimensions, if a labware does not have groupMetaData', () => {

app/src/organisms/LabwareDetails/__tests__/ManufacturerDetails.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { ManufacturerDetails } from '../ManufacturerDetails'
 
@@ -18,28 +20,25 @@ describe('ManufacturerDetails', () => {
   })
 
   it('renders correct heading and manufacturerValue and no links or brandId when only brand is passed as prop', () => {
-    const [{ getByRole, getByText, queryByRole }] = render(props)
-
-    getByRole('heading', { name: 'manufacturer' })
-    getByText('Opentrons')
-    expect(queryByRole('link')).not.toBeInTheDocument()
+    render(props)
+    screen.getByRole('heading', { name: 'manufacturer' })
+    screen.getByText('Opentrons')
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
     expect(
-      queryByRole('heading', { name: 'manufacturer / catalog #' })
+      screen.queryByRole('heading', { name: 'manufacturer / catalog #' })
     ).not.toBeInTheDocument()
   })
 
   it('renders correct number of links', () => {
     props.brand.links = ['https://www.opentrons.com', 'https://www.test.com']
-    const [{ getAllByRole }] = render(props)
-
-    expect(getAllByRole('link', { name: 'website' })).toHaveLength(2)
+    render(props)
+    expect(screen.getAllByRole('link', { name: 'website' })).toHaveLength(2)
   })
 
   it('renders brandIds', () => {
     props.brand.brandId = ['mockId', 'mockId2']
-    const [{ getByRole, getByText }] = render(props)
-
-    getByRole('heading', { name: 'manufacturer / catalog #' })
-    getByText('mockId, mockId2')
+    render(props)
+    screen.getByRole('heading', { name: 'manufacturer / catalog #' })
+    screen.getByText('mockId, mockId2')
   })
 })