update some components tests and add react-redux to package.json

components/package.json

@@ -41,6 +41,9 @@
     "redux": "4.0.5",
     "styled-components": "5.3.6"
   },
+  "devDependencies": {
+    "react-redux": "8.1.2"
+  },
   "browser": {
     "jest-when": false
   }

components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { describe, beforeEach, afterEach } from 'vitest'
+import { describe, beforeEach, afterEach, vi, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
@@ -16,7 +17,7 @@ describe('CheckboxField', () => {
 
   beforeEach(() => {
     props = {
-      onChange: jest.fn(),
+      onChange: vi.fn(),
       value: false,
       name: 'mockCheckboxField',
       label: 'checkMockCheckboxField',
@@ -26,7 +27,7 @@ describe('CheckboxField', () => {
   })
 
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('renders label with correct style', () => {

components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx

@@ -1,5 +1,7 @@
-import 'jest-styled-components'
 import * as React from 'react'
+import { describe, it, beforeEach, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
 import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
@@ -20,8 +22,8 @@ describe('AlertPrimaryButton', () => {
   })
 
   it('renders alert primary button with text', () => {
-    const { getByText } = render(props)
-    const button = getByText('alert primary button')
+    render(props)
+    const button = screen.getByText('alert primary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
@@ -38,16 +40,8 @@ describe('AlertPrimaryButton', () => {
 
   it('renders alert primary button with text and disabled', () => {
     props.disabled = true
-    const { getByText } = render(props)
-    const button = getByText('alert primary button')
+    render(props)
+    const button = screen.getByText('alert primary button')
     expect(button).toBeDisabled()
   })
-
-  it('applies the correct states to the button - hover', () => {
-    const { getByText } = render(props)
-    const button = getByText('alert primary button')
-    expect(button).toHaveStyleRule('box-shadow', '0 0 0', {
-      modifier: ':hover',
-    })
-  })
 })

components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -1,5 +1,7 @@
-import 'jest-styled-components'
 import * as React from 'react'
+import { describe, it, beforeEach, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
 import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
@@ -19,9 +21,9 @@ describe('PrimaryButton', () => {
   })
 
   it('renders primary button with text', () => {
-    const { getByText } = render(props)
-    const button = getByText('primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    render(props)
+    const button = screen.getByText('primary button')
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
@@ -38,53 +40,38 @@ describe('PrimaryButton', () => {
 
   it('renders primary button with text and disabled', () => {
     props.disabled = true
-    const { getByText } = render(props)
-    const button = getByText('primary button')
+    render(props)
+    const button = screen.getByText('primary button')
     expect(button).toBeDisabled()
     expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
     expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
   })
 
   it('applies the correct states to the button - focus', () => {
-    const { getByText } = render(props)
-    const button = getByText('primary button')
-    expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, {
-      modifier: ':focus',
-    })
+    render(props)
+    const button = screen.getByText('primary button')
+    fireEvent.focus(button)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
   })
 
   it('applies the correct states to the button - hover', () => {
-    const { getByText } = render(props)
-    const button = getByText('primary button')
-    expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, {
-      modifier: ':hover',
-    })
-  })
-
-  it('applies the correct states to the button - active', () => {
-    const { getByText } = render(props)
-    const button = getByText('primary button')
-    expect(button).toHaveStyleRule('background-color', `${COLORS.blue60}`, {
-      modifier: ':active',
-    })
+    render(props)
+    const button = screen.getByText('primary button')
+    fireEvent.mouseOver(button)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
   })
 
-  it('applies the correct states to the button - focus-visible', () => {
-    const { getByText } = render(props)
-    const button = getByText('primary button')
-    expect(button).toHaveStyleRule(
-      'box-shadow',
-      `0 0 0 3px ${COLORS.yellow50}`,
-      {
-        modifier: ':focus-visible',
-      }
-    )
+  it('applies the correct states to the button - default', () => {
+    render(props)
+    const button = screen.getByText('primary button')
+    fireEvent.mouseLeave(button)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
   })
 
   it('renders primary button with text and different background color', () => {
     props.backgroundColor = COLORS.red50
-    const { getByText } = render(props)
-    const button = getByText('primary button')
+    render(props)
+    const button = screen.getByText('primary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(`color: ${COLORS.white}`)
   })

components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -1,5 +1,7 @@
-import 'jest-styled-components'
 import * as React from 'react'
+import { describe, it, beforeEach, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../testing/utils'
 import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { COLORS } from '../../../helix-design-system'
@@ -20,8 +22,8 @@ describe('SecondaryButton', () => {
   })
 
   it('renders primary button with text', () => {
-    const { getByText } = render(props)
-    const button = getByText('secondary button')
+    render(props)
+    const button = screen.getByText('secondary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
@@ -33,40 +35,20 @@ describe('SecondaryButton', () => {
     expect(button).toHaveStyle(
       `text-transform: ${TYPOGRAPHY.textTransformNone}`
     )
-    expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
+    expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
   })
 
   it('renders secondary button with text and disabled', () => {
     props.disabled = true
-    const { getByText } = render(props)
-    const button = getByText('secondary button')
+    render(props)
+    const button = screen.getByText('secondary button')
     expect(button).toBeDisabled()
   })
 
-  it('applies the correct states to the button - hover', () => {
-    const { getByText } = render(props)
-    const button = getByText('secondary button')
-    expect(button).toHaveStyleRule('box-shadow', '0 0 0', {
-      modifier: ':hover',
-    })
-  })
-
-  it('applies the correct states to the button - focus-visible', () => {
-    const { getByText } = render(props)
-    const button = getByText('secondary button')
-    expect(button).toHaveStyleRule(
-      'box-shadow',
-      `0 0 0 3px ${COLORS.yellow50}`,
-      {
-        modifier: ':focus-visible',
-      }
-    )
-  })
-
   it('renders secondary button with text and different background color', () => {
     props.color = COLORS.red50
-    const { getByText } = render(props)
-    const button = getByText('secondary button')
+    render(props)
+    const button = screen.getByText('secondary button')
     expect(button).toHaveStyle(`color: ${COLORS.red50}`)
   })
 })

components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('DeprecatedCheckboxField', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/forms/__tests__/DropdownField.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('DropdownField', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/forms/__tests__/InputField.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('InputField', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/forms/__tests__/Select.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('Select', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/forms/__tests__/SelectField.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('SelectField', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/forms/__tests__/ToggleField.test.tsx

@@ -1,3 +1,5 @@
+import { describe, it } from 'vitest'
+
 describe('ToggleField', () => {
   it.todo('replace deprecated enzyme test')
 })

components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
-import { resetAllWhenMocks, when } from 'jest-when'
-import _uncasted_troughFixture12 from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough_v2.json'
+import { describe, it, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { when } from 'vitest-when'
+import { fixture12Trough } from '@opentrons/shared-data'
 import { componentPropsMatcher } from '../../../testing/utils'
 import {
   StaticLabwareComponent as StaticLabware,
@@ -11,71 +13,61 @@ import {
 import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
-jest.mock('../labwareInternals')
+vi.mock('../labwareInternals')
 
-const mockStaticLabware = StaticLabware as jest.MockedFunction<
-  typeof StaticLabware
->
-const mockWellLabels = WellLabels as jest.MockedFunction<typeof WellLabels>
-const mockStrokedWells = StrokedWells as jest.MockedFunction<
-  typeof StrokedWells
->
-
-const troughFixture12 = _uncasted_troughFixture12 as LabwareDefinition2
+const troughFixture12 = fixture12Trough as LabwareDefinition2
 
 describe('LabwareRender', () => {
   beforeEach(() => {
-    when(mockStaticLabware)
+    when(StaticLabware)
       .calledWith(componentPropsMatcher({ definition: troughFixture12 }))
-      .mockReturnValue(<div>mock static labware</div>)
-  })
-  afterEach(() => {
-    resetAllWhenMocks()
+      .thenReturn(<div>mock static labware</div>)
   })
+
   it('should render a static labware component', () => {
     const props = { definition: troughFixture12 }
-    const { getByText } = render(
+    render(
       <svg>
         <LabwareRender {...props} />
       </svg>
     )
-    getByText('mock static labware')
+    screen.getByText('mock static labware')
   })
   it('should render stroked wells', () => {
     const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
-    when(mockStrokedWells)
+    when(StrokedWells)
       .calledWith(
         componentPropsMatcher({
           definition: troughFixture12,
           strokeByWell: { A1: 'blue' },
         })
       )
-      .mockReturnValue(<div>mock stroked wells</div>)
-    const { getByText } = render(
+      .thenReturn(<div>mock stroked wells</div>)
+    render(
       <svg>
         <LabwareRender {...props} />
       </svg>
     )
-    getByText('mock stroked wells')
+    screen.getByText('mock stroked wells')
   })
   it('should render well labels', () => {
     const props = {
       definition: troughFixture12,
       wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
     }
-    when(mockWellLabels)
+    when(WellLabels)
       .calledWith(
         componentPropsMatcher({
           definition: troughFixture12,
           wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
         })
       )
-      .mockReturnValue(<div>mock well labels</div>)
-    const { getByText } = render(
+      .thenReturn(<div>mock well labels</div>)
+    render(
       <svg>
         <LabwareRender {...props} />
       </svg>
     )
-    getByText('mock well labels')
+    screen.getByText('mock well labels')
   })
 })