test(app, components, protocol-designer): testing library lint rules to error, fix all occurrences

.eslintrc.js

@@ -139,10 +139,6 @@ module.exports = {
     {
       files: ['**/__tests__/**test.tsx'],
       extends: ['plugin:testing-library/react'],
-      rules: {
-        'testing-library/no-manual-cleanup': 'off',
-        'testing-library/prefer-screen-queries': 'warn',
-      },
     },
     {
       files: ['**/*.stories.tsx'],

app/src/App/__tests__/DesktopApp.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
+import { screen } from '@testing-library/react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 
 import { renderWithProviders } from '../../__testing-utils__'
@@ -61,47 +62,45 @@ describe('DesktopApp', () => {
     vi.resetAllMocks()
   })
   it('renders a Breadcrumbs component', () => {
-    const [{ getByText }] = render('/devices')
-    getByText('Mock Breadcrumbs')
+    render('/devices')
+    screen.getByText('Mock Breadcrumbs')
   })
 
   it('renders an AppSettings component', () => {
-    const [{ getByText }] = render('/app-settings/general')
-    getByText('Mock AppSettings')
+    render('/app-settings/general')
+    screen.getByText('Mock AppSettings')
   })
 
   it('renders a DevicesLanding component from /devices', () => {
-    const [{ getByText }] = render('/devices')
-    getByText('Mock DevicesLanding')
+    render('/devices')
+    screen.getByText('Mock DevicesLanding')
   })
 
   it('renders a DeviceDetails component from /devices/:robotName', () => {
-    const [{ getByText }] = render('/devices/otie')
-    getByText('Mock DeviceDetails')
+    render('/devices/otie')
+    screen.getByText('Mock DeviceDetails')
   })
 
   it('renders a RobotSettings component from /devices/:robotName/robot-settings/:robotSettingsTab', () => {
-    const [{ getByText }] = render('/devices/otie/robot-settings/calibration')
-    getByText('Mock RobotSettings')
+    render('/devices/otie/robot-settings/calibration')
+    screen.getByText('Mock RobotSettings')
   })
 
   it('renders a CalibrationDashboard component from /devices/:robotName/robot-settings/calibration/dashboard', () => {
-    const [{ getByText }] = render(
-      '/devices/otie/robot-settings/calibration/dashboard'
-    )
-    getByText('Mock CalibrationDashboard')
+    render('/devices/otie/robot-settings/calibration/dashboard')
+    screen.getByText('Mock CalibrationDashboard')
   })
 
   it('renders a ProtocolsLanding component from /protocols', () => {
-    const [{ getByText }] = render('/protocols')
-    getByText('Mock ProtocolsLanding')
+    render('/protocols')
+    screen.getByText('Mock ProtocolsLanding')
   })
 
   it('renders a ProtocolRunDetails component from /devices/:robotName/protocol-runs/:runId/:protocolRunDetailsTab', () => {
-    const [{ getByText }] = render(
+    render(
       '/devices/otie/protocol-runs/95e67900-bc9f-4fbf-92c6-cc4d7226a51b/setup'
     )
-    getByText('Mock ProtocolRunDetails')
+    screen.getByText('Mock ProtocolRunDetails')
   })
 
   it('should poll for software updates', () => {

app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx

@@ -25,8 +25,8 @@ describe('FloatingActionButton', () => {
   })
 
   it('renders floating action button with text - active', () => {
-    const { getByRole } = render(props)
-    const button = getByRole('button')
+    render(props)
+    const button = screen.getByRole('button')
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing12} ${SPACING.spacing24}`
     )

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

@@ -99,8 +99,8 @@ describe('Module Update Banner', () => {
       ...props,
       calibratePipetteRequired: true,
     }
-    const { queryByText } = render(props)
-    expect(queryByText('Calibrate now')).not.toBeInTheDocument()
+    render(props)
+    expect(screen.queryByText('Calibrate now')).not.toBeInTheDocument()
   })
 
   it('should not render a calibrate link if pipette firmware update is required', () => {

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

@@ -146,8 +146,8 @@ describe('CalibrateTipLength', () => {
         currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE,
       },
     }
-    const { getByRole } = render({ isJogging: false, session })[0]
-    const forwardButton = getByRole('button', { name: 'forward' })
+    render({ isJogging: false, session })
+    const forwardButton = screen.getByRole('button', { name: 'forward' })
     fireEvent.click(forwardButton)
     expect(dispatchRequests).toHaveBeenCalledWith(
       Sessions.createSessionCommand('robot-name', session.id, {

app/src/organisms/CalibrationPanels/Introduction/__tests__/Body.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { it, describe } from 'vitest'
+import { screen } from '@testing-library/react'
 
 import { renderWithProviders } from '../../../../__testing-utils__'
 import * as Sessions from '../../../../redux/sessions'
@@ -15,40 +16,40 @@ const render = (props: React.ComponentProps<typeof Body>) => {
 
 describe('Body', () => {
   it('renders correct text for health check', () => {
-    const { getByText } = render({
+    render({
       sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK,
     })
-    getByText(
+    screen.getByText(
       'Calibration Health Check diagnoses problems with Deck, Tip Length, and Pipette Offset Calibration.'
     )
-    getByText(
+    screen.getByText(
       'You will move the pipettes to various positions, which will be compared against your existing calibration data.'
     )
-    getByText(
+    screen.getByText(
       'If there is a large difference, you will be prompted to redo some or all of your calibrations.'
     )
   })
   it('renders correct text for deck cal', () => {
-    const { getByText } = render({
+    render({
       sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION,
     })
-    getByText(
+    screen.getByText(
       'Deck calibration ensures positional accuracy so that your robot moves as expected. It will accurately establish the OT-2’s deck orientation relative to the gantry.'
     )
   })
   it('renders correct text for pip offset cal', () => {
-    const { getByText } = render({
+    render({
       sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION,
     })
-    getByText(
+    screen.getByText(
       'Calibrating pipette offset measures a pipette’s position relative to the pipette mount and the deck.'
     )
   })
   it('renders correct text for tip length cal', () => {
-    const { getByText } = render({
+    render({
       sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION,
     })
-    getByText(
+    screen.getByText(
       'Tip length calibration measures the distance between the bottom of the tip and the pipette’s nozzle.'
     )
   })

app/src/organisms/CalibrationPanels/Introduction/__tests__/InvalidationWarning.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { it, describe } from 'vitest'
+import { screen } from '@testing-library/react'
 
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
@@ -16,12 +17,14 @@ const render = (sessionType: 'tipLengthCalibration' | 'deckCalibration') => {
 
 describe('InvalidationWarning', () => {
   it('renders correct text - deck calibration', () => {
-    const { getByText } = render('deckCalibration')
-    getByText('Recalibrating the deck clears pipette offset data')
-    getByText('Pipette offsets for both mounts will have to be recalibrated.')
+    render('deckCalibration')
+    screen.getByText('Recalibrating the deck clears pipette offset data')
+    screen.getByText(
+      'Pipette offsets for both mounts will have to be recalibrated.'
+    )
   })
   it('renders correct text - tip length calibration', () => {
-    const { getByText } = render('tipLengthCalibration')
-    getByText('Recalibrating tip length will clear pipette offset data.')
+    render('tipLengthCalibration')
+    screen.getByText('Recalibrating tip length will clear pipette offset data.')
   })
 })

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
 import { vi, it, describe, expect, beforeEach } from 'vitest'
 
 import { usePipettesQuery } from '@opentrons/react-api-client'
@@ -64,30 +64,30 @@ describe('ChooseTipRack', () => {
   })
 
   it('renders the correct text', () => {
-    const { getByText, getByAltText } = render(props)
-    getByText('Choose a tip rack')
-    getByText('select tip rack')
-    getByText('mock select')
-    getByText(
+    render(props)
+    screen.getByText('Choose a tip rack')
+    screen.getByText('select tip rack')
+    screen.getByText('mock select')
+    screen.getByText(
       'Choose what tip rack you’d like to use to calibrate your tip length.'
     )
-    getByText('Want to use a tip rack that’s not listed here?')
+    screen.getByText('Want to use a tip rack that’s not listed here?')
 
-    getByText(
+    screen.getByText(
       'Opentrons tip racks are highly recommended. Accuracy cannot be guaranteed with other tip racks.'
     )
-    getByText('300ul Tiprack FIXTURE')
-    getByAltText('300ul Tiprack FIXTURE image')
-    getByText(
+    screen.getByText('300ul Tiprack FIXTURE')
+    screen.getByAltText('300ul Tiprack FIXTURE image')
+    screen.getByText(
       'It’s extremely important to perform this calibration using the Opentrons tips and tip racks specified above, as the robot determines accuracy based on the known measurements of these tips.'
     )
   })
 
   it('renders the buttons and they work as expected', () => {
-    const { getByRole } = render(props)
-    getByRole('link', { name: 'Need help?' })
-    const cancel = getByRole('button', { name: 'cancel' })
-    const confirm = getByRole('button', { name: 'Confirm tip rack' })
+    render(props)
+    screen.getByRole('link', { name: 'Need help?' })
+    const cancel = screen.getByRole('button', { name: 'cancel' })
+    const confirm = screen.getByRole('button', { name: 'Confirm tip rack' })
     fireEvent.click(cancel)
     expect(props.closeModal).toHaveBeenCalled()
     fireEvent.click(confirm)

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { it, describe, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
 
 import { i18n } from '../../../i18n'
 import { renderWithProviders } from '../../../__testing-utils__'
@@ -26,8 +27,8 @@ describe('ChosenTipRackRender', () => {
   })
 
   it('renders text and image alt text when tip rack is Opentrons 96 1000uL', () => {
-    const { getByText, getByAltText } = render(props)
-    getByText('Opentrons 96 tip rack 1000ul')
-    getByAltText('Opentrons 96 tip rack 1000ul image')
+    render(props)
+    screen.getByText('Opentrons 96 tip rack 1000ul')
+    screen.getByAltText('Opentrons 96 tip rack 1000ul image')
   })
 })

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { fireEvent, renderHook } from '@testing-library/react'
+import { fireEvent, renderHook, screen } from '@testing-library/react'
 import { I18nextProvider } from 'react-i18next'
 import { vi, it, describe, expect } from 'vitest'
 
@@ -43,11 +43,11 @@ describe('useConfirmCrashRecovery', () => {
     expect(link).not.toBeNull()
     expect(confirmation).toBeNull()
 
-    const { getByText, getByRole } = renderWithProviders(link, {
+    renderWithProviders(link, {
       i18nInstance: i18n,
-    })[0]
-    getByText('Jog too far or bend a tip?')
-    getByRole('button', { name: 'Start over' })
+    })
+    screen.getByText('Jog too far or bend a tip?')
+    screen.getByRole('button', { name: 'Start over' })
   })
 
   it('renders the modal with the right props when you click the link', () => {
@@ -65,26 +65,53 @@ describe('useConfirmCrashRecovery', () => {
     )
 
     // render returned confirmation if not null, otherwise render the link
-    const { getByRole, rerender } = renderWithProviders(
-      <div>{result.current[1] ?? result.current[0]}</div>,
-      { i18nInstance: i18n }
-    )[0]
+    renderWithProviders(<div>{result.current[1] ?? result.current[0]}</div>, {
+      i18nInstance: i18n,
+    })
     // click the link to launch the modal
-    fireEvent.click(getByRole('button', { name: 'Start over' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Start over' }))
     // the confirmation should now not be null
     expect(result.current[1]).not.toBeNull()
+  })
+
+  it('renders the modal with the right props when you click back', () => {
+    const { result } = renderHook(
+      () =>
+        useConfirmCrashRecovery({
+          ...mockProps,
+          sendCommands: mockSendCommands,
+        }),
+      {
+        wrapper: ({ children }) => (
+          <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+        ),
+      }
+    )
+
     // the explicitly rerender to incorporate newly non-null confirmation
+    const [{ rerender }] = renderWithProviders(
+      <div>{result.current[1] ?? result.current[0]}</div>,
+      {
+        i18nInstance: i18n,
+      }
+    )
+
+    // click the link to launch the modal
+    fireEvent.click(screen.getByRole('button', { name: 'Start over' }))
+
     rerender(<div>{result.current[1] ?? result.current[0]}</div>)
 
     // click the "back" link in the confirmation
-    const closeConfirmationButton = getByRole('button', { name: 'resume' })
+    const closeConfirmationButton = screen.getByRole('button', {
+      name: 'resume',
+    })
     fireEvent.click(closeConfirmationButton)
     // the confirmation should now be null once more
     expect(result.current[1]).toBeNull()
 
     // open the confirmation again and click the proceed to start over button
-    fireEvent.click(getByRole('button', { name: 'Start over' }))
-    const startOverButton = getByRole('button', { name: 'Start over' })
+    fireEvent.click(screen.getByRole('button', { name: 'Start over' }))
+    const startOverButton = screen.getByRole('button', { name: 'Start over' })
     fireEvent.click(startOverButton)
     expect(mockSendCommands).toHaveBeenCalledWith({
       command: sharedCalCommands.INVALIDATE_LAST_ACTION,

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

@@ -67,8 +67,8 @@ describe('CalibrationTaskList', () => {
   })
 
   it('does not show the Calibrations complete screen when viewing a completed task list', () => {
-    const [{ queryByText }] = render()
-    expect(queryByText('Calibrations complete!')).toBeFalsy()
+    render()
+    expect(screen.queryByText('Calibrations complete!')).toBeFalsy()
   })
 
   it('shows the Calibrations complete screen after the calibrations are completed', () => {