migrate to vitest for atoms and molecules

Opentrons · Feb 22, 2024 · f33c484 · f33c484
1 parent 468e4c7
commit f33c484
Show file tree

Hide file tree

Showing 62 changed files with 1,032 additions and 1,321 deletions.
diff --git a/app/src/atoms/Banner/__tests__/Banner.test.tsx b/app/src/atoms/Banner/__tests__/Banner.test.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { describe, it, vi, expect, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
 import { fireEvent } from '@testing-library/react'
 import { i18n } from '../../../i18n'
 import { Banner } from '..'
@@ -28,7 +30,7 @@ describe('Banner', () => {
     props = {
       type: 'success',
       children: 'TITLE',
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
     }
     const { getByText, getByLabelText } = render(props)
     getByText('TITLE')
@@ -78,7 +80,7 @@ describe('Banner', () => {
       type: 'warning',
       children: 'TITLE',
       closeButton: 'close button',
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
     }
     const { getByText } = render(props)
     const btn = getByText('close button')

diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
 import { BORDERS, COLORS } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { Chip } from '..'
@@ -16,28 +17,28 @@ describe('Chip', () => {
       text: 'mockBasic',
       type: 'basic',
     }
-    const [{ getByTestId, getByText, queryByLabelText }] = render(props)
-    const chip = getByTestId('Chip_basic')
-    const chipText = getByText('mockBasic')
+    render(props)
+    const chip = screen.getByTestId('Chip_basic')
+    const chipText = screen.getByText('mockBasic')
     expect(chip).toHaveStyle(
       `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
     )
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
   })
 
   it('should render text, icon, bgcolor with success colors', () => {
     props = {
       text: 'mockSuccess',
       type: 'success',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_success')
-    const chipText = getByText('mockSuccess')
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
     expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = getByLabelText('icon_mockSuccess')
+    const icon = screen.getByLabelText('icon_mockSuccess')
     expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
   })
 
@@ -47,13 +48,13 @@ describe('Chip', () => {
       text: 'mockSuccess',
       type: 'success',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_success')
-    const chipText = getByText('mockSuccess')
+    render(props)
+    const chip = screen.getByTestId('Chip_success')
+    const chipText = screen.getByText('mockSuccess')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = getByLabelText('icon_mockSuccess')
+    const icon = screen.getByLabelText('icon_mockSuccess')
     expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
   })
 
@@ -62,13 +63,13 @@ describe('Chip', () => {
       text: 'mockWarning',
       type: 'warning',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_warning')
-    const chipText = getByText('mockWarning')
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
     expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = getByLabelText('icon_mockWarning')
+    const icon = screen.getByLabelText('icon_mockWarning')
     expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
   })
 
@@ -78,30 +79,30 @@ describe('Chip', () => {
       text: 'mockWarning',
       type: 'warning',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_warning')
-    const chipText = getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${String(COLORS.transparent)}`)
+    render(props)
+    const chip = screen.getByTestId('Chip_warning')
+    const chipText = screen.getByText('mockWarning')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
-    expect(chipText).toHaveStyle(`color: ${String(COLORS.yellow60)}`)
-    const icon = getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${String(COLORS.yellow60)}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
+    const icon = screen.getByLabelText('icon_mockWarning')
+    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
   })
 
   it('should render text, icon, bgcolor with neutral colors', () => {
     props = {
       text: 'mockNeutral',
       type: 'neutral',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_neutral')
-    const chipText = getByText('mockNeutral')
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
     expect(chip).toHaveStyle(
       `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
     )
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = getByLabelText('icon_mockNeutral')
+    const icon = screen.getByLabelText('icon_mockNeutral')
     expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
@@ -111,13 +112,13 @@ describe('Chip', () => {
       text: 'mockNeutral',
       type: 'neutral',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_neutral')
-    const chipText = getByText('mockNeutral')
+    render(props)
+    const chip = screen.getByTestId('Chip_neutral')
+    const chipText = screen.getByText('mockNeutral')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = getByLabelText('icon_mockNeutral')
+    const icon = screen.getByLabelText('icon_mockNeutral')
     expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
   })
 
@@ -126,13 +127,13 @@ describe('Chip', () => {
       text: 'mockError',
       type: 'error',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_error')
-    const chipText = getByText('mockError')
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
     expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = getByLabelText('icon_mockError')
+    const icon = screen.getByLabelText('icon_mockError')
     expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
   })
 
@@ -142,13 +143,13 @@ describe('Chip', () => {
       text: 'mockError',
       type: 'error',
     }
-    const [{ getByTestId, getByText, getByLabelText }] = render(props)
-    const chip = getByTestId('Chip_error')
-    const chipText = getByText('mockError')
+    render(props)
+    const chip = screen.getByTestId('Chip_error')
+    const chipText = screen.getByText('mockError')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = getByLabelText('icon_mockError')
+    const icon = screen.getByLabelText('icon_mockError')
     expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
   })
 })
diff --git a/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx b/app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { InlineNotification } from '..'
 
-
 const render = (props: React.ComponentProps<typeof InlineNotification>) => {
   return renderWithProviders(<InlineNotification {...props} />, {
     i18nInstance: i18n,
@@ -21,19 +21,19 @@ describe('InlineNotification', () => {
     }
   })
   it('renders success inline notification', () => {
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_success')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
   })
   it('renders success inline notification with exit button and when click dismisses inline notification', () => {
     props = {
       type: 'success',
       heading: 'TITLE',
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
     }
-    const { getByText, getByLabelText } = render(props)
-    getByText('TITLE')
-    const btn = getByLabelText('close_icon')
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
     fireEvent.click(btn)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
@@ -42,26 +42,26 @@ describe('InlineNotification', () => {
       type: 'alert',
       heading: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_alert')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_alert')
+    screen.getByText('TITLE')
   })
   it('renders error inline notification', () => {
     props = {
       type: 'error',
       heading: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_error')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
   })
   it('renders neutral inline notification', () => {
     props = {
       type: 'neutral',
       heading: 'TITLE',
     }
-    const { getByText, getByLabelText } = render(props)
-    getByLabelText('icon_neutral')
-    getByText('TITLE')
+    render(props)
+    screen.getByLabelText('icon_neutral')
+    screen.getByText('TITLE')
   })
 })
diff --git a/app/src/atoms/InputField/__tests__/InputField.test.tsx b/app/src/atoms/InputField/__tests__/InputField.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { InputField } from '..'
 
-
 const render = (props: React.ComponentProps<typeof InputField>) => {
   return renderWithProviders(<InputField {...props} />)[0]
 }
@@ -20,32 +20,28 @@ describe('HeaterShakerSlideout', () => {
       units: 'rpm',
       value: '5',
       disabled: false,
-      onFocus: jest.fn(),
-      onBlur: jest.fn(),
-      onChange: jest.fn(),
+      onFocus: vi.fn(),
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
       readOnly: false,
       autoFocus: false,
     }
   })
-  afterEach(() => {
-    jest.resetAllMocks()
-  })
-
   it('renders correct information when type is number', () => {
-    const { getByText } = render(props)
-    getByText('caption')
-    getByText('secondary caption')
-    getByText('rpm')
+    render(props)
+    screen.getByText('caption')
+    screen.getByText('secondary caption')
+    screen.getByText('rpm')
   })
   it('renders correct information when type is text', () => {
     props = {
       type: 'text',
       value: 'string',
       units: 'C',
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     }
-    const { getByText } = render(props)
-    getByText('C')
+    render(props)
+    screen.getByText('C')
   })
   it('renders error message when value is outside of number type range', () => {
     props = {
@@ -56,14 +52,14 @@ describe('HeaterShakerSlideout', () => {
       units: 'rpm',
       value: '9',
       error: 'error',
-      onChange: jest.fn(),
+      onChange: vi.fn(),
       id: 'input_id',
     }
-    const { getByText, getByTestId } = render(props)
-    const input = getByTestId('input_id')
+    render(props)
+    const input = screen.getByTestId('input_id')
     fireEvent.change(input, { target: { value: ['12'] } })
     expect(props.onChange).toHaveBeenCalled()
-    getByText('caption')
-    getByText('error')
+    screen.getByText('caption')
+    screen.getByText('error')
   })
 })
diff --git a/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx b/app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { describe, it } from 'vitest'
+import { screen } from '@testing-library/react'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { InstrumentContainer } from '..'
 
@@ -13,7 +15,7 @@ describe('InstrumentContainer', () => {
     props = {
       displayName: 'P300 8-Channel GEN2',
     }
-    const { getByText } = render(props)
-    getByText('P300 8-Channel GEN2')
+    render(props)
+    screen.getByText('P300 8-Channel GEN2')
   })
 })