diff --git a/app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx b/app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx index 34d1d0e669f..c2c4162d5ae 100644 --- a/app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx +++ b/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 => { return renderWithProviders( @@ -41,64 +42,36 @@ const render = (): ReturnType => { ) } -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(
mock PreventRobotCaching
) - mockOT2AdvancedSettings.mockReturnValue(
mock OT2AdvancedSettings
) - mockEnableDevTools.mockReturnValue(
mock EnableDevTools
) - mockU2EInformation.mockReturnValue(
mock U2EInformation
) - mockShowLabwareOffsetSnippets.mockReturnValue( + vi.mocked(PreventRobotCaching).mockReturnValue( +
mock PreventRobotCaching
+ ) + vi.mocked(OT2AdvancedSettings).mockReturnValue( +
mock OT2AdvancedSettings
+ ) + vi.mocked(EnableDevTools).mockReturnValue(
mock EnableDevTools
) + vi.mocked(U2EInformation).mockReturnValue(
mock U2EInformation
) + vi.mocked(ShowLabwareOffsetSnippets).mockReturnValue(
mock ShowLabwareOffsetSnippets
) - mockClearUnavailableRobots.mockReturnValue( + vi.mocked(ClearUnavailableRobots).mockReturnValue(
mock ClearUnavailableRobots
) - mockOverridePathToPython.mockReturnValue( + vi.mocked(OverridePathToPython).mockReturnValue(
mock OverridePathToPython
) - mockShowHeaterShakerAttachmentModal.mockReturnValue( + vi.mocked(ShowHeaterShakerAttachmentModal).mockReturnValue(
mock ShowHeaterShakerAttachmentModal
) - mockUpdatedChannel.mockReturnValue(
mock UpdatedChannel
) - mockAdditionalCustomLabwareSourceFolder.mockReturnValue( + vi.mocked(UpdatedChannel).mockReturnValue(
mock UpdatedChannel
) + vi.mocked(AdditionalCustomLabwareSourceFolder).mockReturnValue(
mock AdditionalCustomLabwareSourceFolder
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render mock UpdatedChannel section', () => { diff --git a/app/src/pages/AppSettings/__test__/AppSettings.test.tsx b/app/src/pages/AppSettings/__test__/AppSettings.test.tsx index 4434c199c66..85b8d905a45 100644 --- a/app/src/pages/AppSettings/__test__/AppSettings.test.tsx +++ b/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 => { return renderWithProviders( @@ -48,14 +32,16 @@ const render = (path = '/'): ReturnType => { } describe('AppSettingsHeader', () => { beforeEach(() => { - getDevtoolsEnabled.mockReturnValue(false) - mockGeneralSettings.mockReturnValue(
Mock General Settings
) - mockPrivacySettings.mockReturnValue(
Mock Privacy Settings
) - mockAdvancedSettings.mockReturnValue(
Mock Advanced Settings
) - mockFeatureFlags.mockReturnValue(
Mock Feature Flags
) + vi.mocked(Config.getDevtoolsEnabled).mockReturnValue(false) + vi.mocked(GeneralSettings).mockReturnValue(
Mock General Settings
) + vi.mocked(PrivacySettings).mockReturnValue(
Mock Privacy Settings
) + vi.mocked(AdvancedSettings).mockReturnValue( +
Mock Advanced Settings
+ ) + vi.mocked(FeatureFlags).mockReturnValue(
Mock Feature Flags
) }) 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') }) diff --git a/app/src/pages/AppSettings/__test__/GeneralSettings.test.tsx b/app/src/pages/AppSettings/__test__/GeneralSettings.test.tsx index b33a6ca2e5a..7a3d7196858 100644 --- a/app/src/pages/AppSettings/__test__/GeneralSettings.test.tsx +++ b/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 => { return renderWithProviders( @@ -37,11 +28,11 @@ const render = (): ReturnType => { 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() }) diff --git a/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx index aa9dc7ed29a..9986a33ca5e 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx +++ b/app/src/pages/ConnectViaEthernet/__tests__/ConnectViaEthernet.test.tsx @@ -1,6 +1,7 @@ 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' @@ -8,10 +9,10 @@ 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 -const mockDisplayConnectionStatus = DisplayConnectionStatus as jest.MockedFunction< - typeof DisplayConnectionStatus -> -const mockGetNetworkInterfaces = Networking.getNetworkInterfaces as jest.MockedFunction< - typeof Networking.getNetworkInterfaces -> - const render = () => { return renderWithProviders( @@ -41,19 +34,19 @@ const render = () => { describe('ConnectViaEthernet', () => { beforeEach(() => { - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(Networking.getNetworkInterfaces).mockReturnValue({ wifi: null, ethernet: initialMockEthernet, }) - mockTitleHeader.mockReturnValue(
mock TitleHeader
) - mockDisplayConnectionStatus.mockReturnValue( + vi.mocked(TitleHeader).mockReturnValue(
mock TitleHeader
) + vi.mocked(DisplayConnectionStatus).mockReturnValue(
mock DisplayConnectionStatus
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render TitleHeader component and DisplayConnectionStatus component', () => { diff --git a/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx index ec4a2ad9680..7cf968314f7 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/DisplayConnectionStatus.test.tsx +++ b/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), } }) diff --git a/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx b/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx index 9d0d0a7c8ae..4e6415a1a2f 100644 --- a/app/src/pages/ConnectViaEthernet/__tests__/TitleHeader.test.tsx +++ b/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), } }) diff --git a/app/src/pages/ConnectViaUSB/_tests__/ConnectedViaUSB.test.tsx b/app/src/pages/ConnectViaUSB/_tests__/ConnectedViaUSB.test.tsx index 7dfe40e57fa..16bc9bb98bf 100644 --- a/app/src/pages/ConnectViaUSB/_tests__/ConnectedViaUSB.test.tsx +++ b/app/src/pages/ConnectViaUSB/_tests__/ConnectedViaUSB.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { useConnectionsQuery } from '@opentrons/react-api-client' import { i18n } from '../../../i18n' @@ -11,21 +11,18 @@ import { ConnectViaUSB } from '../../../pages/ConnectViaUSB' import type { UseQueryResult } from 'react-query' import type { ActiveConnections } from '@opentrons/api-client' +import type * as ReactRouterDom from 'react-router-dom' -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -jest.mock('@opentrons/react-api-client') - -const mockUseConnectionsQuery = useConnectionsQuery as jest.MockedFunction< - typeof useConnectionsQuery -> +vi.mock('@opentrons/react-api-client') const render = (): ReturnType => { return renderWithProviders( @@ -40,15 +37,12 @@ const render = (): ReturnType => { describe('ConnectViaUSB', () => { beforeEach(() => { - when(mockUseConnectionsQuery) - .calledWith() - .mockReturnValue(({ - data: { connections: [] }, - } as unknown) as UseQueryResult) + vi.mocked(useConnectionsQuery).mockReturnValue(({ + data: { connections: [] }, + } as unknown) as UseQueryResult) }) afterEach(() => { - jest.resetAllMocks() - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render no connection text, button, and image', () => { @@ -68,11 +62,9 @@ describe('ConnectViaUSB', () => { }) it('should render successful connection text and button', () => { - when(mockUseConnectionsQuery) - .calledWith() - .mockReturnValue(({ - data: { connections: [{ agent: 'com.opentrons.app.usb' }] }, - } as unknown) as UseQueryResult) + vi.mocked(useConnectionsQuery).mockReturnValue(({ + data: { connections: [{ agent: 'com.opentrons.app.usb' }] }, + } as unknown) as UseQueryResult) const [{ getByText }] = render() getByText('USB') getByText('Successfully connected!') @@ -83,11 +75,9 @@ describe('ConnectViaUSB', () => { }) it('should route to the rename robot page when tapping continue button', () => { - when(mockUseConnectionsQuery) - .calledWith() - .mockReturnValue(({ - data: { connections: [{ agent: 'com.opentrons.app.usb' }] }, - } as unknown) as UseQueryResult) + vi.mocked(useConnectionsQuery).mockReturnValue(({ + data: { connections: [{ agent: 'com.opentrons.app.usb' }] }, + } as unknown) as UseQueryResult) const [{ getByText }] = render() const button = getByText('Continue') fireEvent.click(button) diff --git a/app/src/pages/ConnectViaWifi/__tests__/ConnectViaWifi.test.tsx b/app/src/pages/ConnectViaWifi/__tests__/ConnectViaWifi.test.tsx index 2bda8a09681..cc9cc7f5275 100644 --- a/app/src/pages/ConnectViaWifi/__tests__/ConnectViaWifi.test.tsx +++ b/app/src/pages/ConnectViaWifi/__tests__/ConnectViaWifi.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import * as RobotApi from '../../../redux/robot-api' import * as Fixtures from '../../../redux/networking/__fixtures__' @@ -10,10 +11,10 @@ import { useWifiList } from '../../../resources/networking/hooks' import * as Networking from '../../../redux/networking' import { ConnectViaWifi } from '../../../pages/ConnectViaWifi' -jest.mock('../../../redux/discovery') -jest.mock('../../../resources/networking/hooks') -jest.mock('../../../redux/networking/selectors') -jest.mock('../../../redux/robot-api/selectors') +vi.mock('../../../redux/discovery') +vi.mock('../../../resources/networking/hooks') +vi.mock('../../../redux/networking/selectors') +vi.mock('../../../redux/robot-api/selectors') const mockWifiList = [ { ...Fixtures.mockWifiNetwork, ssid: 'foo', active: true }, @@ -31,13 +32,13 @@ const initialMockWifi = { type: Networking.INTERFACE_WIFI, } -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> -const mockUseWifiList = useWifiList as jest.MockedFunction -const mockGetNetworkInterfaces = Networking.getNetworkInterfaces as jest.MockedFunction< - typeof Networking.getNetworkInterfaces -> +// const mockGetRequestById = RobotApi.getRequestById as vi.MockedFunction< +// typeof RobotApi.getRequestById +// > +// const vi.mocked(useWifiList) = useWifiList as vi.MockedFunction +// const vi.mocked(Networking.etNetworkInterfaces) = Networking.Networking.etNetworkInterfaces as vi.MockedFunction< +// typeof Networking.Networking.etNetworkInterfaces +// > // ToDo (kj:05/16/2023) this test will be updated later // since this test requires to update the entire wifi setup flow @@ -55,11 +56,11 @@ const render = () => { describe('ConnectViaWifi', () => { beforeEach(() => { - mockGetRequestById.mockReturnValue(null) + vi.mocked(RobotApi.getRequestById).mockReturnValue(null) }) afterEach(() => { - jest.clearAllMocks() + vi.clearAllMocks() }) it('should render step meter 2/5 (width:40%)', () => { @@ -75,7 +76,7 @@ describe('ConnectViaWifi', () => { }) it('should render DisplayWifiList', () => { - mockUseWifiList.mockReturnValue(mockWifiList) + vi.mocked(useWifiList).mockReturnValue(mockWifiList) render() screen.getByText('foo') screen.getByText('bar') @@ -83,8 +84,8 @@ describe('ConnectViaWifi', () => { }) it('should render SelectAuthenticationType', () => { - mockUseWifiList.mockReturnValue(mockWifiList) - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(Networking.getNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) @@ -94,8 +95,8 @@ describe('ConnectViaWifi', () => { }) it('should render SetWifiCred', () => { - mockUseWifiList.mockReturnValue(mockWifiList) - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(Networking.getNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) @@ -106,12 +107,12 @@ describe('ConnectViaWifi', () => { }) it('should render ConnectingNetwork', () => { - mockUseWifiList.mockReturnValue(mockWifiList) - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(Networking.getNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) - mockGetRequestById.mockReturnValue({ + vi.mocked(RobotApi.getRequestById).mockReturnValue({ status: RobotApi.PENDING, }) render() @@ -123,8 +124,8 @@ describe('ConnectViaWifi', () => { /* ToDO (kj:05/25/2023) fix these later it('should render WifiConnectionDetails', () => { - mockUseWifiList.mockReturnValue(mockWifiList) - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(Networking.etNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) @@ -140,8 +141,8 @@ describe('ConnectViaWifi', () => { }) it('should render FailedToConnect', () => { - mockUseWifiList.mockReturnValue(mockWifiList) - mockGetNetworkInterfaces.mockReturnValue({ + vi.mocked(useWifiList).mockReturnValue(mockWifiList) + vi.mocked(Networking.etNetworkInterfaces).mockReturnValue({ wifi: initialMockWifi, ethernet: null, }) diff --git a/app/src/pages/DeckConfiguration/__tests__/DeckConfiguration.test.tsx b/app/src/pages/DeckConfiguration/__tests__/DeckConfiguration.test.tsx index 6e661dd5c28..79bfa476960 100644 --- a/app/src/pages/DeckConfiguration/__tests__/DeckConfiguration.test.tsx +++ b/app/src/pages/DeckConfiguration/__tests__/DeckConfiguration.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, expect, beforeEach } from 'vitest' + +import { DeckConfigurator } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' -import { DeckConfigurator, renderWithProviders } from '@opentrons/components' import { useDeckConfigurationQuery, useUpdateDeckConfigurationMutation, @@ -11,22 +13,30 @@ import { TRASH_BIN_ADAPTER_FIXTURE } from '@opentrons/shared-data' import { i18n } from '../../../i18n' import { DeckFixtureSetupInstructionsModal } from '../../../organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal' -import { DeckConfigurationDiscardChangesModal } from '../../../organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal' import { DeckConfigurationEditor } from '..' import type { UseQueryResult } from 'react-query' import type { DeckConfiguration } from '@opentrons/shared-data' import { fireEvent, screen } from '@testing-library/react' +import type * as Components from '@opentrons/components' +import type * as ReactRouterDom from 'react-router-dom' -const mockUpdateDeckConfiguration = jest.fn() -const mockGoBack = jest.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +const mockUpdateDeckConfiguration = vi.fn() +const mockGoBack = vi.fn() +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ goBack: mockGoBack } as any), } }) +vi.mock('@opentrons/components', async importOriginal => { + const actual = await importOriginal() + return { + ...actual, + DeckConfigurator: vi.fn(), + } +}) const mockDeckConfig = [ { @@ -35,31 +45,14 @@ const mockDeckConfig = [ }, ] -jest.mock('@opentrons/components/src/hardware-sim/DeckConfigurator/index') -jest.mock('@opentrons/react-api-client') -jest.mock( +vi.mock('@opentrons/react-api-client') +vi.mock( '../../../organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal' ) -jest.mock( +vi.mock( '../../../organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal' ) -const mockDeckFixtureSetupInstructionsModal = DeckFixtureSetupInstructionsModal as jest.MockedFunction< - typeof DeckFixtureSetupInstructionsModal -> -const mockDeckConfigurator = DeckConfigurator as jest.MockedFunction< - typeof DeckConfigurator -> -const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction< - typeof useDeckConfigurationQuery -> -const mockDeckConfigurationDiscardChangesModal = DeckConfigurationDiscardChangesModal as jest.MockedFunction< - typeof DeckConfigurationDiscardChangesModal -> -const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction< - typeof useUpdateDeckConfigurationMutation -> - const render = () => { return renderWithProviders( @@ -73,37 +66,26 @@ const render = () => { describe('DeckConfigurationEditor', () => { beforeEach(() => { - mockDeckFixtureSetupInstructionsModal.mockReturnValue( -
mock DeckFixtureSetupInstructionsModal
- ) - mockDeckConfigurator.mockReturnValue(
mock DeckConfigurator
) - when(mockUseDeckConfigurationQuery).mockReturnValue({ + vi.mocked(useDeckConfigurationQuery).mockReturnValue({ data: mockDeckConfig, } as UseQueryResult) - mockDeckConfigurationDiscardChangesModal.mockReturnValue( -
mock DeckConfigurationDiscardChangesModal
- ) - when(mockUseUpdateDeckConfigurationMutation).mockReturnValue({ + vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({ updateDeckConfiguration: mockUpdateDeckConfiguration, } as any) }) - afterEach(() => { - resetAllWhenMocks() - }) - it('should render text, button and DeckConfigurator', () => { render() screen.getByText('Deck configuration') screen.getByText('Setup Instructions') screen.getByText('Confirm') - screen.getByText('mock DeckConfigurator') + expect(vi.mocked(DeckConfigurator)).toHaveBeenCalled() }) - it('should display setup instructions modal when tapping setup instructions button', () => { + it('should display setup instructions modal when tapping setup instructions button', async () => { render() fireEvent.click(screen.getByText('Setup Instructions')) - screen.getByText('mock DeckFixtureSetupInstructionsModal') + expect(vi.mocked(DeckFixtureSetupInstructionsModal)).toHaveBeenCalled() }) it('should call a mock function when tapping confirm', () => { diff --git a/app/src/pages/Devices/CalibrationDashboard/__tests__/CalibrationDashboard.test.tsx b/app/src/pages/Devices/CalibrationDashboard/__tests__/CalibrationDashboard.test.tsx index 138aba0b679..325ed4997de 100644 --- a/app/src/pages/Devices/CalibrationDashboard/__tests__/CalibrationDashboard.test.tsx +++ b/app/src/pages/Devices/CalibrationDashboard/__tests__/CalibrationDashboard.test.tsx @@ -38,9 +38,13 @@ const render = (path = '/') => { describe('CalibrationDashboard', () => { beforeEach(() => { vi.mocked(useCalibrationTaskList).mockReturnValue(expectedTaskList) - vi.mocked(useDashboardCalibratePipOffset).mockReturnValue([() => { }, null]) - vi.mocked(useDashboardCalibrateTipLength).mockReturnValue([() => { }, null]) - vi.mocked(useDashboardCalibrateDeck).mockReturnValue([() => { }, null, false]) + vi.mocked(useDashboardCalibratePipOffset).mockReturnValue([() => {}, null]) + vi.mocked(useDashboardCalibrateTipLength).mockReturnValue([() => {}, null]) + vi.mocked(useDashboardCalibrateDeck).mockReturnValue([ + () => {}, + null, + false, + ]) vi.mocked(useAttachedPipettes).mockReturnValue({ left: mockLeftProtoPipette, right: null, diff --git a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx index c78a60fd963..6f3255d90c7 100644 --- a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx +++ b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetails.test.tsx @@ -1,11 +1,9 @@ import * as React from 'react' -import { resetAllWhenMocks, when } from 'jest-when' +import { vi, it, describe, expect, beforeEach } from 'vitest' +import { when } from 'vitest-when' import { MemoryRouter, Route } from 'react-router-dom' -import { - componentPropsMatcher, - renderWithProviders, -} from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { @@ -21,26 +19,11 @@ import { DeviceDetails } from '..' import type { State } from '../../../../redux/types' -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../organisms/Devices/InstrumentsAndModules') -jest.mock('../../../../organisms/Devices/RecentProtocolRuns') -jest.mock('../../../../organisms/Devices/RobotOverview') -jest.mock('../../../../redux/discovery') - -const mockUseSyncRobotClock = useSyncRobotClock as jest.MockedFunction< - typeof useSyncRobotClock -> -const mockUseRobot = useRobot as jest.MockedFunction -const mockRobotOverview = RobotOverview as jest.MockedFunction< - typeof RobotOverview -> -const mockInstrumentsAndModules = InstrumentsAndModules as jest.MockedFunction< - typeof InstrumentsAndModules -> -const mockRecentProtocolRuns = RecentProtocolRuns as jest.MockedFunction< - typeof RecentProtocolRuns -> -const mockGetScanning = getScanning as jest.MockedFunction +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../organisms/Devices/InstrumentsAndModules') +vi.mock('../../../../organisms/Devices/RecentProtocolRuns') +vi.mock('../../../../organisms/Devices/RobotOverview') +vi.mock('../../../../redux/discovery') const render = (path = '/') => { return renderWithProviders( @@ -58,22 +41,10 @@ const render = (path = '/') => { describe('DeviceDetails', () => { beforeEach(() => { - when(mockUseRobot).calledWith('otie').mockReturnValue(null) - when(mockRobotOverview) - .calledWith(componentPropsMatcher({ robotName: 'otie' })) - .mockReturnValue(
Mock RobotOverview
) - when(mockInstrumentsAndModules) - .calledWith(componentPropsMatcher({ robotName: 'otie' })) - .mockReturnValue(
Mock InstrumentsAndModules
) - when(mockRecentProtocolRuns) - .calledWith(componentPropsMatcher({ robotName: 'otie' })) - .mockReturnValue(
Mock RecentProtocolRuns
) - when(mockGetScanning) + when(useRobot).calledWith('otie').thenReturn(null) + when(getScanning) .calledWith({} as State) - .mockReturnValue(false) - }) - afterEach(() => { - resetAllWhenMocks() + .thenReturn(false) }) it('redirects to devices page when a robot is not found and not scanning', () => { @@ -83,35 +54,33 @@ describe('DeviceDetails', () => { }) it('renders null when a robot is not found and discovery client is scanning', () => { - when(mockGetScanning) + when(getScanning) .calledWith({} as State) - .mockReturnValue(true) - const [{ queryByText }] = render('/devices/otie') + .thenReturn(true) + render('/devices/otie') - expect(queryByText('Mock RobotOverview')).toBeNull() - expect(queryByText('Mock InstrumentsAndModules')).toBeNull() - expect(queryByText('Mock RecentProtocolRuns')).toBeNull() + expect(vi.mocked(RobotOverview)).not.toHaveBeenCalled() + expect(vi.mocked(InstrumentsAndModules)).not.toHaveBeenCalled() + expect(vi.mocked(RecentProtocolRuns)).not.toHaveBeenCalled() }) it('renders a RobotOverview when a robot is found and syncs clock', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockConnectableRobot) - const [{ getByText }] = render('/devices/otie') + when(useRobot).calledWith('otie').thenReturn(mockConnectableRobot) + render('/devices/otie') - getByText('Mock RobotOverview') - expect(mockUseSyncRobotClock).toHaveBeenCalledWith('otie') + expect(vi.mocked(RobotOverview)).toHaveBeenCalled() + expect(useSyncRobotClock).toHaveBeenCalledWith('otie') }) it('renders InstrumentsAndModules when a robot is found', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockConnectableRobot) - const [{ getByText }] = render('/devices/otie') - - getByText('Mock InstrumentsAndModules') + when(useRobot).calledWith('otie').thenReturn(mockConnectableRobot) + render('/devices/otie') + expect(vi.mocked(InstrumentsAndModules)).toHaveBeenCalled() }) it('renders RecentProtocolRuns when a robot is found', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockConnectableRobot) - const [{ getByText }] = render('/devices/otie') - - getByText('Mock RecentProtocolRuns') + when(useRobot).calledWith('otie').thenReturn(mockConnectableRobot) + render('/devices/otie') + expect(vi.mocked(RecentProtocolRuns)).toHaveBeenCalled() }) }) diff --git a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetailsComponent.test.tsx b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetailsComponent.test.tsx index 4ca21ca603b..00e0c1eff9f 100644 --- a/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetailsComponent.test.tsx +++ b/app/src/pages/Devices/DeviceDetails/__tests__/DeviceDetailsComponent.test.tsx @@ -1,10 +1,8 @@ import * as React from 'react' -import { resetAllWhenMocks, when } from 'jest-when' +import { vi, it, describe, expect, beforeEach } from 'vitest' +import { when } from 'vitest-when' -import { - componentPropsMatcher, - renderWithProviders, -} from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { useEstopQuery } from '@opentrons/react-api-client' import { i18n } from '../../../../i18n' @@ -16,13 +14,13 @@ import { DeviceDetailsDeckConfiguration } from '../../../../organisms/DeviceDeta import { useIsFlex } from '../../../../organisms/Devices/hooks' import { DeviceDetailsComponent } from '../DeviceDetailsComponent' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../organisms/Devices/InstrumentsAndModules') -jest.mock('../../../../organisms/Devices/RecentProtocolRuns') -jest.mock('../../../../organisms/Devices/RobotOverview') -jest.mock('../../../../organisms/DeviceDetailsDeckConfiguration') -jest.mock('../../../../redux/discovery') +vi.mock('@opentrons/react-api-client') +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../organisms/Devices/InstrumentsAndModules') +vi.mock('../../../../organisms/Devices/RecentProtocolRuns') +vi.mock('../../../../organisms/Devices/RobotOverview') +vi.mock('../../../../organisms/DeviceDetailsDeckConfiguration') +vi.mock('../../../../redux/discovery') const ROBOT_NAME = 'otie' const mockEstopStatus = { @@ -33,23 +31,6 @@ const mockEstopStatus = { }, } -const mockRobotOverview = RobotOverview as jest.MockedFunction< - typeof RobotOverview -> -const mockInstrumentsAndModules = InstrumentsAndModules as jest.MockedFunction< - typeof InstrumentsAndModules -> -const mockRecentProtocolRuns = RecentProtocolRuns as jest.MockedFunction< - typeof RecentProtocolRuns -> -const mockUseEstopQuery = useEstopQuery as jest.MockedFunction< - typeof useEstopQuery -> -const mockDeviceDetailsDeckConfiguration = DeviceDetailsDeckConfiguration as jest.MockedFunction< - typeof DeviceDetailsDeckConfiguration -> -const mockUseIsFlex = useIsFlex as jest.MockedFunction - const render = () => { return renderWithProviders( , @@ -61,50 +42,49 @@ const render = () => { describe('DeviceDetailsComponent', () => { beforeEach(() => { - when(mockRobotOverview) - .calledWith(componentPropsMatcher({ robotName: ROBOT_NAME })) - .mockReturnValue(
Mock RobotOverview
) - when(mockInstrumentsAndModules) - .calledWith(componentPropsMatcher({ robotName: ROBOT_NAME })) - .mockReturnValue(
Mock InstrumentsAndModules
) - when(mockRecentProtocolRuns) - .calledWith(componentPropsMatcher({ robotName: ROBOT_NAME })) - .mockReturnValue(
Mock RecentProtocolRuns
) - mockUseEstopQuery.mockReturnValue({ data: mockEstopStatus } as any) - mockDeviceDetailsDeckConfiguration.mockReturnValue( -
Mock DeviceDetailsDeckConfiguration
- ) - when(mockUseIsFlex).calledWith(ROBOT_NAME).mockReturnValue(false) - }) - - afterEach(() => { - resetAllWhenMocks() + vi.mocked(useEstopQuery).mockReturnValue({ data: mockEstopStatus } as any) + when(vi.mocked(useIsFlex)).calledWith(ROBOT_NAME).thenReturn(false) }) it('renders a RobotOverview when a robot is found and syncs clock', () => { - const [{ getByText }] = render() - getByText('Mock RobotOverview') + render() + expect(vi.mocked(RobotOverview)).toHaveBeenCalledWith( + { + robotName: ROBOT_NAME, + }, + {} + ) }) it('renders InstrumentsAndModules when a robot is found', () => { - const [{ getByText }] = render() - getByText('Mock InstrumentsAndModules') + render() + expect(vi.mocked(InstrumentsAndModules)).toHaveBeenCalledWith( + { + robotName: ROBOT_NAME, + }, + {} + ) }) it('renders RecentProtocolRuns when a robot is found', () => { - const [{ getByText }] = render() - getByText('Mock RecentProtocolRuns') + render() + expect(vi.mocked(RecentProtocolRuns)).toHaveBeenCalledWith( + { + robotName: ROBOT_NAME, + }, + {} + ) }) it('renders Deck Configuration when a robot is flex', () => { - when(mockUseIsFlex).calledWith(ROBOT_NAME).mockReturnValue(true) - const [{ getByText }] = render() - getByText('Mock DeviceDetailsDeckConfiguration') + when(vi.mocked(useIsFlex)).calledWith(ROBOT_NAME).thenReturn(true) + render() + expect(vi.mocked(DeviceDetailsDeckConfiguration)).toHaveBeenCalled() }) it.todo('renders EstopBanner when estop is engaged') // mockEstopStatus.data.status = PHYSICALLY_ENGAGED - // mockUseEstopQuery.mockReturnValue({ data: mockEstopStatus } as any) + // vi.mocked(useEstopQuery).mockReturnValue({ data: mockEstopStatus } as any) // const { result } = renderHook(() => useEstopContext(), { wrapper }) // result.current.setIsEmergencyStopModalDismissed(true) // // act(() => result.current.setIsEmergencyStopModalDismissed(true)) diff --git a/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx b/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx index 346660967bb..139844bbd8a 100644 --- a/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx +++ b/app/src/pages/Devices/DevicesLanding/__tests__/DevicesLanding.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' import { fireEvent } from '@testing-library/react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { DevicesEmptyState } from '../../../../organisms/Devices/DevicesEmptyState' @@ -18,24 +19,9 @@ import { } from '../../../../redux/discovery/__fixtures__' import { DevicesLanding } from '..' -jest.mock('../../../../organisms/Devices/DevicesEmptyState') -jest.mock('../../../../organisms/Devices/RobotCard') -jest.mock('../../../../redux/discovery') - -const mockGetScanning = getScanning as jest.MockedFunction -const mockRobotCard = RobotCard as jest.MockedFunction -const mockDevicesEmptyState = DevicesEmptyState as jest.MockedFunction< - typeof DevicesEmptyState -> -const mockGetConnectableRobots = getConnectableRobots as jest.MockedFunction< - typeof getConnectableRobots -> -const mockGetReachableRobots = getReachableRobots as jest.MockedFunction< - typeof getReachableRobots -> -const mockGetUnreachableRobots = getUnreachableRobots as jest.MockedFunction< - typeof getUnreachableRobots -> +vi.mock('../../../../organisms/Devices/DevicesEmptyState') +vi.mock('../../../../organisms/Devices/RobotCard') +vi.mock('../../../../redux/discovery') const render = () => { return renderWithProviders(, { @@ -45,23 +31,25 @@ const render = () => { describe('DevicesLanding', () => { beforeEach(() => { - mockGetScanning.mockReturnValue(false) - mockRobotCard.mockImplementation(({ robot: { name } }) => ( + vi.mocked(getScanning).mockReturnValue(false) + vi.mocked(RobotCard).mockImplementation(({ robot: { name } }) => (
Mock Robot {name}
)) - mockDevicesEmptyState.mockReturnValue(
Mock DevicesEmptyState
) - mockGetConnectableRobots.mockReturnValue([ + vi.mocked(DevicesEmptyState).mockReturnValue( +
Mock DevicesEmptyState
+ ) + vi.mocked(getConnectableRobots).mockReturnValue([ { ...mockConnectableRobot, name: 'connectableRobot' }, ]) - mockGetReachableRobots.mockReturnValue([ + vi.mocked(getReachableRobots).mockReturnValue([ { ...mockReachableRobot, name: 'reachableRobot' }, ]) - mockGetUnreachableRobots.mockReturnValue([ + vi.mocked(getUnreachableRobots).mockReturnValue([ { ...mockUnreachableRobot, name: 'unreachableRobot' }, ]) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders a Devices title', () => { @@ -71,29 +59,29 @@ describe('DevicesLanding', () => { }) it('renders the DevicesEmptyState when no robots are found', () => { - mockGetConnectableRobots.mockReturnValue([]) - mockGetReachableRobots.mockReturnValue([]) - mockGetUnreachableRobots.mockReturnValue([]) + vi.mocked(getConnectableRobots).mockReturnValue([]) + vi.mocked(getReachableRobots).mockReturnValue([]) + vi.mocked(getUnreachableRobots).mockReturnValue([]) const [{ getByText }] = render() getByText('Mock DevicesEmptyState') }) it('renders the Looking for robots copy when scanning is true and there are no devices', () => { - mockGetScanning.mockReturnValue(true) - mockGetConnectableRobots.mockReturnValue([]) - mockGetReachableRobots.mockReturnValue([]) - mockGetUnreachableRobots.mockReturnValue([]) + vi.mocked(getScanning).mockReturnValue(true) + vi.mocked(getConnectableRobots).mockReturnValue([]) + vi.mocked(getReachableRobots).mockReturnValue([]) + vi.mocked(getUnreachableRobots).mockReturnValue([]) const [{ getByText }] = render() getByText('Looking for robots') }) it('renders the Icon when scanning is true and there are no devices', () => { - mockGetScanning.mockReturnValue(true) - mockGetConnectableRobots.mockReturnValue([]) - mockGetReachableRobots.mockReturnValue([]) - mockGetUnreachableRobots.mockReturnValue([]) + vi.mocked(getScanning).mockReturnValue(true) + vi.mocked(getConnectableRobots).mockReturnValue([]) + vi.mocked(getReachableRobots).mockReturnValue([]) + vi.mocked(getUnreachableRobots).mockReturnValue([]) const [{ getByLabelText }] = render() getByLabelText('ot-spinner') @@ -118,9 +106,9 @@ describe('DevicesLanding', () => { getByText('Mock Robot reachableRobot') }) it('does not render available or not available sections when none are present', () => { - mockGetConnectableRobots.mockReturnValue([]) - mockGetReachableRobots.mockReturnValue([]) - mockGetUnreachableRobots.mockReturnValue([]) + vi.mocked(getConnectableRobots).mockReturnValue([]) + vi.mocked(getReachableRobots).mockReturnValue([]) + vi.mocked(getUnreachableRobots).mockReturnValue([]) const [{ queryByText }] = render() expect(queryByText('Available')).toBeNull() diff --git a/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx b/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx index fe8b1643f50..5c5efe54dcf 100644 --- a/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx +++ b/app/src/pages/Devices/DevicesLanding/__tests__/NewRobotSetupHelp.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { it, describe, expect } from 'vitest' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { NewRobotSetupHelp } from '../NewRobotSetupHelp' @@ -15,7 +16,7 @@ describe('NewRobotSetupHelp', () => { it('renders link and collapsed modal by default', () => { const [{ getByText, queryByText }] = render() - expect(getByText('See how to set up a new robot')).toBeInTheDocument() + getByText('See how to set up a new robot') expect(queryByText('How to setup a new robot')).toBeFalsy() }) it('when link is clicked, modal is opened, and closes via Close button', () => { @@ -23,7 +24,7 @@ describe('NewRobotSetupHelp', () => { const link = getByText('See how to set up a new robot') fireEvent.click(link) - expect(getByText('How to setup a new robot')).toBeInTheDocument() + getByText('How to setup a new robot') const closeButton = getByRole('button', { name: 'close' }) fireEvent.click(closeButton) diff --git a/app/src/pages/Devices/ProtocolRunDetails/__tests__/ProtocolRunDetails.test.tsx b/app/src/pages/Devices/ProtocolRunDetails/__tests__/ProtocolRunDetails.test.tsx index 4eba7f8f406..ee726ad3de6 100644 --- a/app/src/pages/Devices/ProtocolRunDetails/__tests__/ProtocolRunDetails.test.tsx +++ b/app/src/pages/Devices/ProtocolRunDetails/__tests__/ProtocolRunDetails.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { Route } from 'react-router' -import { MemoryRouter } from 'react-router-dom' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { Route, MemoryRouter } from 'react-router-dom' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { mockConnectableRobot } from '../../../../redux/discovery/__fixtures__' import { @@ -23,44 +23,15 @@ import { ModuleModel, ModuleType } from '@opentrons/shared-data' import { mockRobotSideAnalysis } from '../../../../organisms/CommandText/__fixtures__' -jest.mock( +vi.mock( '../../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis' ) -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunHeader') -jest.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunSetup') -jest.mock('../../../../organisms/RunPreview') -jest.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunModuleControls') -jest.mock('../../../../organisms/ProtocolUpload/hooks') - -const mockUseRobot = useRobot as jest.MockedFunction -const mockUseSyncRobotClock = useSyncRobotClock as jest.MockedFunction< - typeof useSyncRobotClock -> -const mockProtocolRunHeader = ProtocolRunHeader as jest.MockedFunction< - typeof ProtocolRunHeader -> -const mockRunPreview = RunPreviewComponent as jest.MockedFunction< - typeof RunPreviewComponent -> -const mockProtocolRunSetup = ProtocolRunSetup as jest.MockedFunction< - typeof ProtocolRunSetup -> -const mockProtocolRunModuleControls = ProtocolRunModuleControls as jest.MockedFunction< - typeof ProtocolRunModuleControls -> -const mockUseModuleRenderInfoForProtocolById = useModuleRenderInfoForProtocolById as jest.MockedFunction< - typeof useModuleRenderInfoForProtocolById -> -const mockUseCurrentRunId = useCurrentRunId as jest.MockedFunction< - typeof useCurrentRunId -> -const mockUseRunStatuses = useRunStatuses as jest.MockedFunction< - typeof useRunStatuses -> -const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction< - typeof useMostRecentCompletedAnalysis -> +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunHeader') +vi.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunSetup') +vi.mock('../../../../organisms/RunPreview') +vi.mock('../../../../organisms/Devices/ProtocolRun/ProtocolRunModuleControls') +vi.mock('../../../../organisms/ProtocolUpload/hooks') const MOCK_MAGNETIC_MODULE_COORDS = [10, 20, 0] @@ -98,20 +69,24 @@ const RUN_ID = '95e67900-bc9f-4fbf-92c6-cc4d7226a51b' describe('ProtocolRunDetails', () => { beforeEach(() => { - mockUseRobot.mockReturnValue(mockConnectableRobot) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useRobot).mockReturnValue(mockConnectableRobot) + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: true, isRunTerminal: false, isRunIdle: true, }) - mockProtocolRunHeader.mockReturnValue(
Mock ProtocolRunHeader
) - mockRunPreview.mockReturnValue(
Mock RunPreview
) - mockProtocolRunSetup.mockReturnValue(
Mock ProtocolRunSetup
) - mockProtocolRunModuleControls.mockReturnValue( + vi.mocked(ProtocolRunHeader).mockReturnValue( +
Mock ProtocolRunHeader
+ ) + vi.mocked(RunPreviewComponent).mockReturnValue(
Mock RunPreview
) + vi.mocked(ProtocolRunSetup).mockReturnValue( +
Mock ProtocolRunSetup
+ ) + vi.mocked(ProtocolRunModuleControls).mockReturnValue(
Mock ProtocolRunModuleControls
) - mockUseModuleRenderInfoForProtocolById.mockReturnValue({ + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({ [mockMagneticModule.moduleId]: { moduleId: mockMagneticModule.moduleId, x: MOCK_MAGNETIC_MODULE_COORDS[0], @@ -124,15 +99,17 @@ describe('ProtocolRunDetails', () => { attachedModuleMatch: null, }, } as any) - mockUseCurrentRunId.mockReturnValue(RUN_ID) - mockUseMostRecentCompletedAnalysis.mockReturnValue(mockRobotSideAnalysis) + vi.mocked(useCurrentRunId).mockReturnValue(RUN_ID) + vi.mocked(useMostRecentCompletedAnalysis).mockReturnValue( + mockRobotSideAnalysis + ) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('does not render a ProtocolRunHeader when a robot is not found', () => { - mockUseRobot.mockReturnValue(null) + vi.mocked(useRobot).mockReturnValue(null) render(`/devices/otie/protocol-runs/${RUN_ID}/setup`) expect(screen.queryByText('Mock ProtocolRunHeader')).toBeFalsy() @@ -147,7 +124,7 @@ describe('ProtocolRunDetails', () => { it('syncs robot system clock on mount', () => { render(`/devices/otie/protocol-runs/${RUN_ID}/setup`) - expect(mockUseSyncRobotClock).toHaveBeenCalledWith('otie') + expect(vi.mocked(useSyncRobotClock)).toHaveBeenCalledWith('otie') }) it('renders navigation tabs', () => { @@ -197,14 +174,14 @@ describe('ProtocolRunDetails', () => { }) it('should NOT render module controls when there are no modules', () => { - mockUseModuleRenderInfoForProtocolById.mockReturnValue({}) + vi.mocked(useModuleRenderInfoForProtocolById).mockReturnValue({}) render(`/devices/otie/protocol-runs/${RUN_ID}/setup`) expect(screen.queryByText('Module Controls')).toBeNull() }) it('disables module controls tab when the run current but not idle', () => { - mockUseCurrentRunId.mockReturnValue(RUN_ID) - mockUseRunStatuses.mockReturnValue({ + vi.mocked(useCurrentRunId).mockReturnValue(RUN_ID) + vi.mocked(useRunStatuses).mockReturnValue({ isRunRunning: false, isRunStill: false, isRunTerminal: false, @@ -219,7 +196,7 @@ describe('ProtocolRunDetails', () => { }) it('disables run tab if robot-analyzed protocol data is null', () => { - mockUseMostRecentCompletedAnalysis.mockReturnValue(null) + vi.mocked(useMostRecentCompletedAnalysis).mockReturnValue(null) render(`/devices/otie/protocol-runs/${RUN_ID}`) const runTab = screen.getByText('Run Preview') @@ -230,7 +207,7 @@ describe('ProtocolRunDetails', () => { }) it('redirects to the run tab when the run is not current', () => { - mockUseCurrentRunId.mockReturnValue(null) + vi.mocked(useCurrentRunId).mockReturnValue(null) render(`/devices/otie/protocol-runs/${RUN_ID}/setup`) screen.getByText('Mock RunPreview') diff --git a/app/src/pages/Devices/RobotSettings/__tests__/RobotSettings.test.tsx b/app/src/pages/Devices/RobotSettings/__tests__/RobotSettings.test.tsx index d8242da90e9..a9ce14f4f5b 100644 --- a/app/src/pages/Devices/RobotSettings/__tests__/RobotSettings.test.tsx +++ b/app/src/pages/Devices/RobotSettings/__tests__/RobotSettings.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { Route } from 'react-router' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent, screen } from '@testing-library/react' -import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { Route, MemoryRouter } from 'react-router-dom' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { RobotSettingsCalibration } from '../../../../organisms/RobotSettingsCalibration' import { RobotSettingsNetworking } from '../../../../organisms/Devices/RobotSettings/RobotSettingsNetworking' @@ -11,7 +11,7 @@ import { RobotSettingsAdvanced } from '../../../../organisms/Devices/RobotSettin import { RobotSettingsPrivacy } from '../../../../organisms/Devices/RobotSettings/RobotSettingsPrivacy' import { useRobot } from '../../../../organisms/Devices/hooks' import { RobotSettings } from '..' -import { when } from 'jest-when' +import { when } from 'vitest-when' import { mockConnectableRobot, mockReachableRobot, @@ -19,31 +19,13 @@ import { } from '../../../../redux/discovery/__fixtures__' import { getRobotUpdateSession } from '../../../../redux/robot-update' -jest.mock('../../../../organisms/RobotSettingsCalibration') -jest.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsNetworking') -jest.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsAdvanced') -jest.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsPrivacy') -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../redux/discovery/selectors') -jest.mock('../../../../redux/robot-update') - -const mockRobotSettingsCalibration = RobotSettingsCalibration as jest.MockedFunction< - typeof RobotSettingsCalibration -> -const mockRobotSettingsNetworking = RobotSettingsNetworking as jest.MockedFunction< - typeof RobotSettingsNetworking -> -const mockRobotSettingsAdvanced = RobotSettingsAdvanced as jest.MockedFunction< - typeof RobotSettingsAdvanced -> -const mockRobotSettingsPrivacy = RobotSettingsPrivacy as jest.MockedFunction< - typeof RobotSettingsPrivacy -> -const mockUseRobot = useRobot as jest.MockedFunction - -const mockGetRobotUpdateSession = getRobotUpdateSession as jest.MockedFunction< - typeof getRobotUpdateSession -> +vi.mock('../../../../organisms/RobotSettingsCalibration') +vi.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsNetworking') +vi.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsAdvanced') +vi.mock('../../../../organisms/Devices/RobotSettings/RobotSettingsPrivacy') +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../redux/discovery/selectors') +vi.mock('../../../../redux/robot-update') const render = (path = '/') => { return renderWithProviders( @@ -63,22 +45,24 @@ const render = (path = '/') => { describe('RobotSettings', () => { beforeEach(() => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockConnectableRobot) - mockRobotSettingsCalibration.mockReturnValue( + when(vi.mocked(useRobot)) + .calledWith('otie') + .thenReturn(mockConnectableRobot) + vi.mocked(RobotSettingsCalibration).mockReturnValue(
Mock RobotSettingsCalibration
) - mockRobotSettingsNetworking.mockReturnValue( + vi.mocked(RobotSettingsNetworking).mockReturnValue(
Mock RobotSettingsNetworking
) - mockRobotSettingsAdvanced.mockReturnValue( + vi.mocked(RobotSettingsAdvanced).mockReturnValue(
Mock RobotSettingsAdvanced
) - mockRobotSettingsPrivacy.mockReturnValue( + vi.mocked(RobotSettingsPrivacy).mockReturnValue(
Mock RobotSettingsPrivacy
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders a title and navigation tabs', () => { @@ -91,20 +75,22 @@ describe('RobotSettings', () => { }) it('redirects to device details if robot is unreachable', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockUnreachableRobot) + when(vi.mocked(useRobot)) + .calledWith('otie') + .thenReturn(mockUnreachableRobot) render('/devices/otie/robot-settings/calibration') screen.getByText('mock device details') }) it('redirects to device details if robot is null', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(null) + when(vi.mocked(useRobot)).calledWith('otie').thenReturn(null) render('/devices/otie/robot-settings/calibration') screen.getByText('mock device details') }) it('does NOT redirect to device details if robot is null but a robot update session is active', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(null) - mockGetRobotUpdateSession.mockReturnValue({ + when(vi.mocked(useRobot)).calledWith('otie').thenReturn(null) + vi.mocked(getRobotUpdateSession).mockReturnValue({ robotName: 'some robot', fileInfo: null, token: null, @@ -119,21 +105,21 @@ describe('RobotSettings', () => { }) it('redirects to device details if robot is reachable but server is down', () => { - when(mockUseRobot) + when(vi.mocked(useRobot)) .calledWith('otie') - .mockReturnValue({ ...mockReachableRobot, serverHealthStatus: 'notOk' }) + .thenReturn({ ...mockReachableRobot, serverHealthStatus: 'notOk' }) render('/devices/otie/robot-settings/calibration') screen.getByText('mock device details') }) it('redirects to networking tab if robot not connectable', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockReachableRobot) + when(vi.mocked(useRobot)).calledWith('otie').thenReturn(mockReachableRobot) render('/devices/otie/robot-settings/calibration') screen.getByText('Mock RobotSettingsNetworking') }) it('redirects to networking tab if feature flags hidden', () => { - when(mockUseRobot).calledWith('otie').mockReturnValue(mockReachableRobot) + when(vi.mocked(useRobot)).calledWith('otie').thenReturn(mockReachableRobot) render('/devices/otie/robot-settings/feature-flags') screen.getByText('Mock RobotSettingsNetworking') }) diff --git a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx index ad5d6d17ebb..dc95c0c18c1 100644 --- a/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx +++ b/app/src/pages/EmergencyStop/__tests__/EmergencyStop.test.tsx @@ -1,13 +1,15 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach } from 'vitest' import { useEstopQuery } from '@opentrons/react-api-client' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { EmergencyStop } from '..' +import type * as ReactRouterDom from 'react-router-dom' -jest.mock('@opentrons/react-api-client') +vi.mock('@opentrons/react-api-client') const ESTOP_IMAGE_NAME = 'install_e_stop.png' const mockDisconnectedEstop = { @@ -17,19 +19,15 @@ const mockDisconnectedEstop = { rightEstopPhysicalStatus: 'notPresent', }, } as any -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), } }) -const mockUseEstopQuery = useEstopQuery as jest.MockedFunction< - typeof useEstopQuery -> - const render = () => { return renderWithProviders(, { i18nInstance: i18n, @@ -40,7 +38,9 @@ describe('EmergencyStop', () => { // Note (kk:06/28/2023) commented test cases will be activated when added the function to check e-stop status beforeEach(() => { - mockUseEstopQuery.mockReturnValue({ data: mockDisconnectedEstop } as any) + vi.mocked(useEstopQuery).mockReturnValue({ + data: mockDisconnectedEstop, + } as any) }) it('should render text, image, and button when e-stop button is not connected', () => { @@ -50,7 +50,7 @@ describe('EmergencyStop', () => { ) getByText('Continue') expect(getByRole('button')).toBeDisabled() - expect(getByRole('img').getAttribute('src')).toEqual(ESTOP_IMAGE_NAME) + expect(getByRole('img').getAttribute('src')).toContain(ESTOP_IMAGE_NAME) }) it('should render text, icon, button when e-stop button is connected', () => { @@ -61,7 +61,9 @@ describe('EmergencyStop', () => { rightEstopPhysicalStatus: 'notPresent', }, } - mockUseEstopQuery.mockReturnValue({ data: mockConnectedEstop } as any) + vi.mocked(useEstopQuery).mockReturnValue({ + data: mockConnectedEstop, + } as any) const [{ getByText, getByTestId, getByRole }] = render() getByTestId('EmergencyStop_connected_icon') getByText('E-stop successfully connected') @@ -76,7 +78,9 @@ describe('EmergencyStop', () => { rightEstopPhysicalStatus: 'notPresent', }, } as any - mockUseEstopQuery.mockReturnValue({ data: mockConnectedEstop } as any) + vi.mocked(useEstopQuery).mockReturnValue({ + data: mockConnectedEstop, + } as any) const [{ getByRole }] = render() fireEvent.click(getByRole('button')) expect(mockPush).toHaveBeenCalledWith('/robot-settings/rename-robot') diff --git a/app/src/pages/InitialLoadingScreen/__tests__/InitialLoadingScreen.test.tsx b/app/src/pages/InitialLoadingScreen/__tests__/InitialLoadingScreen.test.tsx index f0766cbf9da..940c7694c54 100644 --- a/app/src/pages/InitialLoadingScreen/__tests__/InitialLoadingScreen.test.tsx +++ b/app/src/pages/InitialLoadingScreen/__tests__/InitialLoadingScreen.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { vi, it, describe, beforeEach, afterEach } from 'vitest' import { screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { getOnDeviceDisplaySettings } from '../../../redux/config' import { getIsShellReady } from '../../../redux/shell' @@ -10,15 +11,8 @@ import { InitialLoadingScreen } from '..' import type { OnDeviceDisplaySettings } from '../../../redux/config/schema-types' -jest.mock('../../../redux/config') -jest.mock('../../../redux/shell') - -const mockGetOnDeviceDisplaySettings = getOnDeviceDisplaySettings as jest.MockedFunction< - typeof getOnDeviceDisplaySettings -> -const mockGetIsShellReady = getIsShellReady as jest.MockedFunction< - typeof getIsShellReady -> +vi.mock('../../../redux/config') +vi.mock('../../../redux/shell') const mockSettings = { sleepMs: 60 * 1000 * 60 * 24 * 7, @@ -33,15 +27,15 @@ const render = () => { describe('InitialLoadingScreen', () => { beforeEach(() => { - mockGetOnDeviceDisplaySettings.mockReturnValue(mockSettings) - mockGetIsShellReady.mockReturnValue(false) + vi.mocked(getOnDeviceDisplaySettings).mockReturnValue(mockSettings) + vi.mocked(getIsShellReady).mockReturnValue(false) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should display spinner', () => { render() - screen.getByLabelText('loading') + screen.getByLabelText('loading indicator') }) }) diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx index d0b9baa4d76..56f1c4a11b3 100644 --- a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx +++ b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx @@ -1,9 +1,9 @@ import React from 'react' -import { when } from 'jest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { useParams } from 'react-router-dom' import { useInstrumentsQuery } from '@opentrons/react-api-client' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { getPipetteModelSpecs, getGripperDisplayName, @@ -13,28 +13,22 @@ import { i18n } from '../../../i18n' import { InstrumentDetail } from '../../../pages/InstrumentDetail' import type { Instruments } from '@opentrons/api-client' - -jest.mock('@opentrons/react-api-client') -jest.mock('@opentrons/shared-data', () => ({ - getAllPipetteNames: jest.fn( - jest.requireActual('@opentrons/shared-data').getAllPipetteNames - ), - getPipetteNameSpecs: jest.fn( - jest.requireActual('@opentrons/shared-data').getPipetteNameSpecs - ), - getPipetteModelSpecs: jest.fn(), - getGripperDisplayName: jest.fn(), -})) -jest.mock('react-router-dom', () => ({ - useParams: jest.fn(), - useHistory: jest.fn(), +import type * as SharedData from '@opentrons/shared-data' + +vi.mock('@opentrons/react-api-client') +vi.mock('@opentrons/shared-data', async importOriginal => { + const actual = await importOriginal() + return { + ...actual, + getPipetteModelSpecs: vi.fn(), + getGripperDisplayName: vi.fn(), + } +}) +vi.mock('react-router-dom', () => ({ + useParams: vi.fn(), + useHistory: vi.fn(), })) -const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< - typeof useInstrumentsQuery -> -const mockUseParams = useParams as jest.MockedFunction - const render = () => { return renderWithProviders(, { i18nInstance: i18n, @@ -100,18 +94,18 @@ describe('InstrumentDetail', () => { totalLength: 2, }, } - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: mockInstrumentsQuery, } as any) - when(getPipetteModelSpecs).mockReturnValue({ + vi.mocked(getPipetteModelSpecs).mockReturnValue({ displayName: 'mockPipette', } as any) - when(getGripperDisplayName).mockReturnValue('mockGripper') - mockUseParams.mockReturnValue({ mount: 'left' }) + vi.mocked(getGripperDisplayName).mockReturnValue('mockGripper') + vi.mocked(useParams).mockReturnValue({ mount: 'left' }) }) afterEach(() => { - jest.clearAllMocks() + vi.clearAllMocks() }) it('displays header containing the instrument name and an overflow menu button', () => { @@ -122,7 +116,7 @@ describe('InstrumentDetail', () => { }) it('renders the gripper name if the instrument is a gripper', () => { - mockUseParams.mockReturnValue({ mount: 'extension' }) + vi.mocked(useParams).mockReturnValue({ mount: 'extension' }) const [{ getByText }] = render() getByText('mockGripper') @@ -137,7 +131,7 @@ describe('InstrumentDetail', () => { })), } as any - when(mockUseInstrumentsQuery).mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: mockInstrumentsQuery, } as any) @@ -161,7 +155,7 @@ describe('InstrumentDetail', () => { data: { ...item.data, calibratedOffset: null }, })), } - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: mockInstrumentsQuery, } as any) const [{ getByText }] = render() @@ -188,7 +182,7 @@ describe('InstrumentDetail', () => { }) it('renders detach and recalibrate button if calibration data exists for a gripper', () => { - mockUseParams.mockReturnValue({ mount: 'extension' }) + vi.mocked(useParams).mockReturnValue({ mount: 'extension' }) const [{ getByText }] = render() getByText('detach') getByText('recalibrate') @@ -202,7 +196,7 @@ describe('InstrumentDetail', () => { data: { ...item.data, calibratedOffset: null }, })), } - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: mockInstrumentsQuery, } as any) diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx index 1541beed39c..b4c22817d82 100644 --- a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx +++ b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx @@ -1,33 +1,32 @@ import React from 'react' import NiceModal from '@ebay/nice-modal-react' -import { fireEvent, waitFor } from '@testing-library/react' +import { fireEvent } from '@testing-library/react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { getPipetteModelSpecs } from '@opentrons/shared-data' import { i18n } from '../../../i18n' import { handleInstrumentDetailOverflowMenu } from '../InstrumentDetailOverflowMenu' import { useNotifyCurrentMaintenanceRun } from '../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun' +import { PipetteWizardFlows } from '../../../organisms/PipetteWizardFlows' +import { GripperWizardFlows } from '../../../organisms/GripperWizardFlows' +import { DropTipWizard } from '../../../organisms/DropTipWizard' import type { PipetteData, GripperData } from '@opentrons/api-client' - -jest.mock('@opentrons/shared-data', () => ({ - getAllPipetteNames: jest.fn( - jest.requireActual('@opentrons/shared-data').getAllPipetteNames - ), - getPipetteNameSpecs: jest.fn( - jest.requireActual('@opentrons/shared-data').getPipetteNameSpecs - ), - getPipetteModelSpecs: jest.fn(), -})) -jest.mock('../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun') - -const mockGetPipetteModelSpecs = getPipetteModelSpecs as jest.MockedFunction< - typeof getPipetteModelSpecs -> -const mockUseNotifyCurrentMaintenanceRun = useNotifyCurrentMaintenanceRun as jest.MockedFunction< - typeof useNotifyCurrentMaintenanceRun -> +import type * as SharedData from '@opentrons/shared-data' + +vi.mock('@opentrons/shared-data', async importOriginal => { + const actual = await importOriginal() + return { + ...actual, + getPipetteModelSpecs: vi.fn(), + } +}) +vi.mock('../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun') +vi.mock('../../../organisms/PipetteWizardFlows') +vi.mock('../../../organisms/GripperWizardFlows') +vi.mock('../../../organisms/DropTipWizard') const MOCK_PIPETTE = { mount: 'left', @@ -114,10 +113,10 @@ const render = (pipetteOrGripper: PipetteData | GripperData) => { describe('UpdateBuildroot', () => { beforeEach(() => { - mockGetPipetteModelSpecs.mockReturnValue({ + vi.mocked(getPipetteModelSpecs).mockReturnValue({ displayName: 'mockPipette', } as any) - mockUseNotifyCurrentMaintenanceRun.mockReturnValue({ + vi.mocked(useNotifyCurrentMaintenanceRun).mockReturnValue({ data: { data: { id: 'test', @@ -127,7 +126,7 @@ describe('UpdateBuildroot', () => { }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders appropriate options when the instrument is a pipette', () => { @@ -164,17 +163,16 @@ describe('UpdateBuildroot', () => { const btn = getByTestId('testButton') fireEvent.click(btn) fireEvent.click(getByText('Recalibrate')) - - getByText('Calibrate Left Pipette') + expect(vi.mocked(PipetteWizardFlows)).toHaveBeenCalled() }) it('renders the drop tip wizard when Drop tips is clicked', () => { - const [{ getByTestId, getByText, getAllByText }] = render(MOCK_PIPETTE) + const [{ getByTestId, getByText }] = render(MOCK_PIPETTE) const btn = getByTestId('testButton') fireEvent.click(btn) fireEvent.click(getByText('Drop tips')) - expect(getAllByText('Drop tips')).toHaveLength(2) + expect(vi.mocked(DropTipWizard)).toHaveBeenCalled() }) it('renders the gripper calibration wizard when recalibrate is clicked', () => { @@ -183,20 +181,7 @@ describe('UpdateBuildroot', () => { fireEvent.click(btn) fireEvent.click(getByText('Recalibrate')) - getByText('Calibrate Gripper') - }) - - it('closes the overflow menu when a launched wizard closes', async () => { - const [{ getByTestId, getByText, queryByText }] = render(MOCK_GRIPPER) - const btn = getByTestId('testButton') - fireEvent.click(btn) - fireEvent.click(getByText('Recalibrate')) - - getByText('Calibrate Gripper') - fireEvent.click(getByText('exit')) - await waitFor(() => - expect(queryByText('Recalibrate')).not.toBeInTheDocument() - ) + expect(vi.mocked(GripperWizardFlows)).toHaveBeenCalled() }) it('closes the overflow menu when a click occurs outside of the overflow menu', () => { diff --git a/app/src/pages/Labware/__tests__/Labware.test.tsx b/app/src/pages/Labware/__tests__/Labware.test.tsx index f9ad719af61..c58e7f4a485 100644 --- a/app/src/pages/Labware/__tests__/Labware.test.tsx +++ b/app/src/pages/Labware/__tests__/Labware.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useTrackEvent, @@ -14,34 +15,16 @@ import { useAllLabware, useLabwareFailure, useNewLabwareName } from '../hooks' import { Labware } from '..' import { mockDefinition } from '../../../redux/custom-labware/__fixtures__' -jest.mock('../../../organisms/LabwareCard') -jest.mock('../../../organisms/AddCustomLabwareSlideout') -jest.mock('../../../organisms/ToasterOven') -jest.mock('../hooks') -jest.mock('../../../redux/analytics') +vi.mock('../../../organisms/LabwareCard') +vi.mock('../../../organisms/AddCustomLabwareSlideout') +vi.mock('../../../organisms/ToasterOven') +vi.mock('../hooks') +vi.mock('../../../redux/analytics') -const mockLabwareCard = LabwareCard as jest.MockedFunction -const mockAddCustomLabwareSlideout = AddCustomLabwareSlideout as jest.MockedFunction< - typeof AddCustomLabwareSlideout -> -const mockUseAllLabware = useAllLabware as jest.MockedFunction< - typeof useAllLabware -> -const mockUseLabwareFailure = useLabwareFailure as jest.MockedFunction< - typeof useLabwareFailure -> -const mockUseNewLabwareName = useNewLabwareName as jest.MockedFunction< - typeof useNewLabwareName -> -const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< - typeof useTrackEvent -> -const mockUseToaster = useToaster as jest.MockedFunction - -let mockTrackEvent: jest.Mock -const mockMakeSnackbar = jest.fn() -const mockMakeToast = jest.fn() -const mockEatToast = jest.fn() +const mockTrackEvent = vi.fn() +const mockMakeSnackbar = vi.fn() +const mockMakeToast = vi.fn() +const mockEatToast = vi.fn() const render = () => { return renderWithProviders( @@ -56,29 +39,25 @@ const render = () => { describe('Labware', () => { beforeEach(() => { - mockTrackEvent = jest.fn() - mockUseTrackEvent.mockReturnValue(mockTrackEvent) - mockLabwareCard.mockReturnValue(
Mock Labware Card
) - mockAddCustomLabwareSlideout.mockReturnValue( -
Mock Add Custom Labware
- ) - mockUseAllLabware.mockReturnValue([{ definition: mockDefinition }]) - mockUseLabwareFailure.mockReturnValue({ + vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent) + vi.mocked(LabwareCard).mockReturnValue(
Mock Labware Card
) + vi.mocked(useAllLabware).mockReturnValue([{ definition: mockDefinition }]) + vi.mocked(useLabwareFailure).mockReturnValue({ labwareFailureMessage: null, - clearLabwareFailure: jest.fn(), + clearLabwareFailure: vi.fn(), }) - mockUseNewLabwareName.mockReturnValue({ + vi.mocked(useNewLabwareName).mockReturnValue({ newLabwareName: null, - clearLabwareName: jest.fn(), + clearLabwareName: vi.fn(), }) - mockUseToaster.mockReturnValue({ + vi.mocked(useToaster).mockReturnValue({ makeSnackbar: mockMakeSnackbar, makeToast: mockMakeToast, eatToast: mockEatToast, }) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct title, import button and labware cards', () => { @@ -92,11 +71,10 @@ describe('Labware', () => { expect(getByTestId('sortBy-label')).toHaveTextContent('Alphabetical') }) it('renders AddCustomLabware slideout when import button is clicked', () => { - const [{ getByText, getByRole, queryByText }] = render() - expect(queryByText('Mock Add Custom Labware')).not.toBeInTheDocument() + const [{ getByRole }] = render() const importButton = getByRole('button', { name: 'Import' }) fireEvent.click(importButton) - getByText('Mock Add Custom Labware') + expect(vi.mocked(AddCustomLabwareSlideout)).toHaveBeenCalled() }) it('renders footer with labware creator link', () => { const [{ getByText, getByRole }] = render() @@ -109,9 +87,9 @@ describe('Labware', () => { }) }) it('renders error toast if there is a failure', () => { - mockUseLabwareFailure.mockReturnValue({ + vi.mocked(useLabwareFailure).mockReturnValue({ labwareFailureMessage: 'mock failure message', - clearLabwareFailure: jest.fn(), + clearLabwareFailure: vi.fn(), }) render() expect(mockMakeToast).toBeCalledWith( @@ -121,9 +99,9 @@ describe('Labware', () => { ) }) it('renders success toast if there is a new labware name', () => { - mockUseNewLabwareName.mockReturnValue({ + vi.mocked(useNewLabwareName).mockReturnValue({ newLabwareName: 'mock filename', - clearLabwareName: jest.fn(), + clearLabwareName: vi.fn(), }) render() expect(mockMakeToast).toBeCalledWith( diff --git a/app/src/pages/Labware/__tests__/hooks.test.tsx b/app/src/pages/Labware/__tests__/hooks.test.tsx index 65a8f3a4195..20173b0dbf0 100644 --- a/app/src/pages/Labware/__tests__/hooks.test.tsx +++ b/app/src/pages/Labware/__tests__/hooks.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { renderHook } from '@testing-library/react' import { i18n } from '../../../i18n' import { I18nextProvider } from 'react-i18next' @@ -22,29 +23,18 @@ import type { Store } from 'redux' import type { State } from '../../../redux/types' import { FailedLabwareFile } from '../../../redux/custom-labware/types' -jest.mock('../../../redux/custom-labware') -jest.mock('../helpers/getAllDefs') - -const mockGetValidCustomLabware = getValidCustomLabware as jest.MockedFunction< - typeof getValidCustomLabware -> -const mockGetAllAllDefs = getAllDefs as jest.MockedFunction -const mockGetAddLabwareFailure = getAddLabwareFailure as jest.MockedFunction< - typeof getAddLabwareFailure -> -const mockGetAddNewLabwareName = getAddNewLabwareName as jest.MockedFunction< - typeof getAddNewLabwareName -> +vi.mock('../../../redux/custom-labware') +vi.mock('../helpers/getAllDefs') describe('useAllLabware hook', () => { - const store: Store = createStore(jest.fn(), {}) + const store: Store = createStore(vi.fn(), {}) beforeEach(() => { - mockGetAllAllDefs.mockReturnValue([mockDefinition]) - mockGetValidCustomLabware.mockReturnValue([mockValidLabware]) - store.dispatch = jest.fn() + vi.mocked(getAllDefs).mockReturnValue([mockDefinition]) + vi.mocked(getValidCustomLabware).mockReturnValue([mockValidLabware]) + store.dispatch = vi.fn() }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return object with only definition and modified date', () => { @@ -121,19 +111,19 @@ describe('useAllLabware hook', () => { }) describe('useLabwareFailure hook', () => { - const store: Store = createStore(jest.fn(), {}) + const store: Store = createStore(vi.fn(), {}) beforeEach(() => { - mockGetAddLabwareFailure.mockReturnValue({ + vi.mocked(getAddLabwareFailure).mockReturnValue({ file: { type: 'INVALID_LABWARE_FILE', filename: '123', } as FailedLabwareFile, errorMessage: null, }) - store.dispatch = jest.fn() + store.dispatch = vi.fn() }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return invalid labware definition', () => { const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ @@ -148,7 +138,7 @@ describe('useLabwareFailure hook', () => { expect(errorMessage).toBe('Error importing 123. Invalid labware definition') }) it('should return duplicate labware definition', () => { - mockGetAddLabwareFailure.mockReturnValue({ + vi.mocked(getAddLabwareFailure).mockReturnValue({ file: { type: 'DUPLICATE_LABWARE_FILE', filename: '123', @@ -171,7 +161,7 @@ describe('useLabwareFailure hook', () => { ) }) it('should return opentrons labware definition', () => { - mockGetAddLabwareFailure.mockReturnValue({ + vi.mocked(getAddLabwareFailure).mockReturnValue({ file: { type: 'OPENTRONS_LABWARE_FILE', filename: '123', @@ -194,7 +184,7 @@ describe('useLabwareFailure hook', () => { ) }) it('should return unable to upload labware definition', () => { - mockGetAddLabwareFailure.mockReturnValue({ + vi.mocked(getAddLabwareFailure).mockReturnValue({ file: null, errorMessage: 'error', }) @@ -214,13 +204,15 @@ describe('useLabwareFailure hook', () => { }) describe('useNewLabwareName hook', () => { - const store: Store = createStore(jest.fn(), {}) + const store: Store = createStore(vi.fn(), {}) beforeEach(() => { - mockGetAddNewLabwareName.mockReturnValue({ filename: 'mock_filename' }) - store.dispatch = jest.fn() + vi.mocked(getAddNewLabwareName).mockReturnValue({ + filename: 'mock_filename', + }) + store.dispatch = vi.fn() }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return filename as a string', () => { diff --git a/app/src/pages/Labware/helpers/__mocks__/getAllDefs.ts b/app/src/pages/Labware/helpers/__mocks__/getAllDefs.ts index 89a6a15b5a2..09e437f56fc 100644 --- a/app/src/pages/Labware/helpers/__mocks__/getAllDefs.ts +++ b/app/src/pages/Labware/helpers/__mocks__/getAllDefs.ts @@ -1,4 +1,5 @@ import path from 'path' +import { vi } from 'vitest' // replace webpack-specific require.context with Node-based glob in tests import glob from 'glob' import type { LabwareDefinition2 } from '@opentrons/shared-data' @@ -12,7 +13,7 @@ const DEFS_FIXTURE_PATTERN = path.join( const allDefs: unknown[] = glob.sync(DEFS_FIXTURE_PATTERN).map(require) -export const getAllDefs = jest.fn(() => +export const getAllDefs = vi.fn(() => (allDefs as LabwareDefinition2[]).reduce( (acc, def: LabwareDefinition2): Record => ({ ...acc, diff --git a/app/src/pages/NameRobot/__tests__/NameRobot.test.tsx b/app/src/pages/NameRobot/__tests__/NameRobot.test.tsx index b07def9bebb..95bfb42007c 100644 --- a/app/src/pages/NameRobot/__tests__/NameRobot.test.tsx +++ b/app/src/pages/NameRobot/__tests__/NameRobot.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { fireEvent, screen, waitFor } from '@testing-library/react' import { i18n } from '../../../i18n' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { useTrackEvent } from '../../../redux/analytics' import { getConnectableRobots, @@ -16,35 +17,24 @@ import { } from '../../../redux/discovery/__fixtures__' import { NameRobot } from '..' +import type * as ReactRouterDom from 'react-router-dom' -jest.mock('../../../redux/discovery/selectors') -jest.mock('../../../redux/config') -jest.mock('../../../redux/analytics') -jest.mock('../../../organisms/RobotSettingsDashboard/NetworkSettings/hooks') +vi.mock('../../../redux/discovery/selectors') +vi.mock('../../../redux/config') +vi.mock('../../../redux/analytics') +vi.mock('../../../organisms/RobotSettingsDashboard/NetworkSettings/hooks') -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -const mockGetConnectableRobots = getConnectableRobots as jest.MockedFunction< - typeof getConnectableRobots -> -const mockGetReachableRobots = getReachableRobots as jest.MockedFunction< - typeof getReachableRobots -> -const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< - typeof useTrackEvent -> -const mockuseIsUnboxingFlowOngoing = useIsUnboxingFlowOngoing as jest.MockedFunction< - typeof useIsUnboxingFlowOngoing -> -let mockTrackEvent: jest.Mock +const mockTrackEvent = vi.fn() const render = () => { return renderWithProviders( @@ -57,13 +47,12 @@ const render = () => { describe('NameRobot', () => { beforeEach(() => { - mockTrackEvent = jest.fn() - mockUseTrackEvent.mockReturnValue(mockTrackEvent) + vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent) mockConnectableRobot.name = 'connectableOtie' mockReachableRobot.name = 'reachableOtie' - mockGetConnectableRobots.mockReturnValue([mockConnectableRobot]) - mockGetReachableRobots.mockReturnValue([mockReachableRobot]) - mockuseIsUnboxingFlowOngoing.mockReturnValue(true) + vi.mocked(getConnectableRobots).mockReturnValue([mockConnectableRobot]) + vi.mocked(getReachableRobots).mockReturnValue([mockReachableRobot]) + vi.mocked(useIsUnboxingFlowOngoing).mockReturnValue(true) }) it('should render text, button and keyboard', () => { @@ -139,7 +128,7 @@ describe('NameRobot', () => { }) it('should render text and button when coming from robot settings', () => { - mockuseIsUnboxingFlowOngoing.mockReturnValue(false) + vi.mocked(useIsUnboxingFlowOngoing).mockReturnValue(false) render() screen.getByText('Rename robot') expect( @@ -152,7 +141,7 @@ describe('NameRobot', () => { }) it('should call a mock function when tapping back button', () => { - mockuseIsUnboxingFlowOngoing.mockReturnValue(false) + vi.mocked(useIsUnboxingFlowOngoing).mockReturnValue(false) render() fireEvent.click(screen.getByTestId('name_back_button')) expect(mockPush).toHaveBeenCalledWith('/robot-settings') diff --git a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx index 70c0f51454d..3fd3abfa14b 100644 --- a/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx +++ b/app/src/pages/NetworkSetupMenu/__tests__/NetworkSetupMenu.test.tsx @@ -1,17 +1,19 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { NetworkSetupMenu } from '..' +import type * as ReactRouterDom from 'react-router-dom' -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) diff --git a/app/src/pages/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx index f447a81cc56..22ee4ae1286 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/DeleteProtocolConfirmationModal.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' import { act, fireEvent, screen } from '@testing-library/react' import { @@ -8,38 +9,21 @@ import { deleteRun, HostConfig, } from '@opentrons/api-client' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { useHost, useProtocolQuery } from '@opentrons/react-api-client' import { i18n } from '../../../i18n' import { useToaster } from '../../../organisms/ToasterOven' import { DeleteProtocolConfirmationModal } from '../DeleteProtocolConfirmationModal' -jest.mock('@opentrons/api-client') -jest.mock('@opentrons/react-api-client') -jest.mock('../../../organisms/ToasterOven') +vi.mock('@opentrons/api-client') +vi.mock('@opentrons/react-api-client') +vi.mock('../../../organisms/ToasterOven') -const mockFunc = jest.fn() +const mockFunc = vi.fn() const PROTOCOL_ID = 'mockProtocolId' -const mockMakeSnackbar = jest.fn() +const mockMakeSnackbar = vi.fn() const MOCK_HOST_CONFIG = {} as HostConfig -const mockUseHost = useHost as jest.MockedFunction -const mockGetProtocol = getProtocol as jest.MockedFunction -const mockDeleteProtocol = deleteProtocol as jest.MockedFunction< - typeof deleteProtocol -> -const mockDeleteRun = deleteRun as jest.MockedFunction -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseToaster = useToaster as jest.MockedFunction - -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') - return { - ...reactRouterDom, - } -}) const render = ( props: React.ComponentProps @@ -57,26 +41,25 @@ describe('DeleteProtocolConfirmationModal', () => { protocolId: PROTOCOL_ID, setShowDeleteConfirmationModal: mockFunc, } - when(mockUseHost).calledWith().mockReturnValue(MOCK_HOST_CONFIG) - when(mockUseProtocolQuery) + when(vi.mocked(useHost)).calledWith().thenReturn(MOCK_HOST_CONFIG) + when(vi.mocked(useProtocolQuery)) .calledWith(PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ data: { data: { metadata: { protocolName: 'mockProtocol1' }, }, }, } as any) - when(mockUseToaster).calledWith().mockReturnValue({ + when(vi.mocked(useToaster)).calledWith().thenReturn({ makeSnackbar: mockMakeSnackbar, - makeToast: jest.fn(), - eatToast: jest.fn(), + makeToast: vi.fn(), + eatToast: vi.fn(), }) }) afterEach(() => { - resetAllWhenMocks() - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should render text and buttons', () => { @@ -94,9 +77,9 @@ describe('DeleteProtocolConfirmationModal', () => { }) it('should call a mock function when tapping delete button', async () => { - when(mockGetProtocol) + when(vi.mocked(getProtocol)) .calledWith(MOCK_HOST_CONFIG, PROTOCOL_ID) - .mockResolvedValue({ + .thenResolve({ data: { links: { referencingRuns: [{ id: '1' }, { id: '2' }] } }, } as any) @@ -105,9 +88,9 @@ describe('DeleteProtocolConfirmationModal', () => { screen.getByText('Delete').click() }) await new Promise(setImmediate) - expect(mockDeleteRun).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '1') - expect(mockDeleteRun).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '2') - expect(mockDeleteProtocol).toHaveBeenCalledWith( + expect(vi.mocked(deleteRun)).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '1') + expect(vi.mocked(deleteRun)).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '2') + expect(vi.mocked(deleteProtocol)).toHaveBeenCalledWith( MOCK_HOST_CONFIG, PROTOCOL_ID ) diff --git a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx index ed20a2b4442..e657b7bbdc5 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx @@ -1,33 +1,26 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' import { MemoryRouter } from 'react-router-dom' import { fireEvent, renderHook } from '@testing-library/react' -import { renderWithProviders, useLongPress } from '@opentrons/components' +import { useLongPress } from '@opentrons/components' import { HostConfig } from '@opentrons/api-client' import { useCreateRunMutation, useHost } from '@opentrons/react-api-client' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { LongPressModal } from '../LongPressModal' import type { UseLongPressResult } from '@opentrons/components' const MOCK_HOST_CONFIG = {} as HostConfig -const mockCreateRun = jest.fn((id: string) => {}) -const mockUseCreateRunMutation = useCreateRunMutation as jest.MockedFunction< - typeof useCreateRunMutation -> -const mockuseHost = useHost as jest.MockedFunction -const mockFunc = jest.fn() -const mockSetTargetProtocolId = jest.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') - return { - ...reactRouterDom, - } -}) -jest.mock('@opentrons/api-client') -jest.mock('@opentrons/react-api-client') +const mockCreateRun = vi.fn((id: string) => {}) +const mockFunc = vi.fn() +const mockSetTargetProtocolId = vi.fn() + +vi.mock('@opentrons/api-client') +vi.mock('@opentrons/react-api-client') const render = (longPress: UseLongPressResult) => { return renderWithProviders( @@ -47,10 +40,10 @@ const render = (longPress: UseLongPressResult) => { describe('Long Press Modal', () => { beforeEach(() => { - when(mockuseHost).calledWith().mockReturnValue(MOCK_HOST_CONFIG) + when(vi.mocked(useHost)).calledWith().thenReturn(MOCK_HOST_CONFIG) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should display the three options', () => { const { result } = renderHook(() => useLongPress()) @@ -72,7 +65,7 @@ describe('Long Press Modal', () => { }) it('should launch protocol run when clicking run protocol button', () => { - mockUseCreateRunMutation.mockReturnValue({ + vi.mocked(useCreateRunMutation).mockReturnValue({ createRun: mockCreateRun, } as any) diff --git a/app/src/pages/ProtocolDashboard/__tests__/NoProtocols.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/NoProtocols.test.tsx index 09532336551..cf0f0738248 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/NoProtocols.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/NoProtocols.test.tsx @@ -10,7 +10,8 @@ const render = () => { return renderWithProviders(, { i18nInstance: i18n }) } -const NO_PROTOCOLS_PNG_FINE_NAME = '/app/src/assets/images/on-device-display/empty_protocol_dashboard.png' +const NO_PROTOCOLS_PNG_FINE_NAME = + '/app/src/assets/images/on-device-display/empty_protocol_dashboard.png' describe('NoProtocols', () => { it('should render text and image', () => { diff --git a/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx index e0edf3a1505..4a49f1ff5ea 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/PinnedProtocol.test.tsx @@ -1,19 +1,21 @@ import * as React from 'react' +import { vi, it, describe, expect } from 'vitest' import { act, fireEvent } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { PinnedProtocol } from '../PinnedProtocol' import type { ProtocolResource } from '@opentrons/shared-data' +import type * as ReactRouterDom from 'react-router-dom' -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) @@ -37,9 +39,9 @@ const mockProtocol: ProtocolResource = { const props = { protocol: mockProtocol, - longPress: jest.fn(), - setShowDeleteConfirmationModal: jest.fn(), - setTargetProtocolId: jest.fn(), + longPress: vi.fn(), + setShowDeleteConfirmationModal: vi.fn(), + setTargetProtocolId: vi.fn(), } const render = () => { @@ -54,7 +56,7 @@ const render = () => { } describe('Pinned Protocol', () => { - jest.useFakeTimers() + vi.useFakeTimers() it('should redirect to protocol details after short click', () => { const [{ getByText }] = render() @@ -64,12 +66,12 @@ describe('Pinned Protocol', () => { }) it('should display modal after long click', async () => { - jest.useFakeTimers() + vi.useFakeTimers() const [{ getByText }] = render() const name = getByText('yay mock protocol') fireEvent.mouseDown(name) act(() => { - jest.advanceTimersByTime(1005) + vi.advanceTimersByTime(1005) }) expect(props.longPress).toHaveBeenCalled() getByText('Run protocol') diff --git a/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx index 7bc81ccc3ff..26ec86337fc 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx @@ -1,32 +1,30 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach } from 'vitest' import { act, fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' import { UseQueryResult } from 'react-query' import { useProtocolAnalysisAsDocumentQuery } from '@opentrons/react-api-client' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ProtocolCard } from '../ProtocolCard' +import type * as ReactRouterDom from 'react-router-dom' import type { CompletedProtocolAnalysis, ProtocolResource, } from '@opentrons/shared-data' -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -jest.mock('@opentrons/react-api-client') - -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> +vi.mock('@opentrons/react-api-client') const mockProtocol: ProtocolResource = { id: 'mockProtocol1', @@ -47,10 +45,10 @@ const mockProtocol: ProtocolResource = { const props = { protocol: mockProtocol, - longPress: jest.fn(), - setTargetProtocol: jest.fn(), - setShowDeleteConfirmationModal: jest.fn(), - setTargetProtocolId: jest.fn(), + longPress: vi.fn(), + setTargetProtocol: vi.fn(), + setShowDeleteConfirmationModal: vi.fn(), + setTargetProtocolId: vi.fn(), } const render = () => { @@ -65,10 +63,10 @@ const render = () => { } describe('ProtocolCard', () => { - jest.useFakeTimers() + vi.useFakeTimers() beforeEach(() => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: { result: 'ok' } as any, } as UseQueryResult) }) @@ -80,7 +78,7 @@ describe('ProtocolCard', () => { }) it('should display the analysis failed error modal when clicking on the protocol', () => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: { result: 'error' } as any, } as UseQueryResult) render() @@ -99,12 +97,12 @@ describe('ProtocolCard', () => { }) it('should display modal after long click', async () => { - jest.useFakeTimers() + vi.useFakeTimers() render() const name = screen.getByText('yay mock protocol') fireEvent.mouseDown(name) act(() => { - jest.advanceTimersByTime(1005) + vi.advanceTimersByTime(1005) }) expect(props.longPress).toHaveBeenCalled() screen.getByText('Run protocol') @@ -113,15 +111,15 @@ describe('ProtocolCard', () => { }) it('should display the analysis failed error modal when clicking on the protocol when doing a long pressing', async () => { - jest.useFakeTimers() - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.useFakeTimers() + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: { result: 'error' } as any, } as UseQueryResult) render() const name = screen.getByText('yay mock protocol') fireEvent.mouseDown(name) act(() => { - jest.advanceTimersByTime(1005) + vi.advanceTimersByTime(1005) }) expect(props.longPress).toHaveBeenCalled() screen.getByLabelText('failedAnalysis_icon') @@ -135,14 +133,14 @@ describe('ProtocolCard', () => { }) it('should display a loading spinner when analysis is pending', async () => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: null as any, } as UseQueryResult) render() const name = screen.getByText('yay mock protocol') fireEvent.mouseDown(name) act(() => { - jest.advanceTimersByTime(1005) + vi.advanceTimersByTime(1005) }) expect(props.longPress).toHaveBeenCalled() screen.getByLabelText('Protocol is loading') diff --git a/app/src/pages/ProtocolDashboard/__tests__/utils.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/utils.test.tsx index 8eaefe47271..ac2b0c389eb 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/utils.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/utils.test.tsx @@ -1,3 +1,4 @@ +import { it, describe, expect } from 'vitest' import { sortProtocols } from '../utils' import type { ProtocolResource } from '@opentrons/shared-data' diff --git a/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx index c346b72764b..15403820d7f 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Deck.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { useProtocolAnalysisAsDocumentQuery, useProtocolQuery, @@ -14,14 +15,7 @@ import type { UseQueryResult } from 'react-query' import type { CompletedProtocolAnalysis } from '@opentrons/shared-data' import type { Protocol } from '@opentrons/api-client' -jest.mock('@opentrons/react-api-client') - -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> +vi.mock('@opentrons/react-api-client') const MOCK_PROTOCOL_ID = 'mockProtocolId' const MOCK_PROTOCOL_ANALYSIS = { @@ -158,23 +152,23 @@ describe('Deck', () => { props = { protocolId: MOCK_PROTOCOL_ID, } - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(MOCK_PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ data: { data: { analysisSummaries: [{ id: MOCK_PROTOCOL_ANALYSIS.id }] }, } as any, } as UseQueryResult) - when(mockUseProtocolAnalysisAsDocumentQuery) + when(vi.mocked(useProtocolAnalysisAsDocumentQuery)) .calledWith(MOCK_PROTOCOL_ID, MOCK_PROTOCOL_ANALYSIS.id, { enabled: true, }) - .mockReturnValue({ + .thenReturn({ data: MOCK_PROTOCOL_ANALYSIS as any, } as UseQueryResult) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('renders deck view section', () => { diff --git a/app/src/pages/ProtocolDetails/__tests__/EmptySection.test.tsx b/app/src/pages/ProtocolDetails/__tests__/EmptySection.test.tsx index 1adf778f770..3561bc66117 100644 --- a/app/src/pages/ProtocolDetails/__tests__/EmptySection.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/EmptySection.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { it, describe } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { EmptySection } from '../EmptySection' diff --git a/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx index 3acafc73557..237134fe697 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Hardware.test.tsx @@ -1,21 +1,19 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' +import { vi, it, describe, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' import { STAGING_AREA_RIGHT_SLOT_FIXTURE, WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE, WASTE_CHUTE_CUTOUT, } from '@opentrons/shared-data' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useRequiredProtocolHardware } from '../../Protocols/hooks' import { Hardware } from '../Hardware' -jest.mock('../../Protocols/hooks') -jest.mock('../../../redux/config') +vi.mock('../../Protocols/hooks') +vi.mock('../../../redux/config') -const mockUseRequiredProtocolHardware = useRequiredProtocolHardware as jest.MockedFunction< - typeof useRequiredProtocolHardware -> const MOCK_PROTOCOL_ID = 'mock_protocol_id' const render = (props: React.ComponentProps) => { @@ -30,9 +28,9 @@ describe('Hardware', () => { props = { protocolId: MOCK_PROTOCOL_ID, } - when(mockUseRequiredProtocolHardware) + when(vi.mocked(useRequiredProtocolHardware)) .calledWith(MOCK_PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ requiredProtocolHardware: [ { hardwareType: 'pipette', @@ -77,7 +75,7 @@ describe('Hardware', () => { }) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render column headers that indicate where the hardware is, what is called, and whether it is connected', () => { diff --git a/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx index d0b12936e87..88a81698d57 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Labware.test.tsx @@ -1,21 +1,20 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' -import { renderWithProviders } from '@opentrons/components' +import { vi, it, describe, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useRequiredProtocolLabware } from '../../Protocols/hooks' import { Labware } from '../Labware' -import fixture_tiprack_10_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_10_ul.json' -import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' -import fixture_96_plate from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json' +import { + fixtureTiprack10ul, + fixtureTiprack300ul, + fixture96Plate, +} from '@opentrons/shared-data' import type { LabwareDefinition2 } from '@opentrons/shared-data' -jest.mock('../../Protocols/hooks') - -const mockUseRequiredProtocolLabware = useRequiredProtocolLabware as jest.MockedFunction< - typeof useRequiredProtocolLabware -> +vi.mock('../../Protocols/hooks') const MOCK_PROTOCOL_ID = 'mock_protocol_id' @@ -31,32 +30,32 @@ describe('Labware', () => { props = { protocolId: MOCK_PROTOCOL_ID, } - when(mockUseRequiredProtocolLabware) + when(vi.mocked(useRequiredProtocolLabware)) .calledWith(MOCK_PROTOCOL_ID) - .mockReturnValue([ + .thenReturn([ { - definition: fixture_tiprack_10_ul as LabwareDefinition2, + definition: fixtureTiprack10ul as LabwareDefinition2, initialLocation: { slotName: '1' }, moduleLocation: null, moduleModel: null, nickName: null, }, { - definition: fixture_tiprack_300_ul as LabwareDefinition2, + definition: fixtureTiprack300ul as LabwareDefinition2, initialLocation: { slotName: '3' }, moduleLocation: null, moduleModel: null, nickName: null, }, { - definition: fixture_96_plate as LabwareDefinition2, + definition: fixture96Plate as LabwareDefinition2, initialLocation: { slotName: '5' }, moduleLocation: null, moduleModel: null, nickName: null, }, { - definition: fixture_tiprack_10_ul as LabwareDefinition2, + definition: fixtureTiprack10ul as LabwareDefinition2, initialLocation: { slotName: '7' }, moduleLocation: null, moduleModel: null, @@ -65,7 +64,7 @@ describe('Labware', () => { ]) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render column headers that indicate where the labware is, what is called, and how many are required', () => { diff --git a/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx b/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx index c6a2728b284..f6e665f63e3 100644 --- a/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/Liquids.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { vi, it, describe, beforeEach } from 'vitest' import { UseQueryResult } from 'react-query' -import { when } from 'jest-when' +import { when } from 'vitest-when' import { useProtocolAnalysisAsDocumentQuery, useProtocolQuery, @@ -10,26 +11,14 @@ import { parseLiquidsInLoadOrder, Protocol, } from '@opentrons/api-client' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { Liquids } from '../Liquids' import { CompletedProtocolAnalysis } from '@opentrons/shared-data' -jest.mock('@opentrons/api-client') -jest.mock('@opentrons/react-api-client') +vi.mock('@opentrons/api-client') +vi.mock('@opentrons/react-api-client') -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> -const mockParseLiquidsInLoadOrder = parseLiquidsInLoadOrder as jest.MockedFunction< - typeof parseLiquidsInLoadOrder -> -const mockParseLabwareInfoByLiquidId = parseLabwareInfoByLiquidId as jest.MockedFunction< - typeof parseLabwareInfoByLiquidId -> const MOCK_PROTOCOL_ID = 'mockProtocolId' const MOCK_PROTOCOL_ANALYSIS = { id: 'fake_protocol_analysis', @@ -192,22 +181,24 @@ describe('Liquids', () => { props = { protocolId: MOCK_PROTOCOL_ID, } - mockParseLiquidsInLoadOrder.mockReturnValue(MOCK_LIQUIDS_IN_LOAD_ORDER) - mockParseLabwareInfoByLiquidId.mockReturnValue( + vi.mocked(parseLiquidsInLoadOrder).mockReturnValue( + MOCK_LIQUIDS_IN_LOAD_ORDER + ) + vi.mocked(parseLabwareInfoByLiquidId).mockReturnValue( MOCK_LABWARE_INFO_BY_LIQUID_ID ) - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(MOCK_PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ data: { data: { analysisSummaries: [{ id: MOCK_PROTOCOL_ANALYSIS.id }] }, } as any, } as UseQueryResult) - when(mockUseProtocolAnalysisAsDocumentQuery) + when(vi.mocked(useProtocolAnalysisAsDocumentQuery)) .calledWith(MOCK_PROTOCOL_ID, MOCK_PROTOCOL_ANALYSIS.id, { enabled: true, }) - .mockReturnValue({ + .thenReturn({ data: MOCK_PROTOCOL_ANALYSIS as any, } as UseQueryResult) }) diff --git a/app/src/pages/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/pages/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index c7a97a624a4..9ce85aa05bc 100644 --- a/app/src/pages/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/pages/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent, screen, waitFor } from '@testing-library/react' -import { when, resetAllWhenMocks } from 'jest-when' -import { Route } from 'react-router' -import { MemoryRouter } from 'react-router-dom' -import '@testing-library/jest-dom' -import { renderWithProviders } from '@opentrons/components' +import { when } from 'vitest-when' +import { Route, MemoryRouter } from 'react-router-dom' +import '@testing-library/jest-dom/vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { deleteProtocol, deleteRun, @@ -29,9 +29,9 @@ import { Labware } from '../Labware' // Mock IntersectionObserver class IntersectionObserver { - observe = jest.fn() - disconnect = jest.fn() - unobserve = jest.fn() + observe = vi.fn() + disconnect = vi.fn() + unobserve = vi.fn() } Object.defineProperty(window, 'IntersectionObserver', { @@ -40,47 +40,19 @@ Object.defineProperty(window, 'IntersectionObserver', { value: IntersectionObserver, }) -jest.mock('@opentrons/api-client') -jest.mock('@opentrons/react-api-client') -jest.mock('../../../organisms/OnDeviceDisplay/RobotDashboard/hooks') -jest.mock( +vi.mock('@opentrons/api-client') +vi.mock('@opentrons/react-api-client') +vi.mock('../../../organisms/OnDeviceDisplay/RobotDashboard/hooks') +vi.mock( '../../../organisms/ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis' ) -jest.mock('../../Protocols/hooks') -jest.mock('../Deck') -jest.mock('../Hardware') -jest.mock('../Labware') +vi.mock('../../Protocols/hooks') +vi.mock('../Deck') +vi.mock('../Hardware') +vi.mock('../Labware') const MOCK_HOST_CONFIG = {} as HostConfig -const mockCreateRun = jest.fn((id: string) => {}) -const mockHardware = Hardware as jest.MockedFunction -const mockLabware = Labware as jest.MockedFunction -const mockDeck = Deck as jest.MockedFunction -const mockUseCreateRunMutation = useCreateRunMutation as jest.MockedFunction< - typeof useCreateRunMutation -> -const mockuseHost = useHost as jest.MockedFunction -const mockGetProtocol = getProtocol as jest.MockedFunction -const mockDeleteProtocol = deleteProtocol as jest.MockedFunction< - typeof deleteProtocol -> -const mockDeleteRun = deleteRun as jest.MockedFunction -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> -const mockUseMissingProtocolHardware = useMissingProtocolHardware as jest.MockedFunction< - typeof useMissingProtocolHardware -> -const mockUseOffsetCandidatesForAnalysis = useOffsetCandidatesForAnalysis as jest.MockedFunction< - typeof useOffsetCandidatesForAnalysis -> - -const mockUseHardwareStatusText = useHardwareStatusText as jest.MockedFunction< - typeof useHardwareStatusText -> +const mockCreateRun = vi.fn((id: string) => {}) const MOCK_DATA = { data: { @@ -116,30 +88,35 @@ const render = (path = '/protocols/fakeProtocolId') => { describe('ODDProtocolDetails', () => { beforeEach(() => { - mockUseCreateRunMutation.mockReturnValue({ + vi.mocked(useCreateRunMutation).mockReturnValue({ createRun: mockCreateRun, } as any) - mockUseHardwareStatusText.mockReturnValue('mock missing hardware chip text') - mockUseOffsetCandidatesForAnalysis.mockReturnValue([]) - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useHardwareStatusText).mockReturnValue( + 'mock missing hardware chip text' + ) + vi.mocked(useOffsetCandidatesForAnalysis).mockReturnValue([]) + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: [], isLoading: false, conflictedSlots: [], }) - mockUseProtocolQuery.mockReturnValue({ + vi.mocked(useProtocolQuery).mockReturnValue({ data: MOCK_DATA, isLoading: false, } as any) - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: { id: 'mockAnalysisId', status: 'completed', }, } as any) - when(mockuseHost).calledWith().mockReturnValue(MOCK_HOST_CONFIG) + when(vi.mocked(useHost)).calledWith().thenReturn(MOCK_HOST_CONFIG) + vi.mocked(getProtocol).mockResolvedValue({ + data: { links: { referencingRuns: [{ id: '1' }, { id: '2' }] } }, + }) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('renders protocol truncated name that expands when clicked', () => { @@ -177,9 +154,9 @@ describe('ODDProtocolDetails', () => { screen.getByText('Pin protocol') }) it('renders the delete protocol button', async () => { - when(mockGetProtocol) + when(vi.mocked(getProtocol)) .calledWith(MOCK_HOST_CONFIG, 'fakeProtocolId') - .mockResolvedValue({ + .thenResolve({ data: { links: { referencingRuns: [{ id: '1' }, { id: '2' }] } }, } as any) render() @@ -188,22 +165,22 @@ describe('ODDProtocolDetails', () => { const confirmDeleteButton = screen.getByText('Delete') fireEvent.click(confirmDeleteButton) await waitFor(() => - expect(mockDeleteRun).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '1') + expect(vi.mocked(deleteRun)).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '1') ) await waitFor(() => - expect(mockDeleteRun).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '2') + expect(vi.mocked(deleteRun)).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '2') ) await waitFor(() => - expect(mockDeleteProtocol).toHaveBeenCalledWith( + expect(vi.mocked(deleteProtocol)).toHaveBeenCalledWith( MOCK_HOST_CONFIG, 'fakeProtocolId' ) ) }) it('renders the navigation buttons', () => { - mockHardware.mockReturnValue(
Mock Hardware
) - mockLabware.mockReturnValue(
Mock Labware
) - mockDeck.mockReturnValue(
Mock Initial Deck Layout
) + vi.mocked(Hardware).mockReturnValue(
Mock Hardware
) + vi.mocked(Labware).mockReturnValue(
Mock Labware
) + vi.mocked(Deck).mockReturnValue(
Mock Initial Deck Layout
) render() const hardwareButton = screen.getByRole('button', { name: 'Hardware' }) fireEvent.click(hardwareButton) @@ -221,7 +198,7 @@ describe('ODDProtocolDetails', () => { screen.getByText('A short mock protocol') }) it('should render a loading skeleton while awaiting a response from the server', () => { - mockUseProtocolQuery.mockReturnValue({ + vi.mocked(useProtocolQuery).mockReturnValue({ data: MOCK_DATA, isLoading: true, } as any) diff --git a/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx b/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx index d204e56da57..1a099db3017 100644 --- a/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx +++ b/app/src/pages/ProtocolSetup/__tests__/ConfirmAttachedModal.test.tsx @@ -1,13 +1,14 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { ConfirmAttachedModal } from '../../../pages/ProtocolSetup/ConfirmAttachedModal' -const mockOnCloseClick = jest.fn() -const mockOnConfirmClick = jest.fn() +const mockOnCloseClick = vi.fn() +const mockOnConfirmClick = vi.fn() const render = (props: React.ComponentProps) => { return renderWithProviders(, { diff --git a/app/src/pages/ProtocolSetup/__tests__/ProtocolSetup.test.tsx b/app/src/pages/ProtocolSetup/__tests__/ProtocolSetup.test.tsx index 196fde2acad..fd304497695 100644 --- a/app/src/pages/ProtocolSetup/__tests__/ProtocolSetup.test.tsx +++ b/app/src/pages/ProtocolSetup/__tests__/ProtocolSetup.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 { fireEvent, screen } from '@testing-library/react' -import { when, resetAllWhenMocks } from 'jest-when' +import { when } from 'vitest-when' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { RUN_STATUS_IDLE } from '@opentrons/api-client' import { @@ -14,14 +14,14 @@ import { useDeckConfigurationQuery, useProtocolAnalysisAsDocumentQuery, } from '@opentrons/react-api-client' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { mockHeaterShaker } from '../../../redux/modules/__fixtures__' import { - FLEX_ROBOT_TYPE, getDeckDefFromRobotType, + FLEX_ROBOT_TYPE, STAGING_AREA_RIGHT_SLOT_FIXTURE, + flexDeckDefV4, } from '@opentrons/shared-data' -import ot3StandardDeckDef from '@opentrons/shared-data/deck/definitions/4/ot3_standard.json' import { i18n } from '../../../i18n' import { useToaster } from '../../../organisms/ToasterOven' @@ -58,12 +58,13 @@ import type { DeckConfiguration, CompletedProtocolAnalysis, } from '@opentrons/shared-data' +import type * as SharedData from '@opentrons/shared-data' // Mock IntersectionObserver class IntersectionObserver { - observe = jest.fn() - disconnect = jest.fn() - unobserve = jest.fn() + observe = vi.fn() + disconnect = vi.fn() + unobserve = vi.fn() } Object.defineProperty(window, 'IntersectionObserver', { @@ -72,108 +73,32 @@ Object.defineProperty(window, 'IntersectionObserver', { value: IntersectionObserver, }) -jest.mock('@opentrons/shared-data/js/helpers') -jest.mock('@opentrons/react-api-client') -jest.mock('../../../organisms/LabwarePositionCheck/useLaunchLPC') -jest.mock('../../../organisms/Devices/hooks') -jest.mock( +vi.mock('@opentrons/shared-data', async importOriginal => { + const sharedData = await importOriginal() + return { + ...sharedData, + getDeckDefFromRobotType: vi.fn(), + } +}) + +vi.mock('@opentrons/react-api-client') +vi.mock('../../../organisms/LabwarePositionCheck/useLaunchLPC') +vi.mock('../../../organisms/Devices/hooks') +vi.mock( '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis' ) -jest.mock('../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo') -jest.mock('../../../organisms/ProtocolSetupModulesAndDeck') -jest.mock('../../../organisms/ProtocolSetupModulesAndDeck/utils') -jest.mock('../../../organisms/OnDeviceDisplay/RunningProtocol') -jest.mock('../../../organisms/RunTimeControl/hooks') -jest.mock('../../../organisms/ProtocolSetupLiquids') -jest.mock('../../../organisms/ModuleCard/hooks') -jest.mock('../../../redux/discovery/selectors') -jest.mock('../ConfirmAttachedModal') -jest.mock('../../../organisms/ToasterOven') -jest.mock('../../../resources/deck_configuration/hooks') -jest.mock('../../../resources/runs/useNotifyRunQuery') - -const mockGetDeckDefFromRobotType = getDeckDefFromRobotType as jest.MockedFunction< - typeof getDeckDefFromRobotType -> -const mockUseAttachedModules = useAttachedModules as jest.MockedFunction< - typeof useAttachedModules -> -const mockUseRunCreatedAtTimestamp = useRunCreatedAtTimestamp as jest.MockedFunction< - typeof useRunCreatedAtTimestamp -> -const mockGetProtocolModulesInfo = getProtocolModulesInfo as jest.MockedFunction< - typeof getProtocolModulesInfo -> -const mockProtocolSetupModulesAndDeck = ProtocolSetupModulesAndDeck as jest.MockedFunction< - typeof ProtocolSetupModulesAndDeck -> -const mockGetUnmatchedModulesForProtocol = getUnmatchedModulesForProtocol as jest.MockedFunction< - typeof getUnmatchedModulesForProtocol -> -const mockConfirmCancelRunModal = ConfirmCancelRunModal as jest.MockedFunction< - typeof ConfirmCancelRunModal -> -const mockUseRunControls = useRunControls as jest.MockedFunction< - typeof useRunControls -> -const mockUseRunStatus = useRunStatus as jest.MockedFunction< - typeof useRunStatus -> -const mockProtocolSetupLiquids = ProtocolSetupLiquids as jest.MockedFunction< - typeof ProtocolSetupLiquids -> -const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction< - typeof useNotifyRunQuery -> -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< - typeof useInstrumentsQuery -> -const mockUseAllPipetteOffsetCalibrationsQuery = useAllPipetteOffsetCalibrationsQuery as jest.MockedFunction< - typeof useAllPipetteOffsetCalibrationsQuery -> -const mockUseLaunchLPC = useLaunchLPC as jest.MockedFunction< - typeof useLaunchLPC -> -const mockUseLPCDisabledReason = useLPCDisabledReason as jest.MockedFunction< - typeof useLPCDisabledReason -> -const mockUseIsHeaterShakerInProtocol = useIsHeaterShakerInProtocol as jest.MockedFunction< - typeof useIsHeaterShakerInProtocol -> -const mockUseRobotType = useRobotType as jest.MockedFunction< - typeof useRobotType -> -const mockConfirmAttachedModal = ConfirmAttachedModal as jest.MockedFunction< - typeof ConfirmAttachedModal -> -const mockUseDoorQuery = useDoorQuery as jest.MockedFunction< - typeof useDoorQuery -> -const mockUseModulesQuery = useModulesQuery as jest.MockedFunction< - typeof useModulesQuery -> -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> -const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction< - typeof useDeckConfigurationQuery -> -const mockUseToaster = useToaster as jest.MockedFunction -const mockUseModuleCalibrationStatus = useModuleCalibrationStatus as jest.MockedFunction< - typeof useModuleCalibrationStatus -> -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> -const mockUseDeckConfigurationCompatibility = useDeckConfigurationCompatibility as jest.MockedFunction< - typeof useDeckConfigurationCompatibility -> -const mockUseTrackProtocolRunEvent = useTrackProtocolRunEvent as jest.MockedFunction< - typeof useTrackProtocolRunEvent -> +vi.mock('../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo') +vi.mock('../../../organisms/ProtocolSetupModulesAndDeck') +vi.mock('../../../organisms/ProtocolSetupModulesAndDeck/utils') +vi.mock('../../../organisms/OnDeviceDisplay/RunningProtocol') +vi.mock('../../../organisms/RunTimeControl/hooks') +vi.mock('../../../organisms/ProtocolSetupLiquids') +vi.mock('../../../organisms/ModuleCard/hooks') +vi.mock('../../../redux/discovery/selectors') +vi.mock('../ConfirmAttachedModal') +vi.mock('../../../organisms/ToasterOven') +vi.mock('../../../resources/deck_configuration/hooks') +vi.mock('../../../resources/runs/useNotifyRunQuery') const render = (path = '/') => { return renderWithProviders( @@ -225,7 +150,7 @@ const mockLiquids = [ }, ] -const mockPlay = jest.fn() +const mockPlay = vi.fn() const mockOffset = { id: 'fake_labware_offset', createdAt: 'timestamp', @@ -245,32 +170,23 @@ const mockFixture = { cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE, } -const MOCK_MAKE_SNACKBAR = jest.fn() -const mockTrackProtocolRunEvent = jest.fn() +const MOCK_MAKE_SNACKBAR = vi.fn() +const mockTrackProtocolRunEvent = vi.fn() describe('ProtocolSetup', () => { - let mockLaunchLPC: jest.Mock + let mockLaunchLPC: vi.Mock beforeEach(() => { - mockLaunchLPC = jest.fn() - mockUseLPCDisabledReason.mockReturnValue(null) - mockUseAttachedModules.mockReturnValue([]) - mockProtocolSetupModulesAndDeck.mockReturnValue( -
Mock ProtocolSetupModulesAndDeck
- ) - mockProtocolSetupLiquids.mockReturnValue( -
Mock ProtocolSetupLiquids
- ) - mockConfirmCancelRunModal.mockReturnValue( -
Mock ConfirmCancelRunModal
- ) - mockUseModuleCalibrationStatus.mockReturnValue({ complete: true }) - mockGetLocalRobot.mockReturnValue({ name: ROBOT_NAME } as any) - when(mockUseRobotType) + mockLaunchLPC = vi.fn() + vi.mocked(useLPCDisabledReason).mockReturnValue(null) + vi.mocked(useAttachedModules).mockReturnValue([]) + vi.mocked(useModuleCalibrationStatus).mockReturnValue({ complete: true }) + vi.mocked(getLocalRobot).mockReturnValue({ name: ROBOT_NAME } as any) + when(vi.mocked(useRobotType)) .calledWith(ROBOT_NAME) - .mockReturnValue(FLEX_ROBOT_TYPE) - when(mockUseRunControls) + .thenReturn(FLEX_ROBOT_TYPE) + when(vi.mocked(useRunControls)) .calledWith(RUN_ID) - .mockReturnValue({ + .thenReturn({ play: mockPlay, pause: () => {}, stop: () => {}, @@ -280,25 +196,25 @@ describe('ProtocolSetup', () => { isStopRunActionLoading: false, isResetRunLoading: false, }) - when(mockUseRunStatus).calledWith(RUN_ID).mockReturnValue(RUN_STATUS_IDLE) - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + when(vi.mocked(useRunStatus)).calledWith(RUN_ID).thenReturn(RUN_STATUS_IDLE) + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: mockEmptyAnalysis, } as any) - when(mockUseRunCreatedAtTimestamp) + when(vi.mocked(useRunCreatedAtTimestamp)) .calledWith(RUN_ID) - .mockReturnValue(CREATED_AT) - when(mockGetProtocolModulesInfo) - .calledWith(mockEmptyAnalysis, ot3StandardDeckDef as any) - .mockReturnValue([]) - when(mockGetUnmatchedModulesForProtocol) + .thenReturn(CREATED_AT) + when(vi.mocked(getProtocolModulesInfo)) + .calledWith(mockEmptyAnalysis, flexDeckDefV4 as any) + .thenReturn([]) + when(vi.mocked(getUnmatchedModulesForProtocol)) .calledWith([], []) - .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] }) - when(mockGetDeckDefFromRobotType) + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [] }) + when(vi.mocked(getDeckDefFromRobotType)) .calledWith('OT-3 Standard') - .mockReturnValue(ot3StandardDeckDef as any) - when(mockUseNotifyRunQuery) + .thenReturn(flexDeckDefV4 as any) + when(vi.mocked(useNotifyRunQuery)) .calledWith(RUN_ID, { staleTime: Infinity }) - .mockReturnValue({ + .thenReturn({ data: { data: { protocolId: PROTOCOL_ID, @@ -306,52 +222,48 @@ describe('ProtocolSetup', () => { }, }, } as any) - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(PROTOCOL_ID, { staleTime: Infinity }) - .mockReturnValue({ + .thenReturn({ data: { data: { metadata: { protocolName: PROTOCOL_NAME } } }, } as any) - when(mockUseInstrumentsQuery) + when(vi.mocked(useInstrumentsQuery)) .calledWith() - .mockReturnValue({ + .thenReturn({ data: { data: [mockLeftPipetteData, mockRightPipetteData, mockGripperData], }, } as any) - when(mockUseAllPipetteOffsetCalibrationsQuery) + when(vi.mocked(useAllPipetteOffsetCalibrationsQuery)) .calledWith() - .mockReturnValue({ data: { data: [] } } as any) - when(mockUseLaunchLPC) + .thenReturn({ data: { data: [] } } as any) + when(vi.mocked(useLaunchLPC)) .calledWith(RUN_ID, FLEX_ROBOT_TYPE, PROTOCOL_NAME) - .mockReturnValue({ + .thenReturn({ launchLPC: mockLaunchLPC, LPCWizard:
mock LPC Wizard
, }) - mockUseIsHeaterShakerInProtocol.mockReturnValue(false) - mockConfirmAttachedModal.mockReturnValue( -
mock ConfirmAttachedModal
- ) - mockUseDoorQuery.mockReturnValue({ data: mockDoorStatus } as any) - mockUseModulesQuery.mockReturnValue({ + vi.mocked(useIsHeaterShakerInProtocol).mockReturnValue(false) + vi.mocked(useDoorQuery).mockReturnValue({ data: mockDoorStatus } as any) + vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [mockHeaterShaker] }, } as any) - mockUseDeckConfigurationQuery.mockReturnValue({ + vi.mocked(useDeckConfigurationQuery).mockReturnValue({ data: [mockFixture], } as UseQueryResult) - when(mockUseToaster) + when(vi.mocked(useToaster)) .calledWith() - .mockReturnValue(({ + .thenReturn(({ makeSnackbar: MOCK_MAKE_SNACKBAR, } as unknown) as any) - when(mockUseDeckConfigurationCompatibility).mockReturnValue([]) - when(mockUseTrackProtocolRunEvent) + vi.mocked(useDeckConfigurationCompatibility).mockReturnValue([]) + when(vi.mocked(useTrackProtocolRunEvent)) .calledWith(RUN_ID) - .mockReturnValue({ trackProtocolRunEvent: mockTrackProtocolRunEvent }) + .thenReturn({ trackProtocolRunEvent: mockTrackProtocolRunEvent }) }) afterEach(() => { - jest.resetAllMocks() - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render text, image, and buttons', () => { @@ -373,49 +285,46 @@ describe('ProtocolSetup', () => { it('should launch cancel modal when click close button', () => { render(`/runs/${RUN_ID}/setup/`) - expect(screen.queryByText('Mock ConfirmCancelRunModal')).toBeNull() fireEvent.click(screen.getByRole('button', { name: 'close' })) - screen.getByText('Mock ConfirmCancelRunModal') + expect(vi.mocked(ConfirmCancelRunModal)).toHaveBeenCalled() }) it('should launch protocol setup modules screen when click modules', () => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: mockRobotSideAnalysis, } as any) - when(mockGetProtocolModulesInfo) - .calledWith(mockRobotSideAnalysis, ot3StandardDeckDef as any) - .mockReturnValue(mockProtocolModuleInfo) - when(mockGetUnmatchedModulesForProtocol) + when(vi.mocked(getProtocolModulesInfo)) + .calledWith(mockRobotSideAnalysis, flexDeckDefV4 as any) + .thenReturn(mockProtocolModuleInfo) + when(vi.mocked(getUnmatchedModulesForProtocol)) .calledWith([], mockProtocolModuleInfo) - .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] }) + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [] }) render(`/runs/${RUN_ID}/setup/`) - expect(screen.queryByText('Mock ProtocolSetupModulesAndDeck')).toBeNull() fireEvent.click(screen.getByText('Modules & deck')) - screen.getByText('Mock ProtocolSetupModulesAndDeck') + expect(vi.mocked(ProtocolSetupModulesAndDeck)).toHaveBeenCalled() }) it('should launch protocol setup liquids screen when click liquids', () => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: { ...mockRobotSideAnalysis, liquids: mockLiquids }, } as any) - when(mockGetProtocolModulesInfo) + when(vi.mocked(getProtocolModulesInfo)) .calledWith( { ...mockRobotSideAnalysis, liquids: mockLiquids }, - ot3StandardDeckDef as any + flexDeckDefV4 as any ) - .mockReturnValue(mockProtocolModuleInfo) - when(mockGetUnmatchedModulesForProtocol) + .thenReturn(mockProtocolModuleInfo) + when(vi.mocked(getUnmatchedModulesForProtocol)) .calledWith([], mockProtocolModuleInfo) - .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] }) + .thenReturn({ missingModuleIds: [], remainingAttachedModules: [] }) render(`/runs/${RUN_ID}/setup/`) - expect(screen.queryByText('Mock ProtocolSetupLiquids')).toBeNull() screen.getByText('1 initial liquid') fireEvent.click(screen.getByText('Liquids')) - screen.getByText('Mock ProtocolSetupLiquids') + expect(vi.mocked(ProtocolSetupLiquids)).toHaveBeenCalled() }) it('should launch LPC when clicked', () => { - mockUseLPCDisabledReason.mockReturnValue(null) + vi.mocked(useLPCDisabledReason).mockReturnValue(null) render(`/runs/${RUN_ID}/setup/`) screen.getByText(/Recommended/) screen.getByText(/1 offset applied/) @@ -425,13 +334,13 @@ describe('ProtocolSetup', () => { }) it('should render a confirmation modal when heater-shaker is in a protocol and it is not shaking', () => { - mockUseIsHeaterShakerInProtocol.mockReturnValue(true) + vi.mocked(useIsHeaterShakerInProtocol).mockReturnValue(true) render(`/runs/${RUN_ID}/setup/`) fireEvent.click(screen.getByRole('button', { name: 'play' })) - screen.getByText('mock ConfirmAttachedModal') + expect(vi.mocked(ConfirmAttachedModal)).toHaveBeenCalled() }) it('should render a loading skeleton while awaiting a response from the server', () => { - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: null, } as any) render(`/runs/${RUN_ID}/setup/`) @@ -445,7 +354,7 @@ describe('ProtocolSetup', () => { doorRequiredClosedForProtocol: true, }, } - mockUseDoorQuery.mockReturnValue({ data: mockOpenDoorStatus } as any) + vi.mocked(useDoorQuery).mockReturnValue({ data: mockOpenDoorStatus } as any) render(`/runs/${RUN_ID}/setup/`) fireEvent.click(screen.getByRole('button', { name: 'play' })) expect(MOCK_MAKE_SNACKBAR).toBeCalledWith( diff --git a/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index 02d8d06ff7b..79c9636c106 100644 --- a/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/pages/Protocols/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,11 +1,8 @@ import * as React from 'react' -import { Route } from 'react-router' -import { MemoryRouter } from 'react-router-dom' -import { resetAllWhenMocks, when } from 'jest-when' -import { - componentPropsMatcher, - renderWithProviders, -} from '@opentrons/components' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { Route, MemoryRouter } from 'react-router-dom' +import { when } from 'vitest-when' +import { renderWithProviders } from '../../../../__testing-utils__' import { i18n } from '../../../../i18n' import { getStoredProtocol } from '../../../../redux/protocol-storage' @@ -18,15 +15,8 @@ import type { State } from '../../../../redux/types' const mockProtocolKey = 'protocolKeyStub' -jest.mock('../../../../redux/protocol-storage') -jest.mock('../../../../organisms/ProtocolDetails') - -const mockGetStoredProtocol = getStoredProtocol as jest.MockedFunction< - typeof getStoredProtocol -> -const mockProtocolDetailsContents = ProtocolDetailsContents as jest.MockedFunction< - typeof ProtocolDetailsContents -> +vi.mock('../../../../redux/protocol-storage') +vi.mock('../../../../organisms/ProtocolDetails') const MOCK_STATE: State = { protocolStorage: { @@ -59,35 +49,33 @@ const render = (path = '/') => { describe('ProtocolDetails', () => { beforeEach(() => { - when(mockGetStoredProtocol) + when(vi.mocked(getStoredProtocol)) .calledWith(MOCK_STATE, mockProtocolKey) - .mockReturnValue(storedProtocolData) - when(mockProtocolDetailsContents) - .calledWith( - componentPropsMatcher({ - protocolKey: storedProtocolData.protocolKey, - modified: storedProtocolData.modified, - mostRecentAnalysis: storedProtocolData.mostRecentAnalysis, - srcFileNames: storedProtocolData.srcFileNames, - srcFiles: storedProtocolData.srcFiles, - }) - ) - .mockReturnValue(
mock protocol details
) + .thenReturn(storedProtocolData) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render protocol details', () => { - const { getByText } = render('/protocols/protocolKeyStub') - getByText('mock protocol details') + render('/protocols/protocolKeyStub') + expect(vi.mocked(ProtocolDetailsContents)).toHaveBeenCalledWith( + { + protocolKey: storedProtocolData.protocolKey, + modified: storedProtocolData.modified, + mostRecentAnalysis: storedProtocolData.mostRecentAnalysis, + srcFileNames: storedProtocolData.srcFileNames, + srcFiles: storedProtocolData.srcFiles, + }, + {} + ) }) it('should redirect to protocols landing if there is no protocol', () => { - when(mockGetStoredProtocol) + when(vi.mocked(getStoredProtocol)) .calledWith(MOCK_STATE, mockProtocolKey) - .mockReturnValue(null) + .thenReturn(null) const { getByText } = render('/protocols') getByText('protocols') }) diff --git a/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx b/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx index be4ac2268e0..cc3f56c84b0 100644 --- a/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx +++ b/app/src/pages/Protocols/ProtocolsLanding/__tests__/ProtocolsLanding.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { renderWithProviders } from '@opentrons/components' +import { vi, it, describe } from 'vitest' +import { renderWithProviders } from '../../../../__testing-utils__' import { ProtocolsEmptyState } from '../../../../organisms/ProtocolsLanding/ProtocolsEmptyState' import { getStoredProtocols } from '../../../../redux/protocol-storage' @@ -7,19 +8,9 @@ import { storedProtocolData } from '../../../../redux/protocol-storage/__fixture import { ProtocolList } from '../../../../organisms/ProtocolsLanding/ProtocolList' import { ProtocolsLanding } from '..' -jest.mock('../../../../redux/protocol-storage') -jest.mock('../../../../organisms/ProtocolsLanding/ProtocolsEmptyState') -jest.mock('../../../../organisms/ProtocolsLanding/ProtocolList') - -const mockGetStoredProtocols = getStoredProtocols as jest.MockedFunction< - typeof getStoredProtocols -> -const mockProtocolList = ProtocolList as jest.MockedFunction< - typeof ProtocolList -> -const mockProtocolsEmptyState = ProtocolsEmptyState as jest.MockedFunction< - typeof ProtocolsEmptyState -> +vi.mock('../../../../redux/protocol-storage') +vi.mock('../../../../organisms/ProtocolsLanding/ProtocolsEmptyState') +vi.mock('../../../../organisms/ProtocolsLanding/ProtocolList') const render = () => { return renderWithProviders()[0] @@ -27,14 +18,14 @@ const render = () => { describe('ProtocolsLanding', () => { it('renders the protocol list component', () => { - mockGetStoredProtocols.mockReturnValue([storedProtocolData]) - mockProtocolList.mockReturnValue(
mock protocol list
) + vi.mocked(getStoredProtocols).mockReturnValue([storedProtocolData]) + vi.mocked(ProtocolList).mockReturnValue(
mock protocol list
) const { getByText } = render() getByText('mock protocol list') }) it('renders the empty state component', () => { - mockGetStoredProtocols.mockReturnValue([]) - mockProtocolsEmptyState.mockReturnValue(
mock empty state
) + vi.mocked(getStoredProtocols).mockReturnValue([]) + vi.mocked(ProtocolsEmptyState).mockReturnValue(
mock empty state
) const { getByText } = render() getByText('mock empty state') }) diff --git a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx index dad134575ef..54a9c0455e0 100644 --- a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx +++ b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx @@ -1,6 +1,7 @@ +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { UseQueryResult } from 'react-query' import { renderHook } from '@testing-library/react' -import { when, resetAllWhenMocks } from 'jest-when' +import { when } from 'vitest-when' import omitBy from 'lodash/omitBy' import { @@ -16,35 +17,20 @@ import { FLEX_SIMPLEST_DECK_CONFIG, LabwareDefinition2, WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE, + fixtureTiprack300ul, } from '@opentrons/shared-data' -import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' import { useMissingProtocolHardware, useRequiredProtocolLabware } from '..' import type { Protocol } from '@opentrons/api-client' import { mockHeaterShaker } from '../../../../redux/modules/__fixtures__' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../../organisms/Devices/hooks') -jest.mock('../../../../redux/config') +vi.mock('@opentrons/react-api-client') +vi.mock('../../../../organisms/Devices/hooks') +vi.mock('../../../../redux/config') const PROTOCOL_ID = 'fake_protocol_id' -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< - typeof useInstrumentsQuery -> -const mockUseModulesQuery = useModulesQuery as jest.MockedFunction< - typeof useModulesQuery -> -const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction< - typeof useDeckConfigurationQuery -> -const mockUseProtocolAnalysisAsDocumentQuery = useProtocolAnalysisAsDocumentQuery as jest.MockedFunction< - typeof useProtocolAnalysisAsDocumentQuery -> -const mockLabwareDef = fixture_tiprack_300_ul as LabwareDefinition2 +const mockLabwareDef = fixtureTiprack300ul as LabwareDefinition2 const PROTOCOL_ANALYSIS = { id: 'fake analysis', status: 'completed', @@ -124,27 +110,27 @@ const NULL_PROTOCOL_ANALYSIS = { describe('useRequiredProtocolLabware', () => { beforeEach(() => { - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ data: { data: { analysisSummaries: [{ id: PROTOCOL_ANALYSIS.id } as any] }, }, } as UseQueryResult) - when(mockUseProtocolAnalysisAsDocumentQuery) + when(vi.mocked(useProtocolAnalysisAsDocumentQuery)) .calledWith(PROTOCOL_ID, PROTOCOL_ANALYSIS.id, { enabled: true }) - .mockReturnValue({ + .thenReturn({ data: PROTOCOL_ANALYSIS, } as UseQueryResult) - when(mockUseProtocolAnalysisAsDocumentQuery) + when(vi.mocked(useProtocolAnalysisAsDocumentQuery)) .calledWith(PROTOCOL_ID, NULL_PROTOCOL_ANALYSIS.id, { enabled: true }) - .mockReturnValue({ + .thenReturn({ data: NULL_PROTOCOL_ANALYSIS, } as UseQueryResult) }) afterEach(() => { - resetAllWhenMocks() + vi.resetAllMocks() }) it('should return LabwareSetupItem array', () => { @@ -158,9 +144,9 @@ describe('useRequiredProtocolLabware', () => { }) it('should return empty array when there is no match with protocol id', () => { - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(PROTOCOL_ID) - .mockReturnValue({ + .thenReturn({ data: { data: { analysisSummaries: [{ id: NULL_PROTOCOL_ANALYSIS.id } as any], @@ -175,29 +161,29 @@ describe('useRequiredProtocolLabware', () => { describe('useMissingProtocolHardware', () => { let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: { data: [] }, isLoading: false, } as any) - mockUseModulesQuery.mockReturnValue({ + vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [] }, isLoading: false, } as any) - mockUseProtocolQuery.mockReturnValue({ + vi.mocked(useProtocolQuery).mockReturnValue({ data: { data: { analysisSummaries: [{ id: PROTOCOL_ANALYSIS.id } as any] }, }, } as UseQueryResult) - mockUseProtocolAnalysisAsDocumentQuery.mockReturnValue({ + vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({ data: PROTOCOL_ANALYSIS, } as UseQueryResult) - mockUseDeckConfigurationQuery.mockReturnValue({ + vi.mocked(useDeckConfigurationQuery).mockReturnValue({ data: [{}], } as UseQueryResult) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should return 1 pipette and 1 module', () => { const { result } = renderHook( @@ -225,7 +211,7 @@ describe('useMissingProtocolHardware', () => { }) }) it('should return 1 conflicted slot', () => { - mockUseDeckConfigurationQuery.mockReturnValue(({ + vi.mocked(useDeckConfigurationQuery).mockReturnValue(({ data: [ { cutoutId: 'cutoutD3', @@ -267,7 +253,7 @@ describe('useMissingProtocolHardware', () => { }) }) it('should return empty array when the correct modules and pipettes are attached', () => { - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: { data: [ { @@ -281,7 +267,7 @@ describe('useMissingProtocolHardware', () => { isLoading: false, } as any) - mockUseModulesQuery.mockReturnValue({ + vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [mockHeaterShaker] }, isLoading: false, } as any) @@ -296,7 +282,7 @@ describe('useMissingProtocolHardware', () => { }) }) it('should return conflicting slot when module location is configured with something other than single slot fixture', () => { - mockUseInstrumentsQuery.mockReturnValue({ + vi.mocked(useInstrumentsQuery).mockReturnValue({ data: { data: [ { @@ -310,12 +296,12 @@ describe('useMissingProtocolHardware', () => { isLoading: false, } as any) - mockUseModulesQuery.mockReturnValue({ + vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [mockHeaterShaker] }, isLoading: false, } as any) - mockUseDeckConfigurationQuery.mockReturnValue({ + vi.mocked(useDeckConfigurationQuery).mockReturnValue({ data: [ omitBy( FLEX_SIMPLEST_DECK_CONFIG, diff --git a/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx b/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx index 09e521b43da..25adc36b843 100644 --- a/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/AnalyticsOptInModal.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { updateConfigValue } from '../../../redux/config' @@ -11,19 +12,9 @@ import { AnalyticsOptInModal } from '../AnalyticsOptInModal' import type { DiscoveredRobot } from '../../../redux/discovery/types' -jest.mock('../../../redux/config') -jest.mock('../../../redux/discovery') -jest.mock('../../../redux/robot-settings') - -const mockUpdateConfigValue = updateConfigValue as jest.MockedFunction< - typeof updateConfigValue -> -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> -const mockUpdateSetting = updateSetting as jest.MockedFunction< - typeof updateSetting -> +vi.mock('../../../redux/config') +vi.mock('../../../redux/discovery') +vi.mock('../../../redux/robot-settings') const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -36,9 +27,11 @@ describe('AnalyticsOptInModal', () => { beforeEach(() => { props = { - setShowAnalyticsOptInModal: jest.fn(), + setShowAnalyticsOptInModal: vi.fn(), } - mockGetLocalRobot.mockReturnValue({ name: 'Otie' } as DiscoveredRobot) + vi.mocked(getLocalRobot).mockReturnValue({ + name: 'Otie', + } as DiscoveredRobot) }) it('should render text and button', () => { @@ -56,11 +49,11 @@ describe('AnalyticsOptInModal', () => { const [{ getByText }] = render(props) fireEvent.click(getByText('Opt out')) - expect(mockUpdateConfigValue).toHaveBeenCalledWith( + expect(vi.mocked(updateConfigValue)).toHaveBeenCalledWith( 'analytics.optedIn', false ) - expect(mockUpdateSetting).toHaveBeenCalledWith( + expect(vi.mocked(updateSetting)).toHaveBeenCalledWith( 'Otie', 'disableLogAggregation', true @@ -72,11 +65,11 @@ describe('AnalyticsOptInModal', () => { const [{ getByText }] = render(props) fireEvent.click(getByText('Opt in')) - expect(mockUpdateConfigValue).toHaveBeenCalledWith( + expect(vi.mocked(updateConfigValue)).toHaveBeenCalledWith( 'analytics.optedIn', true ) - expect(mockUpdateSetting).toHaveBeenCalledWith( + expect(vi.mocked(updateSetting)).toHaveBeenCalledWith( 'Otie', 'disableLogAggregation', true diff --git a/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx b/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx index 020b91b420d..a5e0c58fa93 100644 --- a/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/RobotDashboard.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { useAllProtocolsQuery } from '@opentrons/react-api-client' import { i18n } from '../../../i18n' @@ -15,49 +16,27 @@ import { RobotDashboard } from '..' import { useNotifyAllRunsQuery } from '../../../resources/runs/useNotifyAllRunsQuery' import type { ProtocolResource } from '@opentrons/shared-data' +import type * as ReactRouterDom from 'react-router-dom' -const mockPush = jest.fn() +const mockPush = vi.fn() -jest.mock('react-router-dom', () => { - const reactRouterDom = jest.requireActual('react-router-dom') +vi.mock('react-router-dom', async importOriginal => { + const actual = await importOriginal() return { - ...reactRouterDom, + ...actual, useHistory: () => ({ push: mockPush } as any), } }) -jest.mock('@opentrons/react-api-client') -jest.mock('../../../organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun') -jest.mock( +vi.mock('@opentrons/react-api-client') +vi.mock('../../../organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun') +vi.mock( '../../../organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCarousel' ) -jest.mock('../../../organisms/Navigation') -jest.mock('../../Protocols/hooks') -jest.mock('../../../redux/config') -jest.mock('../WelcomeModal') -jest.mock('../../../resources/runs/useNotifyAllRunsQuery') - -const mockNavigation = Navigation as jest.MockedFunction -const mockUseAllProtocolsQuery = useAllProtocolsQuery as jest.MockedFunction< - typeof useAllProtocolsQuery -> -const mockUseNotifyAllRunsQuery = useNotifyAllRunsQuery as jest.MockedFunction< - typeof useNotifyAllRunsQuery -> -const mockEmptyRecentRun = EmptyRecentRun as jest.MockedFunction< - typeof EmptyRecentRun -> -const mockUseMissingProtocolHardware = useMissingProtocolHardware as jest.MockedFunction< - typeof useMissingProtocolHardware -> -const mockRecentRunProtocolCarousel = RecentRunProtocolCarousel as jest.MockedFunction< - typeof RecentRunProtocolCarousel -> -const mockGetOnDeviceDisplaySettings = getOnDeviceDisplaySettings as jest.MockedFunction< - typeof getOnDeviceDisplaySettings -> -const mockWelcomeModal = WelcomeModal as jest.MockedFunction< - typeof WelcomeModal -> +vi.mock('../../../organisms/Navigation') +vi.mock('../../Protocols/hooks') +vi.mock('../../../redux/config') +vi.mock('../WelcomeModal') +vi.mock('../../../resources/runs/useNotifyAllRunsQuery') const render = () => { return renderWithProviders( @@ -95,54 +74,48 @@ const mockRunData = { describe('RobotDashboard', () => { beforeEach(() => { - mockEmptyRecentRun.mockReturnValue(
mock EmptyRecentRun
) - mockNavigation.mockReturnValue(
mock Navigation
) - mockUseAllProtocolsQuery.mockReturnValue({} as any) - mockUseNotifyAllRunsQuery.mockReturnValue({} as any) - mockUseMissingProtocolHardware.mockReturnValue({ + vi.mocked(useAllProtocolsQuery).mockReturnValue({} as any) + vi.mocked(useNotifyAllRunsQuery).mockReturnValue({} as any) + vi.mocked(useMissingProtocolHardware).mockReturnValue({ missingProtocolHardware: [], isLoading: false, conflictedSlots: [], }) - mockRecentRunProtocolCarousel.mockReturnValue( -
mock RecentRunProtocolCarousel
- ) - mockGetOnDeviceDisplaySettings.mockReturnValue({ + vi.mocked(getOnDeviceDisplaySettings).mockReturnValue({ unfinishedUnboxingFlowRoute: null, } as any) - mockWelcomeModal.mockReturnValue(
mock WelcomeModal
) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render empty recent run image and buttons', () => { - const [{ getByText }] = render() - getByText('mock Navigation') - getByText('mock EmptyRecentRun') + render() + expect(vi.mocked(Navigation)).toHaveBeenCalled() + expect(vi.mocked(EmptyRecentRun)).toHaveBeenCalled() }) it('should render a recent run protocol carousel', () => { - mockUseAllProtocolsQuery.mockReturnValue({ + vi.mocked(useAllProtocolsQuery).mockReturnValue({ data: { data: [mockProtocol], }, } as any) - mockUseNotifyAllRunsQuery.mockReturnValue({ + vi.mocked(useNotifyAllRunsQuery).mockReturnValue({ data: { data: [mockRunData] }, } as any) const [{ getByText }] = render() - getByText('mock Navigation') + expect(vi.mocked(Navigation)).toHaveBeenCalled() getByText('Run again') - getByText('mock RecentRunProtocolCarousel') + expect(vi.mocked(RecentRunProtocolCarousel)).toHaveBeenCalled() }) it('should render WelcomeModal component when finish unboxing flow', () => { - mockGetOnDeviceDisplaySettings.mockReturnValue({ + vi.mocked(getOnDeviceDisplaySettings).mockReturnValue({ unfinishedUnboxingFlowRoute: '/robot-settings/rename-robot', } as any) - const [{ getByText }] = render() - getByText('mock WelcomeModal') + render() + expect(vi.mocked(WelcomeModal)).toHaveBeenCalled() }) }) diff --git a/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx b/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx index 77ca462c490..5e48f4c0b5c 100644 --- a/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx +++ b/app/src/pages/RobotDashboard/__tests__/WelcomeModal.test.tsx @@ -1,7 +1,8 @@ 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 { i18n } from '../../../i18n' import { WelcomeModal } from '../WelcomeModal' @@ -9,14 +10,10 @@ import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import type { SetStatusBarCreateCommand } from '@opentrons/shared-data' -jest.mock('../../../redux/config') -jest.mock('@opentrons/react-api-client') +vi.mock('../../../redux/config') +vi.mock('@opentrons/react-api-client') -const mockUseCreateLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction< - typeof useCreateLiveCommandMutation -> - -const mockFunc = jest.fn() +const mockFunc = vi.fn() const WELCOME_MODAL_IMAGE_NAME = 'welcome_dashboard_modal.png' const render = (props: React.ComponentProps) => { @@ -27,16 +24,16 @@ const render = (props: React.ComponentProps) => { describe('WelcomeModal', () => { let props: React.ComponentProps - let mockCreateLiveCommand = jest.fn() + let mockCreateLiveCommand = vi.fn() beforeEach(() => { - mockCreateLiveCommand = jest.fn() + mockCreateLiveCommand = vi.fn() mockCreateLiveCommand.mockResolvedValue(null) props = { - setShowAnalyticsOptInModal: jest.fn(), + setShowAnalyticsOptInModal: vi.fn(), setShowWelcomeModal: mockFunc, } - mockUseCreateLiveCommandMutation.mockReturnValue({ + vi.mocked(useCreateLiveCommandMutation).mockReturnValue({ createLiveCommand: mockCreateLiveCommand, } as any) }) @@ -49,13 +46,13 @@ describe('WelcomeModal', () => { params: { animation: 'disco' }, } - expect(image.getAttribute('src')).toEqual(WELCOME_MODAL_IMAGE_NAME) + expect(image.getAttribute('src')).toContain(WELCOME_MODAL_IMAGE_NAME) getByText('Welcome to your dashboard!') getByText( 'A place to run protocols, manage your instruments, and view robot status.' ) getByText('Next') - expect(mockUseCreateLiveCommandMutation).toBeCalledWith() + expect(vi.mocked(useCreateLiveCommandMutation)).toBeCalledWith() expect(mockCreateLiveCommand).toBeCalledWith({ command: animationCommand, waitUntilComplete: false, diff --git a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx index 9d97faef741..271f7d3d452 100644 --- a/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx +++ b/app/src/pages/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { fireEvent } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { getRobotSettings } from '../../../redux/robot-settings' @@ -25,62 +26,22 @@ import { useLEDLights } from '../../../organisms/Devices/hooks' import { RobotSettingsDashboard } from '../../../pages/RobotSettingsDashboard' -jest.mock('../../../redux/discovery') -jest.mock('../../../redux/robot-update') -jest.mock('../../../redux/config') -jest.mock('../../../redux/robot-settings') -jest.mock('../../../resources/networking/hooks/useNetworkConnection') -jest.mock('../../../organisms/Navigation') -jest.mock('../../../organisms/RobotSettingsDashboard/TouchScreenSleep') -jest.mock('../../../organisms/RobotSettingsDashboard/NetworkSettings') -jest.mock('../../../organisms/RobotSettingsDashboard/DeviceReset') -jest.mock('../../../organisms/RobotSettingsDashboard/Privacy') -jest.mock('../../../organisms/RobotSettingsDashboard/RobotSystemVersion') -jest.mock('../../../organisms/RobotSettingsDashboard/TouchscreenBrightness') -jest.mock('../../../organisms/RobotSettingsDashboard/UpdateChannel') -jest.mock('../../../organisms/Devices/hooks') - -const mockToggleLights = jest.fn() - -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> -const mockGetRobotSettings = getRobotSettings as jest.MockedFunction< - typeof getRobotSettings -> -const mockToggleDevtools = toggleDevtools as jest.MockedFunction< - typeof toggleDevtools -> -const mockToggleHistoricOffsets = toggleHistoricOffsets as jest.MockedFunction< - typeof toggleHistoricOffsets -> -const mockNavigation = Navigation as jest.MockedFunction -const mockTouchScreenSleep = TouchScreenSleep as jest.MockedFunction< - typeof TouchScreenSleep -> -const mockNetworkSettings = NetworkSettings as jest.MockedFunction< - typeof NetworkSettings -> -const mockDeviceReset = DeviceReset as jest.MockedFunction -const mockPrivacy = Privacy as jest.MockedFunction -const mockRobotSystemVersion = RobotSystemVersion as jest.MockedFunction< - typeof RobotSystemVersion -> -const mockTouchscreenBrightness = TouchscreenBrightness as jest.MockedFunction< - typeof TouchscreenBrightness -> -const mockUpdateChannel = UpdateChannel as jest.MockedFunction< - typeof UpdateChannel -> -const mockUseLEDLights = useLEDLights as jest.MockedFunction< - typeof useLEDLights -> -const mockGetBuildrootUpdateAvailable = getRobotUpdateAvailable as jest.MockedFunction< - typeof getRobotUpdateAvailable -> -const mockUseNetworkConnection = useNetworkConnection as jest.MockedFunction< - typeof useNetworkConnection -> +vi.mock('../../../redux/discovery') +vi.mock('../../../redux/robot-update') +vi.mock('../../../redux/config') +vi.mock('../../../redux/robot-settings') +vi.mock('../../../resources/networking/hooks/useNetworkConnection') +vi.mock('../../../organisms/Navigation') +vi.mock('../../../organisms/RobotSettingsDashboard/TouchScreenSleep') +vi.mock('../../../organisms/RobotSettingsDashboard/NetworkSettings') +vi.mock('../../../organisms/RobotSettingsDashboard/DeviceReset') +vi.mock('../../../organisms/RobotSettingsDashboard/Privacy') +vi.mock('../../../organisms/RobotSettingsDashboard/RobotSystemVersion') +vi.mock('../../../organisms/RobotSettingsDashboard/TouchscreenBrightness') +vi.mock('../../../organisms/RobotSettingsDashboard/UpdateChannel') +vi.mock('../../../organisms/Devices/hooks') + +const mockToggleLights = vi.fn() const render = () => { return renderWithProviders( @@ -96,14 +57,8 @@ const render = () => { // Note kj 01/25/2023 Currently test cases only check text since this PR is bare-bones for RobotSettings Dashboard describe('RobotSettingsDashboard', () => { beforeEach(() => { - mockGetLocalRobot.mockReturnValue(mockConnectedRobot) - mockNavigation.mockReturnValue(
Mock Navigation
) - mockTouchScreenSleep.mockReturnValue(
Mock Touchscreen Sleep
) - mockNetworkSettings.mockReturnValue(
Mock Network Settings
) - mockDeviceReset.mockReturnValue(
Mock Device Reset
) - mockPrivacy.mockReturnValue(
Mock Privacy
) - mockRobotSystemVersion.mockReturnValue(
Mock Robot System Version
) - mockGetRobotSettings.mockReturnValue([ + vi.mocked(getLocalRobot).mockReturnValue(mockConnectedRobot) + vi.mocked(getRobotSettings).mockReturnValue([ { id: 'disableHomeOnBoot', title: 'Disable home on boot', @@ -112,20 +67,16 @@ describe('RobotSettingsDashboard', () => { value: true, }, ]) - mockTouchscreenBrightness.mockReturnValue( -
Mock Touchscreen Brightness
- ) - mockUpdateChannel.mockReturnValue(
Mock Update Channel
) - mockUseLEDLights.mockReturnValue({ + vi.mocked(useLEDLights).mockReturnValue({ lightsEnabled: false, toggleLights: mockToggleLights, }) - mockUseNetworkConnection.mockReturnValue({} as any) + vi.mocked(useNetworkConnection).mockReturnValue({} as any) }) it('should render Navigation', () => { const [{ getByText }] = render() - getByText('Mock Navigation') + expect(vi.mocked(Navigation)).toHaveBeenCalled() }) it('should render setting buttons', () => { @@ -159,7 +110,7 @@ describe('RobotSettingsDashboard', () => { const [{ getByText }] = render() const button = getByText('Robot System Version') fireEvent.click(button) - getByText('Mock Robot System Version') + expect(vi.mocked(RobotSystemVersion)).toHaveBeenCalled() }) it('should render text with lights off and clicking it, calls useLEDLights', () => { @@ -170,7 +121,7 @@ describe('RobotSettingsDashboard', () => { }) it('should render text with lights on', () => { - mockUseLEDLights.mockReturnValue({ + vi.mocked(useLEDLights).mockReturnValue({ lightsEnabled: true, toggleLights: mockToggleLights, }) @@ -184,46 +135,46 @@ describe('RobotSettingsDashboard', () => { const [{ getByText }] = render() const button = getByText('Network Settings') fireEvent.click(button) - getByText('Mock Network Settings') + expect(vi.mocked(NetworkSettings)).toHaveBeenCalled() }) it('should render component when tapping display touchscreen sleep', () => { const [{ getByText }] = render() const button = getByText('Touchscreen Sleep') fireEvent.click(button) - getByText('Mock Touchscreen Sleep') + expect(vi.mocked(TouchScreenSleep)).toHaveBeenCalled() }) it('should render component when tapping touchscreen brightness', () => { const [{ getByText }] = render() const button = getByText('Touchscreen Brightness') fireEvent.click(button) - getByText('Mock Touchscreen Brightness') + expect(vi.mocked(TouchscreenBrightness)).toHaveBeenCalled() }) it('should render component when tapping privacy', () => { const [{ getByText }] = render() const button = getByText('Privacy') fireEvent.click(button) - getByText('Mock Privacy') + expect(vi.mocked(Privacy)).toHaveBeenCalled() }) it('should render component when tapping device rest', () => { const [{ getByText }] = render() const button = getByText('Device Reset') fireEvent.click(button) - getByText('Mock Device Reset') + expect(vi.mocked(DeviceReset)).toHaveBeenCalled() }) it('should render component when tapping update channel', () => { const [{ getByText }] = render() const button = getByText('Update Channel') fireEvent.click(button) - getByText('Mock Update Channel') + expect(vi.mocked(UpdateChannel)).toHaveBeenCalled() }) it('should render text with home gantry off', () => { - mockGetRobotSettings.mockReturnValue([ + vi.mocked(getRobotSettings).mockReturnValue([ { id: 'disableHomeOnBoot', title: 'Disable home on boot', @@ -242,18 +193,18 @@ describe('RobotSettingsDashboard', () => { const [{ getByText }] = render() const button = getByText('Apply Labware Offsets') fireEvent.click(button) - expect(mockToggleHistoricOffsets).toHaveBeenCalled() + expect(vi.mocked(toggleHistoricOffsets)).toHaveBeenCalled() }) it('should call a mock function when tapping enable dev tools', () => { const [{ getByText }] = render() const button = getByText('Developer Tools') fireEvent.click(button) - expect(mockToggleDevtools).toHaveBeenCalled() + expect(vi.mocked(toggleDevtools)).toHaveBeenCalled() }) it('should return an update available with correct text', () => { - mockGetBuildrootUpdateAvailable.mockReturnValue('upgrade') + vi.mocked(getRobotUpdateAvailable).mockReturnValue('upgrade') const [{ getByText }] = render() getByText('Update available') }) diff --git a/app/src/pages/RunningProtocol/__tests__/RunningProtocol.test.tsx b/app/src/pages/RunningProtocol/__tests__/RunningProtocol.test.tsx index 83f4576fd6a..720dbe0cce1 100644 --- a/app/src/pages/RunningProtocol/__tests__/RunningProtocol.test.tsx +++ b/app/src/pages/RunningProtocol/__tests__/RunningProtocol.test.tsx @@ -1,15 +1,14 @@ import * as React from 'react' -import { Route } from 'react-router' import { UseQueryResult } from 'react-query' -import { MemoryRouter } from 'react-router-dom' -import { when, resetAllWhenMocks } from 'jest-when' +import { Route, MemoryRouter } from 'react-router-dom' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' +import { when } from 'vitest-when' import { RUN_STATUS_BLOCKED_BY_OPEN_DOOR, RUN_STATUS_IDLE, RUN_STATUS_STOP_REQUESTED, } from '@opentrons/api-client' -import { renderWithProviders } from '@opentrons/components' import { useAllCommandsQuery, useProtocolAnalysesQuery, @@ -17,6 +16,7 @@ import { useRunActionMutations, } from '@opentrons/react-api-client' +import { renderWithProviders } from '../../../__testing-utils__' import { mockRobotSideAnalysis } from '../../../organisms/CommandText/__fixtures__' import { CurrentRunningProtocolCommand, @@ -38,68 +38,20 @@ import { useNotifyRunQuery } from '../../../resources/runs/useNotifyRunQuery' import type { ProtocolAnalyses } from '@opentrons/api-client' -jest.mock('@opentrons/react-api-client') -jest.mock('../../../organisms/Devices/hooks') -jest.mock('../../../organisms/Devices/hooks/useLastRunCommandKey') -jest.mock('../../../organisms/RunTimeControl/hooks') -jest.mock( +vi.mock('@opentrons/react-api-client') +vi.mock('../../../organisms/Devices/hooks') +vi.mock('../../../organisms/Devices/hooks/useLastRunCommandKey') +vi.mock('../../../organisms/RunTimeControl/hooks') +vi.mock( '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis' ) -jest.mock('../../../organisms/RunTimeControl/hooks') -jest.mock('../../../organisms/OnDeviceDisplay/RunningProtocol') -jest.mock('../../../redux/discovery') -jest.mock( - '../../../organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal' -) -jest.mock('../../../organisms/OpenDoorAlertModal') -jest.mock('../../../resources/runs/useNotifyLastRunCommandKey') -jest.mock('../../../resources/runs/useNotifyRunQuery') - -const mockUseProtocolAnalysesQuery = useProtocolAnalysesQuery as jest.MockedFunction< - typeof useProtocolAnalysesQuery -> -const mockUseProtocolQuery = useProtocolQuery as jest.MockedFunction< - typeof useProtocolQuery -> -const mockUseRunStatus = useRunStatus as jest.MockedFunction< - typeof useRunStatus -> -const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction< - typeof useNotifyRunQuery -> -const mockUseRunTimestamps = useRunTimestamps as jest.MockedFunction< - typeof useRunTimestamps -> -const mockUseRunActionMutations = useRunActionMutations as jest.MockedFunction< - typeof useRunActionMutations -> -const mockUseTrackProtocolRunEvent = useTrackProtocolRunEvent as jest.MockedFunction< - typeof useTrackProtocolRunEvent -> -const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction< - typeof useMostRecentCompletedAnalysis -> -const mockCurrentRunningProtocolCommand = CurrentRunningProtocolCommand as jest.MockedFunction< - typeof CurrentRunningProtocolCommand -> -const mockRunningProtocolCommandList = RunningProtocolCommandList as jest.MockedFunction< - typeof RunningProtocolCommandList -> -const mockRunningProtocolSkeleton = RunningProtocolSkeleton as jest.MockedFunction< - typeof RunningProtocolSkeleton -> -const mockCancelingRunModal = CancelingRunModal as jest.MockedFunction< - typeof CancelingRunModal -> -const mockUseAllCommandsQuery = useAllCommandsQuery as jest.MockedFunction< - typeof useAllCommandsQuery -> -const mockOpenDoorAlertModal = OpenDoorAlertModal as jest.MockedFunction< - typeof OpenDoorAlertModal -> -const mockUseNotifyLastRunCommandKey = useNotifyLastRunCommandKey as jest.MockedFunction< - typeof useNotifyLastRunCommandKey -> +vi.mock('../../../organisms/RunTimeControl/hooks') +vi.mock('../../../organisms/OnDeviceDisplay/RunningProtocol') +vi.mock('../../../redux/discovery') +vi.mock('../../../organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal') +vi.mock('../../../organisms/OpenDoorAlertModal') +vi.mock('../../../resources/runs/useNotifyLastRunCommandKey') +vi.mock('../../../resources/runs/useNotifyRunQuery') const RUN_ID = 'run_id' const PROTOCOL_ID = 'protocol_id' @@ -109,10 +61,10 @@ const PROTOCOL_ANALYSIS = { status: 'completed', labware: [], } as any -const mockPlayRun = jest.fn() -const mockPauseRun = jest.fn() -const mockStopRun = jest.fn() -const mockTrackProtocolRunEvent = jest.fn( +const mockPlayRun = vi.fn() +const mockPauseRun = vi.fn() +const mockStopRun = vi.fn() +const mockTrackProtocolRunEvent = vi.fn( () => new Promise(resolve => resolve({})) ) @@ -128,9 +80,9 @@ const render = (path = '/') => { describe('RunningProtocol', () => { beforeEach(() => { - when(mockUseNotifyRunQuery) + when(vi.mocked(useNotifyRunQuery)) .calledWith(RUN_ID, { staleTime: Infinity }) - .mockReturnValue({ + .thenReturn({ data: { data: { id: RUN_ID, @@ -138,15 +90,15 @@ describe('RunningProtocol', () => { }, }, } as any) - when(mockUseRunStatus).calledWith(RUN_ID).mockReturnValue(RUN_STATUS_IDLE) - when(mockUseProtocolAnalysesQuery) + when(vi.mocked(useRunStatus)).calledWith(RUN_ID).thenReturn(RUN_STATUS_IDLE) + when(vi.mocked(useProtocolAnalysesQuery)) .calledWith(PROTOCOL_ID, { staleTime: Infinity }, expect.any(Boolean)) - .mockReturnValue({ + .thenReturn({ data: { data: [PROTOCOL_ANALYSIS] }, } as UseQueryResult) - when(mockUseProtocolQuery) + when(vi.mocked(useProtocolQuery)) .calledWith(PROTOCOL_ID, { staleTime: Infinity }) - .mockReturnValue({ + .thenReturn({ data: { data: { key: PROTOCOL_KEY, @@ -154,13 +106,13 @@ describe('RunningProtocol', () => { }, }, } as any) - mockUseRunTimestamps.mockReturnValue({ + vi.mocked(useRunTimestamps).mockReturnValue({ startedAt: '2022-05-04T18:24:40.833862+00:00', pausedAt: '', stoppedAt: '', completedAt: '2022-05-04T18:24:41.833862+00:00', }) - when(mockUseRunActionMutations).calledWith(RUN_ID).mockReturnValue({ + when(vi.mocked(useRunActionMutations)).calledWith(RUN_ID).thenReturn({ playRun: mockPlayRun, pauseRun: mockPauseRun, stopRun: mockStopRun, @@ -168,61 +120,49 @@ describe('RunningProtocol', () => { isPauseRunActionLoading: false, isStopRunActionLoading: false, }) - when(mockUseTrackProtocolRunEvent).calledWith(RUN_ID).mockReturnValue({ + when(vi.mocked(useTrackProtocolRunEvent)).calledWith(RUN_ID).thenReturn({ trackProtocolRunEvent: mockTrackProtocolRunEvent, }) - when(mockUseMostRecentCompletedAnalysis) + when(vi.mocked(useMostRecentCompletedAnalysis)) .calledWith(RUN_ID) - .mockReturnValue(mockRobotSideAnalysis) - mockCurrentRunningProtocolCommand.mockReturnValue( -
mock CurrentRunningProtocolCommand
- ) - mockRunningProtocolCommandList.mockReturnValue( -
mock RunningProtocolCommandList
- ) - mockRunningProtocolSkeleton.mockReturnValue( -
mock RunningProtocolSkeleton
- ) - mockCancelingRunModal.mockReturnValue(
mock CancelingRunModal
) - when(mockUseAllCommandsQuery) + .thenReturn(mockRobotSideAnalysis) + when(vi.mocked(useAllCommandsQuery)) .calledWith(RUN_ID, { cursor: null, pageLength: 1 }) - .mockReturnValue(mockUseAllCommandsResponseNonDeterministic) - mockOpenDoorAlertModal.mockReturnValue(
mock OpenDoorAlertModal
) - mockUseNotifyLastRunCommandKey.mockReturnValue({ + .thenReturn(mockUseAllCommandsResponseNonDeterministic) + vi.mocked(useNotifyLastRunCommandKey).mockReturnValue({ data: {}, } as any) }) afterEach(() => { - jest.clearAllMocks() - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render Skeleton when robotSideAnalysis does not have data', () => { - when(mockUseMostRecentCompletedAnalysis) + when(vi.mocked(useMostRecentCompletedAnalysis)) .calledWith(RUN_ID) - .mockReturnValue(null) - const [{ getByText }] = render(`/runs/${RUN_ID}/run`) - getByText('mock RunningProtocolSkeleton') + .thenReturn(null) + render(`/runs/${RUN_ID}/run`) + expect(vi.mocked(RunningProtocolSkeleton)).toHaveBeenCalled() }) it('should render the canceling run modal when run status is stop requested', () => { - when(mockUseRunStatus) + when(vi.mocked(useRunStatus)) .calledWith(RUN_ID, { refetchInterval: 5000 }) - .mockReturnValue(RUN_STATUS_STOP_REQUESTED) - const [{ getByText }] = render(`/runs/${RUN_ID}/run`) - getByText('mock CancelingRunModal') + .thenReturn(RUN_STATUS_STOP_REQUESTED) + render(`/runs/${RUN_ID}/run`) + expect(vi.mocked(CancelingRunModal)).toHaveBeenCalled() }) it('should render CurrentRunningProtocolCommand when loaded the data', () => { - const [{ getByText }] = render(`/runs/${RUN_ID}/run`) - getByText('mock CurrentRunningProtocolCommand') + render(`/runs/${RUN_ID}/run`) + expect(vi.mocked(CurrentRunningProtocolCommand)).toHaveBeenCalled() }) it('should render open door alert modal, when run staus is blocked by open door', () => { - when(mockUseRunStatus) + when(vi.mocked(useRunStatus)) .calledWith(RUN_ID, { refetchInterval: 5000 }) - .mockReturnValue(RUN_STATUS_BLOCKED_BY_OPEN_DOOR) - const [{ getByText }] = render(`/runs/${RUN_ID}/run`) - getByText('mock OpenDoorAlertModal') + .thenReturn(RUN_STATUS_BLOCKED_BY_OPEN_DOOR) + render(`/runs/${RUN_ID}/run`) + expect(vi.mocked(OpenDoorAlertModal)).toHaveBeenCalled() }) // ToDo (kj:04/04/2023) need to figure out the way to simulate swipe diff --git a/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx b/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx index 6173d6115de..237c3dff532 100644 --- a/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx +++ b/app/src/pages/UpdateRobot/__tests__/UpdateRobot.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' +import { vi, it, describe, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' -import { when, resetAllWhenMocks } from 'jest-when' +import { when } from 'vitest-when' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import * as RobotUpdate from '../../../redux/robot-update' @@ -13,18 +14,8 @@ import { UpdateRobot } from '../UpdateRobot' import type { State } from '../../../redux/types' -jest.mock('../../../redux/discovery') -jest.mock('../../../redux/robot-update') - -const mockGetRobotUpdateUpdateAvailable = RobotUpdate.getRobotUpdateAvailable as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateAvailable -> -const mockGetRobotUpdateSession = RobotUpdate.getRobotUpdateSession as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateSession -> -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> +vi.mock('../../../redux/discovery') +vi.mock('../../../redux/robot-update') const MOCK_STATE: State = { discovery: { @@ -86,13 +77,14 @@ const render = () => { describe('UpdateRobot', () => { beforeEach(() => { - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.UPGRADE) - when(mockGetLocalRobot).calledWith(MOCK_STATE).mockReturnValue(mockRobot) + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.UPGRADE + ) + when(vi.mocked(getLocalRobot)).calledWith(MOCK_STATE).thenReturn(mockRobot) }) afterEach(() => { - jest.resetAllMocks() - resetAllWhenMocks() + vi.resetAllMocks() }) it('should render mock Update Software for downloading', () => { @@ -100,19 +92,25 @@ describe('UpdateRobot', () => { ...mockSession, step: RobotUpdate.RESTART, } - mockGetRobotUpdateSession.mockReturnValue(mockDownloadSession) + vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( + mockDownloadSession + ) const [{ getByText }] = render() getByText('Downloading software...') }) it('should render NoUpdateFound when there is no upgrade - reinstall', () => { - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.REINSTALL) + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.REINSTALL + ) const [{ getByText }] = render() getByText('Your software is already up to date!') }) it('should render mock NoUpdate found when there is no upgrade - downgrade', () => { - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.DOWNGRADE) + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.DOWNGRADE + ) const [{ getByText }] = render() getByText('Your software is already up to date!') }) @@ -122,7 +120,9 @@ describe('UpdateRobot', () => { ...mockSession, error: 'mock error', } - mockGetRobotUpdateSession.mockReturnValue(mockErrorSession) + vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( + mockErrorSession + ) const [{ getByText }] = render() getByText('Software update error') getByText('mock error') diff --git a/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx b/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx index 809bcd9c7f6..8019f5baac2 100644 --- a/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx +++ b/app/src/pages/UpdateRobot/__tests__/UpdateRobotDuringOnboarding.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' +import { vi, it, describe, expect, beforeEach, afterEach } from 'vitest' import { MemoryRouter } from 'react-router-dom' import { act, screen } from '@testing-library/react' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import * as RobotUpdate from '../../../redux/robot-update' @@ -12,18 +13,8 @@ import { UpdateRobotDuringOnboarding } from '../UpdateRobotDuringOnboarding' import type { State } from '../../../redux/types' -jest.mock('../../../redux/discovery') -jest.mock('../../../redux/robot-update') - -const mockGetRobotUpdateUpdateAvailable = RobotUpdate.getRobotUpdateAvailable as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateAvailable -> -const mockGetRobotUpdateSession = RobotUpdate.getRobotUpdateSession as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateSession -> -const mockGetLocalRobot = getLocalRobot as jest.MockedFunction< - typeof getLocalRobot -> +vi.mock('../../../redux/discovery') +vi.mock('../../../redux/robot-update') const MOCK_STATE: State = { discovery: { @@ -85,31 +76,37 @@ const render = () => { describe('UpdateRobotDuringOnboarding', () => { beforeEach(() => { - jest.useFakeTimers() - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.UPGRADE) - mockGetLocalRobot.mockReturnValue(mockRobot) + vi.useFakeTimers() + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.UPGRADE + ) + vi.mocked(getLocalRobot).mockReturnValue(mockRobot) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render CheckUpdates if it does not already have an upgrade', () => { - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.REINSTALL) + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.REINSTALL + ) render() screen.getByText('Checking for updates') }) it('should stop rendering CheckUpdates should after 10 sec', async () => { - jest.useFakeTimers() - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.REINSTALL) + vi.useFakeTimers() + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.REINSTALL + ) render() act(() => { - jest.advanceTimersByTime(1000) + vi.advanceTimersByTime(1000) }) expect(screen.getByText('Checking for updates')).toBeInTheDocument() act(() => { - jest.advanceTimersByTime(11000) + vi.advanceTimersByTime(11000) }) expect(screen.queryByText('Checking for updates')).not.toBeInTheDocument() }) @@ -125,27 +122,33 @@ describe('UpdateRobotDuringOnboarding', () => { ...mockSession, step: RobotUpdate.RESTART, } - mockGetRobotUpdateSession.mockReturnValue(mockDownloadSession) + vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( + mockDownloadSession + ) render() screen.getByText('Downloading software...') }) it('should render NoUpdate found when there is no upgrade - reinstall', () => { - jest.useFakeTimers() - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.REINSTALL) + vi.useFakeTimers() + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.REINSTALL + ) render() act(() => { - jest.advanceTimersByTime(11000) + vi.advanceTimersByTime(11000) }) screen.getByText('Your software is already up to date!') }) it('should render NoUpdate found when there is no upgrade - downgrade', () => { - jest.useFakeTimers() - mockGetRobotUpdateUpdateAvailable.mockReturnValue(RobotUpdate.DOWNGRADE) + vi.useFakeTimers() + vi.mocked(RobotUpdate.getRobotUpdateAvailable).mockReturnValue( + RobotUpdate.DOWNGRADE + ) render() act(() => { - jest.advanceTimersByTime(11000) + vi.advanceTimersByTime(11000) }) screen.getByText('Your software is already up to date!') }) @@ -155,7 +158,9 @@ describe('UpdateRobotDuringOnboarding', () => { ...mockSession, error: 'oh no!', } - mockGetRobotUpdateSession.mockReturnValue(mockErrorSession) + vi.mocked(RobotUpdate.getRobotUpdateSession).mockReturnValue( + mockErrorSession + ) render() screen.getByText('Software update error') diff --git a/app/src/pages/Welcome/__tests__/Welcome.test.tsx b/app/src/pages/Welcome/__tests__/Welcome.test.tsx index 316c5e3e5a9..4842206d807 100644 --- a/app/src/pages/Welcome/__tests__/Welcome.test.tsx +++ b/app/src/pages/Welcome/__tests__/Welcome.test.tsx @@ -1,19 +1,22 @@ import * as React from 'react' +import { vi, it, describe, expect } from 'vitest' import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { Welcome } from '..' +import type * as ReactRouterDom from 'react-router-dom' + const PNG_FILE_NAME = 'welcome_background.png' -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), } }) @@ -38,7 +41,7 @@ describe('Welcome', () => { ) screen.getByRole('button', { name: 'Get started' }) const image = screen.getByRole('img') - expect(image.getAttribute('src')).toEqual(PNG_FILE_NAME) + expect(image.getAttribute('src')).toContain(PNG_FILE_NAME) }) it('should call mockPush when tapping Get started', () => {