refactor: update tests to vitest (#6031)

Author: joshblack

package-lock.json

@@ -34,8 +34,18 @@ module.exports = {
     '<rootDir>/src/Banner/',
     '<rootDir>/src/DataTable/',
     '<rootDir>/src/FeatureFlags/',
+    '<rootDir>/src/Select/',
+    '<rootDir>/src/Skeleton/',
+    '<rootDir>/src/Spinner/',
     '<rootDir>/src/Stack/',
+    '<rootDir>/src/StateLabel/',
+    '<rootDir>/src/SubNav/',
+    '<rootDir>/src/TabNav/',
+    '<rootDir>/src/TextInputWithTokens/',
+    '<rootDir>/src/Timeline/',
     '<rootDir>/src/ToggleSwitch/',
+    '<rootDir>/src/Tooltip/',
+    '<rootDir>/src/TooltipV2/',
     '<rootDir>/src/Truncate/',
     '<rootDir>/src/UnderlineNav/',
   ],

packages/react/jest.config.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {describe, expect, it} from 'vitest'
 import {Select} from '..'
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

packages/react/src/Select/Select.test.tsx

@@ -1,5 +1,6 @@
 import {render} from '@testing-library/react'
 import React from 'react'
+import {describe, expect, it} from 'vitest'
 import {SkeletonBox} from '../SkeletonBox'
 
 describe('SkeletonBox', () => {

packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx

@@ -1,59 +1,41 @@
 import React from 'react'
-import axe from 'axe-core'
 import type {SpinnerProps} from '..'
 import {Spinner} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, screen} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
 
 describe('Spinner', () => {
-  behavesAsComponent({
-    Component: Spinner,
-    options: {
-      skipAs: true,
-    },
-  })
-
-  checkExports('Spinner', {
-    default: Spinner,
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <Spinner className={'test-class-name'} />
-    expect(HTMLRender(<Element />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(render(<Element />).container.firstChild?.firstChild).toHaveClass('test-class-name')
   })
 
   it('should label the spinner with default loading text', async () => {
-    const {getByLabelText} = HTMLRender(<Spinner />)
+    const {getByLabelText} = render(<Spinner />)
 
     expect(getByLabelText('Loading')).toBeInTheDocument()
   })
 
   it('should label the spinner with with custom loading text', async () => {
-    const {getByLabelText} = HTMLRender(<Spinner srText="Custom loading text" />)
+    const {getByLabelText} = render(<Spinner srText="Custom loading text" />)
 
     expect(getByLabelText('Custom loading text')).toBeInTheDocument()
   })
 
   it('should not label the spinner with with loading text when `srText` is set to `null`', () => {
-    const {getByLabelText} = HTMLRender(<Spinner srText={null} />)
+    const {getByLabelText} = render(<Spinner srText={null} />)
 
     expect(() => getByLabelText('Loading')).toThrow()
   })
 
   it('should use `aria-label` over `srText` if `aria-label` is provided', () => {
-    HTMLRender(<Spinner aria-label="Test label" />)
+    render(<Spinner aria-label="Test label" />)
     expect(screen.getByLabelText('Test label')).toBeInTheDocument()
   })
 
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Spinner />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('should respect size arguments', () => {
     const expectSize = (input: SpinnerProps['size'] | undefined, expectedSize: string) => {
-      const {container} = HTMLRender(<Spinner size={input} />)
+      const {container} = render(<Spinner size={input} />)
       const svg = container.querySelector('svg')!
       expect(svg.getAttribute('height')).toEqual(expectedSize)
       expect(svg.getAttribute('width')).toEqual(expectedSize)

packages/react/src/Spinner/Spinner.test.tsx

@@ -1,47 +1,24 @@
 import React from 'react'
+import {describe, expect, it} from 'vitest'
 import StateLabel from '../StateLabel'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('StateLabel', () => {
-  behavesAsComponent({
-    Component: StateLabel,
-    toRender: () => <StateLabel status="issueOpened">Open</StateLabel>,
-    options: {
-      // Rendering a Octicon seems to break getComputedStyles, which
-      // the sx prop implementation test uses to make sure the prop is working correctly.
-      // Despite my best efforts, I cannot figure out why this is happening. So,
-      // unfortunately, we will simply skip this test.
-      skipSx: true,
-    },
-  })
-
-  checkExports('StateLabel', {
-    default: StateLabel,
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<StateLabel status="issueOpened" />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('respects the status prop', () => {
-    expect(render(<StateLabel status="issueOpened" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="issueClosed" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="issueClosedNotPlanned" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="pullMerged" />)).toMatchSnapshot()
-    expect(render(<StateLabel status="pullQueued" />)).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="issueOpened" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="issueClosed" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="issueClosedNotPlanned" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="pullMerged" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="pullQueued" />).container).toMatchSnapshot()
   })
 
   it('respects the variant prop', () => {
-    expect(render(<StateLabel variant="small" status="issueOpened" />)).toMatchSnapshot()
-    expect(render(<StateLabel variant="normal" status="issueOpened" />)).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel variant="small" status="issueOpened" />).container).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel variant="normal" status="issueOpened" />).container).toMatchSnapshot()
   })
 
   it('renders children', () => {
-    expect(render(<StateLabel status="issueOpened">hi</StateLabel>)).toMatchSnapshot()
+    expect(HTMLRender(<StateLabel status="issueOpened">hi</StateLabel>).container).toMatchSnapshot()
   })
 
   it('adds label to icon', () => {