Migrate batch of components from Jest to Vitest (#6356)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: joshblack <[email protected]>
Co-authored-by: Josh Black <[email protected]>

Author: Copilot

packages/react/jest.config.js

@@ -39,17 +39,20 @@ module.exports = {
     '<rootDir>/src/FeatureFlags/',
     '<rootDir>/src/Flash/',
     '<rootDir>/src/FormControl/',
+    '<rootDir>/src/Header/',
     '<rootDir>/src/InlineMessage/',
     '<rootDir>/src/Hidden/',
     '<rootDir>/src/KeybindingHint/',
     '<rootDir>/src/Label/',
     '<rootDir>/src/LabelGroup/',
+    '<rootDir>/src/Link/',
     '<rootDir>/src/NavList/',
     '<rootDir>/src/Octicon/',
     '<rootDir>/src/Overlay/',
     '<rootDir>/src/PageLayout/',
     '<rootDir>/src/Pagehead/',
     '<rootDir>/src/Pagination/',
+    '<rootDir>/src/Popover/',
     '<rootDir>/src/Portal/',
     '<rootDir>/src/ProgressBar/',
     '<rootDir>/src/Radio/',

packages/react/src/Header/Header.test.tsx

@@ -1,64 +1,41 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
 import {Header} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('Header', () => {
-  behavesAsComponent({Component: Header})
-
-  checkExports('Header', {
-    default: Header,
-  })
-
   describe('Header.Item', () => {
-    behavesAsComponent({Component: Header.Item, options: {skipAs: true}})
-
     it('accepts and applies className', () => {
-      expect(render(<Header.Item className="primer" />).props.className).toContain('primer')
+      const {container} = render(<Header.Item className="primer" />)
+      expect(container.firstChild).toHaveClass('primer')
     })
 
     it('should support `className` on the outermost element', () => {
       const Element = () => <Header.Item className={'test-class-name'} />
-      expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+      expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
     })
   })
 
   describe('Header.Link', () => {
-    behavesAsComponent({Component: Header.Link})
-
     it('should support `className` on the outermost element', () => {
       const Element = () => <Header.Link className={'test-class-name'} />
-      expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+      expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
     })
   })
 
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <Header>
-        <Header.Item full>
-          <Header.Link href="#">One</Header.Link>
-        </Header.Item>
-        <Header.Item>
-          <Header.Link href="#">Two</Header.Link>
-        </Header.Item>
-        <Header.Item>Three</Header.Item>
-      </Header>,
-    )
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it('renders a <div> and <a>', () => {
-    expect(render(<Header />).type).toEqual('header')
-    expect(render(<Header.Link />).type).toEqual('a')
+  it('renders a <header> and <a>', () => {
+    const {container: headerContainer} = render(<Header />)
+    const {container: linkContainer} = render(<Header.Link />)
+    expect((headerContainer.firstChild as Element).tagName).toEqual('HEADER')
+    expect((linkContainer.firstChild as Element).tagName).toEqual('A')
   })
 
   it('sets aria-label appropriately', () => {
-    expect(render(<Header aria-label="Test label" />).props['aria-label']).toEqual('Test label')
+    const {container} = render(<Header aria-label="Test label" />)
+    expect(container.firstChild).toHaveAttribute('aria-label', 'Test label')
   })
 
   it('should support `className` on the outermost element', () => {
     const Element = () => <Header className={'test-class-name'} />
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 })

packages/react/src/Hidden/Hidden.test.tsx

@@ -3,15 +3,6 @@ import {describe, it, expect} from 'vitest'
 import {Hidden} from '../Hidden'
 
 describe('Hidden', () => {
-  it('renders `when` prop as expected', () => {
-    const {container} = render(
-      <Hidden when={'narrow'}>
-        <div>Hidden when narrow</div>
-      </Hidden>,
-    )
-    expect(container).toMatchSnapshot()
-  })
-
   it('renders the styles as expected when a single viewport value is provided as a string via `when` prop', () => {
     const hiddenElement = render(
       <div data-testid="hidden-regular">

packages/react/src/Hidden/__snapshots__/Hidden.test.tsx.snap

@@ -1,54 +1,48 @@
-import Link from '..'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
+import {describe, expect, it, vi} from 'vitest'
+import {render} from '@testing-library/react'
+import Link from '../Link'
 
 describe('Link', () => {
-  behavesAsComponent({Component: Link})
-
-  checkExports('Link', {
-    default: Link,
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <Link href="#" className={'test-class-name'} />
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Link href="www.github.com">GitHub</Link>)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('passes href down to link element', () => {
-    expect(render(<Link href="https://github.com" />)).toMatchSnapshot()
+    const {container} = render(<Link href="https://github.com" />)
+    expect(container.firstChild).toHaveAttribute('href', 'https://github.com')
   })
 
   it('respects hoverColor prop', () => {
-    expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
+    const {container} = render(<Link hoverColor="accent.fg" />)
+    expect(container.firstChild).toHaveStyle('--fgColor-accent: #0969da')
   })
 
   it('respects the "sx" prop', () => {
-    expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
+    const {container} = render(<Link sx={{fontStyle: 'italic'}} />)
+    expect(container.firstChild).toHaveStyle('font-style: italic')
   })
 
   it('applies button styles when rendering a button element', () => {
-    expect(render(<Link as="button" />)).toMatchSnapshot()
+    const {container} = render(<Link as="button" />)
+    expect((container.firstChild as Element).tagName).toBe('BUTTON')
   })
 
   it('respects the "muted" prop', () => {
-    expect(render(<Link muted />)).toMatchSnapshot()
+    const {container} = render(<Link muted />)
+    expect(container.firstChild).toHaveAttribute('data-muted', 'true')
   })
 
-  it('respects the  "sx" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
+  it('respects the "sx" prop when "muted" prop is also passed', () => {
+    const {container} = render(<Link muted sx={{color: 'fg.onEmphasis'}} />)
+    expect(container.firstChild).toHaveAttribute('data-muted', 'true')
+    expect(container.firstChild).toHaveStyle('color: rgb(89, 99, 110)')
   })
 
   it('logs a warning when trying to render invalid "as" prop', () => {
-    const consoleSpy = jest.spyOn(global.console, 'error').mockImplementation()
+    const consoleSpy = vi.spyOn(globalThis.console, 'error').mockImplementation(() => {})
 
-    HTMLRender(<Link as="i" />)
+    render(<Link as="i" />)
     expect(consoleSpy).toHaveBeenCalled()
 
     consoleSpy.mockRestore()

packages/react/src/Link/__tests__/Link.test.tsx

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Link applies button styles when rendering a button element 1`] = `
 <button

packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap

@@ -1,39 +1,12 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
 import type {PopoverProps} from '../Popover'
 import Popover from '../Popover'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
-
-const comp = (
-  <Popover caret="top" open>
-    <Popover.Content>Hello!</Popover.Content>
-  </Popover>
-)
 
 describe('Popover', () => {
-  behavesAsComponent({Component: Popover, toRender: () => comp})
-
-  checkExports('Popover', {
-    default: Popover,
-  })
-
-  describe('Popover.Content', () => {
-    behavesAsComponent({Component: Popover.Content, toRender: () => comp})
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <Popover className={'test-class-name'}></Popover>
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <Popover caret="top" open>
-        <Popover.Content>Hello!</Popover.Content>
-      </Popover>,
-    )
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   const CARET_POSITIONS: PopoverProps['caret'][] = [
@@ -59,12 +32,15 @@ describe('Popover', () => {
         </Popover>
       )
 
-      expect(render(element)).toMatchSnapshot()
+      const {container} = render(element)
+      expect(container.firstChild).toHaveAttribute('data-caret', pos)
     })
   }
 
   it('renders both elements as a <div>', () => {
-    expect(render(<Popover />).type).toEqual('div')
-    expect(render(<Popover.Content />).type).toEqual('div')
+    const {container: popoverContainer} = render(<Popover />)
+    const {container: contentContainer} = render(<Popover.Content />)
+    expect((popoverContainer.firstChild as Element).tagName).toEqual('DIV')
+    expect((contentContainer.firstChild as Element).tagName).toEqual('DIV')
   })
 })

packages/react/src/Popover/Popover.test.tsx

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Popover renders correctly for a caret position of bottom 1`] = `
 <div

packages/react/src/Popover/__snapshots__/Popover.test.tsx.snap

@@ -53,16 +53,19 @@ export default defineConfig({
       'src/Flash/**/*.test.?(c|m)[jt]s?(x)',
       'src/FormControl/**/*.test.?(c|m)[jt]s?(x)',
       'src/InlineMessage/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Header/**/*.test.?(c|m)[jt]s?(x)',
       'src/Hidden/**/*.test.?(c|m)[jt]s?(x)',
       'src/KeybindingHint/**/*.test.?(c|m)[jt]s?(x)',
       'src/Label/**/*.test.?(c|m)[jt]s?(x)',
       'src/LabelGroup/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Link/**/*.test.?(c|m)[jt]s?(x)',
       'src/NavList/**/*.test.?(c|m)[jt]s?(x)',
       'src/Octicon/**/*.test.?(c|m)[jt]s?(x)',
       'src/Overlay/**/*.test.?(c|m)[jt]s?(x)',
       'src/PageLayout/**/*.test.?(c|m)[jt]s?(x)',
       'src/Pagehead/**/*.test.?(c|m)[jt]s?(x)',
       'src/Pagination/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Popover/**/*.test.?(c|m)[jt]s?(x)',
       'src/Portal/**/*.test.?(c|m)[jt]s?(x)',
       'src/ProgressBar/**/*.test.?(c|m)[jt]s?(x)',
       'src/Radio/**/*.test.?(c|m)[jt]s?(x)',