refactor: update tests to vitest, move all component tests to folders

packages/react/jest.config.js

@@ -29,10 +29,15 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.tsx', '<rootDir>/src/utils/test-deprecations.tsx'],
   testMatch: ['<rootDir>/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
   modulePathIgnorePatterns: [
+    '<rootDir>/src/ActionBar/',
+    '<rootDir>/src/AnchoredOverlay/',
     '<rootDir>/src/Banner/',
     '<rootDir>/src/DataTable/',
     '<rootDir>/src/FeatureFlags/',
     '<rootDir>/src/Stack/',
+    '<rootDir>/src/ToggleSwitch/',
+    '<rootDir>/src/Truncate/',
+    '<rootDir>/src/UnderlineNav/',
   ],
   transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)'],
 }

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -1,77 +1,54 @@
 import React from 'react'
-import {behavesAsComponent} from '../utils/testing'
+import {describe, expect, it, afterEach, vi} from 'vitest'
+import {render, screen, act} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {render as HTMLRender, act} from '@testing-library/react'
-import axe from 'axe-core'
 
 import ActionBar from './'
-import {BoldIcon, CodeIcon, ItalicIcon, LinkIcon} from '@primer/octicons-react'
-
-const SimpleActionBar = () => (
-  <ActionBar aria-label="Toolbar">
-    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.Divider />
-    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
-  </ActionBar>
-)
+import {BoldIcon} from '@primer/octicons-react'
 
 describe('ActionBar', () => {
   afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: ActionBar,
-    options: {skipAs: true, skipSx: true, skipClassName: true},
-    toRender: () => <SimpleActionBar />,
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleActionBar />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    vi.clearAllMocks()
   })
 
   it('should not trigger disabled button', () => {
-    const onClick = jest.fn()
-    const {getByRole} = HTMLRender(
+    const onClick = vi.fn()
+    render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick} disabled></ActionBar.IconButton>
       </ActionBar>,
     )
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
     button.click()
 
     expect(onClick).not.toHaveBeenCalled()
   })
 
   it('should trigger non-disabled button', () => {
-    const onClick = jest.fn()
-    const {getByRole} = HTMLRender(
+    const onClick = vi.fn()
+    render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick}></ActionBar.IconButton>
       </ActionBar>,
     )
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
     button.click()
 
     expect(onClick).toHaveBeenCalled()
   })
 
   it('should not trigger disabled button with spacebar or enter', async () => {
     const user = userEvent.setup()
-    const onClick = jest.fn()
-    const {getByRole} = HTMLRender(
+    const onClick = vi.fn()
+    render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick} disabled></ActionBar.IconButton>
       </ActionBar>,
     )
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
 
     act(() => {
       button.focus()
@@ -84,14 +61,14 @@ describe('ActionBar', () => {
 
   it('should trigger non-disabled button with spacebar or enter', async () => {
     const user = userEvent.setup()
-    const onClick = jest.fn()
-    const {getByRole} = HTMLRender(
+    const onClick = vi.fn()
+    render(
       <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick}></ActionBar.IconButton>
       </ActionBar>,
     )
 
-    const button = getByRole('button')
+    const button = screen.getByRole('button')
 
     act(() => {
       button.focus()

packages/react/src/__tests__/AnchoredOverlay.test.tsx → packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx

@@ -1,15 +1,11 @@
 import React, {useCallback, useState} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+import {render, fireEvent} from '@testing-library/react'
 import {AnchoredOverlay} from '../AnchoredOverlay'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, fireEvent} from '@testing-library/react'
-import axe from 'axe-core'
 import {Button} from '../Button'
 import theme from '../theme'
 import BaseStyles from '../BaseStyles'
 import {ThemeProvider} from '../ThemeProvider'
-import {setupMatchMedia} from '../utils/test-helpers'
-
-setupMatchMedia()
 
 type TestComponentSettings = {
   initiallyOpen?: boolean
@@ -54,33 +50,10 @@ const AnchoredOverlayTestComponent = ({
 }
 
 describe('AnchoredOverlay', () => {
-  behavesAsComponent({
-    Component: AnchoredOverlay,
-    options: {skipAs: true, skipSx: true, skipClassName: true},
-    toRender: () => <AnchoredOverlayTestComponent />,
-  })
-
-  checkExports('AnchoredOverlay', {
-    default: undefined,
-    AnchoredOverlay,
-  })
-
-  it('should have no axe violations when open', async () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true}></AnchoredOverlayTestComponent>)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it('should have no axe violations when closed', async () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent></AnchoredOverlayTestComponent>)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('should call onOpen when the anchor is clicked', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
+    const mockOpenCallback = vi.fn()
+    const mockCloseCallback = vi.fn()
+    const anchoredOverlay = render(
       <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />,
     )
     const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
@@ -92,9 +65,9 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should call onOpen when the anchor activated by a key press', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
+    const mockOpenCallback = vi.fn()
+    const mockCloseCallback = vi.fn()
+    const anchoredOverlay = render(
       <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />,
     )
     const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
@@ -106,9 +79,9 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should call onClose when the user clicks off of the overlay', () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
+    const mockOpenCallback = vi.fn()
+    const mockCloseCallback = vi.fn()
+    const anchoredOverlay = render(
       <AnchoredOverlayTestComponent
         initiallyOpen={true}
         onOpenCallback={mockOpenCallback}
@@ -123,9 +96,9 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should call onClose when the escape key is pressed', async () => {
-    const mockOpenCallback = jest.fn()
-    const mockCloseCallback = jest.fn()
-    const anchoredOverlay = HTMLRender(
+    const mockOpenCallback = vi.fn()
+    const mockCloseCallback = vi.fn()
+    const anchoredOverlay = render(
       <AnchoredOverlayTestComponent
         initiallyOpen={true}
         onOpenCallback={mockOpenCallback}
@@ -141,7 +114,7 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should render consistently when open', () => {
-    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    const {container} = render(<AnchoredOverlayTestComponent initiallyOpen={true} />)
     expect(container).toMatchSnapshot()
   })
 })

packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap → packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -1,34 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AnchoredOverlay should render consistently when open 1`] = `
+exports[`AnchoredOverlay > should render consistently when open 1`] = `
 <div>
   <div
-    class="BaseStyles"
+    class="_BaseStyles_1n09d_56"
     data-color-mode="light"
     data-dark-theme="dark"
     data-light-theme="light"
     data-portal-root="true"
   >
     <button
-      aria-describedby=":rj:-loading-announcement"
+      aria-describedby=":rd:-loading-announcement"
       aria-expanded="true"
       aria-haspopup="true"
-      class="ButtonBase"
+      class="_ButtonBase_130zs_2"
       data-loading="false"
       data-no-visuals="true"
       data-size="medium"
       data-variant="default"
-      id=":rj:"
+      id=":rd:"
       tabindex="0"
       type="button"
     >
       <span
-        class="ButtonContent"
+        class="_ButtonContent_130zs_101"
         data-align="center"
         data-component="buttonContent"
       >
         <span
-          class="Label"
+          class="_Label_130zs_128"
           data-component="text"
         >
           Anchor Button
@@ -43,14 +43,14 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
         style="position: relative; z-index: 1;"
       >
         <div
-          class="Overlay"
+          class="_Overlay_3qzyn_11"
           data-focus-trap="active"
           data-height-auto=""
           data-variant="anchored"
           data-visibility-visible=""
           data-width-auto=""
           role="none"
-          style="left: 0px; top: 4px;"
+          style="left: 0px; top: 26.8438px;"
         >
           <span
             aria-hidden="true"

packages/react/src/CounterLabel/CounterLabel.types.test.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import React from 'react'
 import CounterLabel from '../CounterLabel'
 
 export function shouldAcceptCallWithNoProps() {
@@ -9,15 +9,3 @@ export function shouldNotAcceptSystemProps() {
   // @ts-expect-error system props should not be accepted
   return <CounterLabel backgroundColor="whitesmoke" />
 }
-
-export function showAcceptARef() {
-  function Component() {
-    const ref = useRef<HTMLSpanElement>(null)
-    return <CounterLabel ref={ref} />
-  }
-  return <Component />
-}
-
-export function shouldPassThroughSpanProps() {
-  return <CounterLabel data-testid="test value" aria-label="Test label" />
-}

packages/react/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -1,21 +1,12 @@
+import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
 import {render} from '@testing-library/react'
 import ToggleSwitch from './'
-import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import userEvent from '@testing-library/user-event'
 
 const SWITCH_LABEL_TEXT = 'Switch label'
 
 describe('ToggleSwitch', () => {
-  behavesAsComponent({
-    Component: ToggleSwitch,
-    options: {skipAs: true},
-  })
-
-  checkExports('ToggleSwitch', {
-    default: ToggleSwitch,
-  })
-
   it('renders a switch that is turned off', () => {
     const {getByLabelText} = render(
       <>
@@ -129,7 +120,7 @@ describe('ToggleSwitch', () => {
 
   it('calls onChange when the switch is toggled', async () => {
     const user = userEvent.setup()
-    const handleChange = jest.fn()
+    const handleChange = vi.fn()
     const ControlledSwitchComponent = ({handleSwitchChange}: {handleSwitchChange: (on: boolean) => void}) => {
       const [isOn, setIsOn] = React.useState(false)
 
@@ -167,7 +158,7 @@ describe('ToggleSwitch', () => {
   })
 
   it('supports a `ref` on the inner <button> element', () => {
-    const ref = jest.fn()
+    const ref = vi.fn()
 
     render(
       <>
@@ -191,6 +182,4 @@ describe('ToggleSwitch', () => {
     const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
     expect(toggleSwitch).toHaveAttribute('type', 'button')
   })
-
-  checkStoriesForAxeViolations('ToggleSwitch.features', '../ToggleSwitch/')
 })