Merge branch 'protocol_designer-migrate-webpack-to-vite' of github.co…

…m:Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

Makefile

@@ -256,7 +256,7 @@ circular-dependencies-js:
 
 .PHONY: test-js-internal
 test-js-internal:
-	yarn jest $(tests) $(test_opts) $(cov_opts)
+	yarn vitest $(tests) $(test_opts) $(cov_opts)
 
 .PHONY: test-js-%
 test-js-%: 

app-shell/src/config/actions.ts

@@ -75,6 +75,12 @@ import {
   USB_HTTP_REQUESTS_STOP,
   VALUE_UPDATED,
   VIEW_PROTOCOL_SOURCE_FOLDER,
+  NOTIFY_SUBSCRIBE,
+  NOTIFY_UNSUBSCRIBE,
+  ROBOT_MASS_STORAGE_DEVICE_ADDED,
+  ROBOT_MASS_STORAGE_DEVICE_ENUMERATED,
+  ROBOT_MASS_STORAGE_DEVICE_REMOVED,
+  UPDATE_BRIGHTNESS,
 } from '../constants'
 import type {
   InitializedAction,
@@ -102,14 +108,6 @@ import type {
   UpdateBrightnessAction,
   UsbRequestsAction,
 } from '@opentrons/app/src/redux/shell/types'
-import type {
-  NOTIFY_SUBSCRIBE,
-  NOTIFY_UNSUBSCRIBE,
-  ROBOT_MASS_STORAGE_DEVICE_ADDED,
-  ROBOT_MASS_STORAGE_DEVICE_ENUMERATED,
-  ROBOT_MASS_STORAGE_DEVICE_REMOVED,
-  UPDATE_BRIGHTNESS,
-} from '@opentrons/app/src/redux/shell/actions'
 
 // config file has been initialized
 export const configInitialized = (config: Config): ConfigInitializedAction => ({

app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { COLORS, SPACING } from '@opentrons/components'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { ModuleIcon } from '../'

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

@@ -1,21 +1,23 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
-import fixture_adapter from '@opentrons/shared-data/labware/definitions/2/opentrons_96_pcr_adapter/1.json'
-import fixture_96_wellplate from '@opentrons/shared-data/labware/definitions/2/opentrons_96_wellplate_200ul_pcr_full_skirt/1.json'
+
+import { opentrons96PcrAdapterV1, fixture96Plate } from '@opentrons/shared-data'
+
 import { i18n } from '../../../i18n'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { getIsLabwareOffsetCodeSnippetsOn } from '../../../redux/config'
 import { getLabwareDefinitionsFromCommands } from '../../LabwarePositionCheck/utils/labware'
 import { ApplyHistoricOffsets } from '..'
+
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis'
 
 vi.mock('../../../redux/config')
 vi.mock('../../LabwarePositionCheck/utils/labware')
 
-const mockLabwareDef = fixture_96_wellplate as LabwareDefinition2
-const mockAdapterDef = fixture_adapter as LabwareDefinition2
+const mockLabwareDef = fixture96Plate as LabwareDefinition2
+const mockAdapterDef = opentrons96PcrAdapterV1 as LabwareDefinition2
 
 const mockFirstCandidate: OffsetCandidate = {
   id: 'first_offset_id',
@@ -59,7 +61,7 @@ const mockFourthCandidate: OffsetCandidate = {
 }
 
 describe('ApplyHistoricOffsets', () => {
-  const mockSetShouldApplyOffsets = jest.fn()
+  const mockSetShouldApplyOffsets = vi.fn()
   const render = (
     props?: Partial<React.ComponentProps<typeof ApplyHistoricOffsets>>
   ) =>

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
 
@@ -11,7 +12,6 @@ import { mockTipLengthCalibrationSessionAttributes } from '../../../redux/sessio
 
 import { CalibrateTipLength } from '../index'
 import type { TipLengthCalibrationStep } from '../../../redux/sessions/types'
-import { fireEvent, screen } from '@testing-library/react'
 
 vi.mock('@opentrons/shared-data', async importOriginal => {
   const actual = await importOriginal<typeof getDeckDefinitions>()

app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
+import { vi, it, describe, expect } from 'vitest'
+
 import { getDeckDefinitions } from '@opentrons/shared-data'
-import { vi, it, describe, expect, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
@@ -15,17 +16,14 @@ import * as Sessions from '../../../redux/sessions'
 import { DeckSetup } from '../DeckSetup'
 
 vi.mock('../../../assets/labware/getLabware')
-vi.mock('@opentrons/shared-data')
-vi.mock(
-  '@opentrons/components/src/hardware-sim/Deck/RobotWorkSpace',
-  async importOriginal => {
-    const actual = (await importOriginal()) as any
-    return {
-      ...actual,
-      RobotWorkSpace: () => <></>,
-    }
+vi.mock('@opentrons/shared-data', async importOriginal => {
+  const actual = await importOriginal<typeof getDeckDefinitions>()
+  return {
+    ...actual,
+    getDeckDefinitions: () => vi.fn(),
   }
-)
+})
+vi.mock('@opentrons/components/src/hardware-sim/Deck/RobotWorkSpace')
 
 describe('DeckSetup', () => {
   const mockSendCommands = vi.fn()
@@ -61,10 +59,6 @@ describe('DeckSetup', () => {
     )
   }
 
-  beforeEach(() => {
-    vi.mocked(getDeckDefinitions).mockReturnValue({})
-  })
-
   it('clicking continue proceeds to next step', () => {
     render()
     fireEvent.click(screen.getByRole('button', { name: 'Confirm placement' }))

app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx

@@ -23,10 +23,10 @@ export function DeckConfigurationDiscardChangesModal({
   setShowConfirmationModal,
 }: DeckConfigurationDiscardChangesModalProps): JSX.Element {
   const { t } = useTranslation('device_details')
+  const history = useHistory()
   const modalHeader: ModalHeaderBaseProps = {
     title: t('changes_will_be_lost'),
   }
-  const history = useHistory()
 
   const handleDiscard = (): void => {
     setShowConfirmationModal(false)

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

@@ -1,22 +1,20 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { useHistory } from 'react-router-dom'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
 
-import type * as ReactRouterDom from 'react-router-dom'
-
 const mockFunc = vi.fn()
 const mockGoBack = vi.fn()
-const mockPush = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
-  const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
+  const actual = await importOriginal<typeof useHistory>()
   return {
-    ...reactRouterDom,
-    useHistory: () => ({ push: mockPush } as any),
+    ...actual,
+    useHistory: () => ({ goBack: mockGoBack }),
   }
 })
 

app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/getNestedLabwareInfo.test.tsx

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest'
 import { mockDefinition } from '../../../../../redux/custom-labware/__fixtures__'
 import { getNestedLabwareInfo } from '../getNestedLabwareInfo'
 import type { RunTimeCommand } from '@opentrons/shared-data'

app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/utils.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest'
 import { getLatestCurrentOffsets } from '../utils'
 import type { LabwareOffset } from '@opentrons/api-client'
 

app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
+
+import { SPACING, COLORS } from '@opentrons/components'
+
 import {
   nestedTextMatcher,
   renderWithProviders,
-  SPACING,
-  COLORS,
-} from '@opentrons/components'
+} from '../../../../../__testing-utils__'
 import { i18n } from '../../../../../i18n'
 import {
   useTrackEvent,
@@ -14,29 +16,25 @@ import {
 import { getIsOnDevice } from '../../../../../redux/config'
 import { LiquidDetailCard } from '../LiquidDetailCard'
 
-jest.mock('../../../../../redux/analytics')
-jest.mock('../../../../../redux/config')
+import { Mock } from 'vitest'
+
+vi.mock('../../../../../redux/analytics')
+vi.mock('../../../../../redux/config')
 
-const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
-  typeof useTrackEvent
->
-const mockGetIsOnDevice = getIsOnDevice as jest.MockedFunction<
-  typeof getIsOnDevice
->
 const render = (props: React.ComponentProps<typeof LiquidDetailCard>) => {
   return renderWithProviders(<LiquidDetailCard {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
-let mockTrackEvent: jest.Mock
+let mockTrackEvent: Mock
 
 describe('LiquidDetailCard', () => {
   let props: React.ComponentProps<typeof LiquidDetailCard>
 
   beforeEach(() => {
-    mockTrackEvent = jest.fn()
-    mockUseTrackEvent.mockReturnValue(mockTrackEvent)
-    mockGetIsOnDevice.mockReturnValue(false)
+    mockTrackEvent = vi.fn()
+    vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent)
+    vi.mocked(getIsOnDevice).mockReturnValue(false)
     props = {
       liquidId: '0',
       displayName: 'Mock Liquid',
@@ -48,51 +46,53 @@ describe('LiquidDetailCard', () => {
         ['A2', 'B2', 'C2', 'D2'],
         ['A3', 'B3', 'C3', 'D3'],
       ],
-      setSelectedValue: jest.fn(),
+      setSelectedValue: vi.fn(),
       selectedValue: '2',
     }
   })
 
   it('renders liquid name, description, total volume', () => {
-    const { getByText, getAllByText } = render(props)
-    getByText('Mock Liquid')
-    getByText('Mock Description')
-    getAllByText(nestedTextMatcher('100 µL'))
+    render(props)
+    screen.getByText('Mock Liquid')
+    screen.getByText('Mock Description')
+    screen.getAllByText(nestedTextMatcher('100 µL'))
   })
+
   it('renders clickable box, clicking on it calls track event', () => {
-    const { getByTestId } = render(props)
-    fireEvent.click(getByTestId('LiquidDetailCard_box'))
+    render(props)
+    fireEvent.click(screen.getByTestId('LiquidDetailCard_box'))
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_HIGHLIGHT_LIQUID_IN_DETAIL_MODAL,
       properties: {},
     })
   })
+
   it('renders well volume information if selected', () => {
-    const { getByText, getAllByText } = render({
+    render({
       ...props,
       selectedValue: '0',
     })
-    getByText('A1')
-    getByText('B1')
-    getAllByText(nestedTextMatcher('50 µL'))
+    screen.getByText('A1')
+    screen.getByText('B1')
+    screen.getAllByText(nestedTextMatcher('50 µL'))
   })
   it('renders well range for volume info if selected', () => {
-    const { getByText } = render({
+    render({
       ...props,
       selectedValue: '0',
       volumeByWell: { A1: 50, B1: 50, C1: 50, D1: 50 },
     })
-    getByText('A1: D1')
-    getByText(nestedTextMatcher('50 µL'))
+    screen.getByText('A1: D1')
+    screen.getByText(nestedTextMatcher('50 µL'))
   })
   it('renders liquid name, description, total volume for odd, and clicking item selects the box', () => {
-    mockGetIsOnDevice.mockReturnValue(true)
-    const { getByText, getAllByText, getByLabelText } = render(props)
-    getByText('Mock Liquid')
-    getByText('Mock Description')
-    getAllByText(nestedTextMatcher('100 µL'))
-    getAllByText(nestedTextMatcher('total volume'))
-    expect(getByLabelText('liquidBox_odd')).toHaveStyle(
+    vi.mocked(getIsOnDevice).mockReturnValue(true)
+    render(props)
+    screen.getByText('Mock Liquid')
+    screen.getByText('Mock Description')
+    screen.getAllByText(nestedTextMatcher('100 µL'))
+    screen.getAllByText(nestedTextMatcher('total volume'))
+    expect(screen.getByLabelText('liquidBox_odd')).toHaveStyle(
       `border: ${SPACING.spacing4} solid ${COLORS.grey30}`
     )
   })