refactor(test): update BranchName, Breadcrumbs, ButtonGroup, CheckboxGroup, CircleBadge, CircleOcticon tests to vitest (#6044)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 2 people

packages/react/jest.config.js

@@ -33,6 +33,12 @@ module.exports = {
     '<rootDir>/src/AnchoredOverlay/',
     '<rootDir>/src/Banner/',
     '<rootDir>/src/Blankslate/',
+    '<rootDir>/src/BranchName/',
+    '<rootDir>/src/Breadcrumbs/',
+    '<rootDir>/src/ButtonGroup/',
+    '<rootDir>/src/CheckboxGroup/',
+    '<rootDir>/src/CircleBadge/',
+    '<rootDir>/src/CircleOcticon/',
     '<rootDir>/src/DataTable/',
     '<rootDir>/src/FeatureFlags/',
     '<rootDir>/src/Select/',

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

@@ -1,29 +1,12 @@
 import React from 'react'
 import BranchName from '../BranchName'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
+import {describe, expect, it} from 'vitest'
 
 describe('BranchName', () => {
-  behavesAsComponent({
-    Component: BranchName,
-    options: {
-      skipDisplayName: true,
-    },
-  })
-
-  checkExports('BranchName', {
-    default: BranchName,
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<BranchName />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('renders an <a> by default', () => {
-    expect(render(<BranchName />).type).toEqual('a')
+    const {container} = HTMLRender(<BranchName />)
+    expect(container.firstChild?.nodeName).toEqual('A')
   })
 
   it('should support `className` on the outermost element', () => {

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

@@ -1,30 +1,17 @@
 import React from 'react'
-import Breadcrumbs, {Breadcrumb} from '..'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
+import Breadcrumbs from '..'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
+import {describe, expect, it} from 'vitest'
 
 describe('Breadcrumbs', () => {
-  behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
-
-  checkExports('Breadcrumbs', {
-    default: Breadcrumbs,
-    Breadcrumb,
-  })
-
   it('should support `className` on the outermost element', () => {
     expect(HTMLRender(<Breadcrumbs className={'test-class-name'} />).container.firstChild).toHaveClass(
       'test-class-name',
     )
   })
 
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Breadcrumbs />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('renders a <nav>', () => {
-    expect(render(<Breadcrumbs />).type).toEqual('nav')
+    const {container} = HTMLRender(<Breadcrumbs />)
+    expect(container.firstChild?.nodeName).toEqual('NAV')
   })
 })

packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx

@@ -1,23 +1,16 @@
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 import React from 'react'
 import Breadcrumbs from '..'
-import {behavesAsComponent, render} from '../../utils/testing'
+import {describe, expect, it} from 'vitest'
 
 describe('Breadcrumbs.Item', () => {
-  behavesAsComponent({Component: Breadcrumbs.Item})
-
   it('renders an <a> by default', () => {
-    expect(render(<Breadcrumbs.Item />).type).toEqual('a')
-  })
-
-  it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Breadcrumbs.Item />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(container.firstChild?.nodeName).toEqual('A')
   })
 
   it('respects the "selected" prop', () => {
-    expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
+    const {container} = HTMLRender(<Breadcrumbs.Item selected />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 })

packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
+exports[`Breadcrumbs.Item > respects the "selected" prop 1`] = `
 <a
   aria-current="page"
-  className="Item selected ItemSelected"
+  class="_Item_tg8iv_12 selected _ItemSelected_tg8iv_53"
 />
 `;

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,25 +1,9 @@
-import {Button} from '../Button'
 import {render, screen} from '@testing-library/react'
-import axe from 'axe-core'
-import {behavesAsComponent} from '../utils/testing'
-import type {ButtonGroupProps} from './ButtonGroup'
 import ButtonGroup from './ButtonGroup'
 import React from 'react'
-
-const TestButtonGroup = (props: ButtonGroupProps) => (
-  <ButtonGroup {...props}>
-    <Button>Button 1</Button>
-    <Button>Button 2</Button>
-    <Button>Button 3</Button>
-  </ButtonGroup>
-)
+import {describe, expect, it} from 'vitest'
 
 describe('ButtonGroup', () => {
-  behavesAsComponent({
-    Component: TestButtonGroup,
-    options: {skipSx: true, skipAs: true},
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <ButtonGroup className={'test-class-name'} />
     expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
@@ -30,12 +14,6 @@ describe('ButtonGroup', () => {
     expect(container.getByTestId('button-group').tagName).toBe('DIV')
   })
 
-  it('should have no axe violations', async () => {
-    const {container} = render(<TestButtonGroup />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('should respect role prop', () => {
     render(<ButtonGroup role="toolbar" />)
     expect(screen.getByRole('toolbar')).toBeInTheDocument()

packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx

@@ -1,46 +1,18 @@
 import React from 'react'
 import {render} from '@testing-library/react'
 import {Checkbox, CheckboxGroup, FormControl} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
 import userEvent from '@testing-library/user-event'
-import {CheckboxGroupContext} from '../CheckboxGroup'
+import {describe, expect, it, vi, beforeAll, afterAll} from 'vitest'
 
 describe('CheckboxGroup', () => {
-  const mockWarningFn = jest.fn()
+  const mockWarningFn = vi.fn()
 
   beforeAll(() => {
-    jest.spyOn(global.console, 'warn').mockImplementation(mockWarningFn)
+    vi.spyOn(console, 'warn').mockImplementation(mockWarningFn)
   })
 
   afterAll(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: CheckboxGroup,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <CheckboxGroup>
-        <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
-        <FormControl>
-          <Checkbox value="one" />
-          <FormControl.Label>Choice one</FormControl.Label>
-        </FormControl>
-        <FormControl>
-          <Checkbox value="two" />
-          <FormControl.Label>Choice two</FormControl.Label>
-        </FormControl>
-        <FormControl>
-          <Checkbox value="three" />
-          <FormControl.Label>Choice three</FormControl.Label>
-        </FormControl>
-      </CheckboxGroup>
-    ),
-  })
-
-  checkExports('CheckboxGroup', {
-    default: CheckboxGroup,
-    CheckboxGroupContext,
+    vi.restoreAllMocks()
   })
 
   it('renders a disabled group of inputs', () => {
@@ -96,8 +68,8 @@ describe('CheckboxGroup', () => {
 
   it('calls onChange handlers passed to CheckboxGroup and Checkbox', async () => {
     const user = userEvent.setup()
-    const handleParentChange = jest.fn()
-    const handleCheckboxChange = jest.fn()
+    const handleParentChange = vi.fn()
+    const handleCheckboxChange = vi.fn()
     const {getByLabelText} = render(
       <CheckboxGroup onChange={handleParentChange}>
         <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
@@ -126,7 +98,7 @@ describe('CheckboxGroup', () => {
 
   it('calls onChange handler on CheckboxGroup with selected values', async () => {
     const user = userEvent.setup()
-    const handleParentChange = jest.fn()
+    const handleParentChange = vi.fn()
     const {getByLabelText} = render(
       <CheckboxGroup onChange={handleParentChange}>
         <CheckboxGroup.Label>Choices</CheckboxGroup.Label>

packages/react/src/CircleBadge/CircleBadge.test.tsx

@@ -1,55 +1,34 @@
 import React from 'react'
 import {CircleBadge} from '..'
 import {CheckIcon} from '@primer/octicons-react'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
+import {describe, expect, it} from 'vitest'
 
 const imgInput = <img alt="Example" src="primer.jpg" />
 
 describe('CircleBadge', () => {
-  behavesAsComponent({
-    Component: CircleBadge,
-    toRender: () => <CircleBadge>{imgInput}</CircleBadge>,
-  })
-
-  checkExports('CircleBadge', {
-    default: CircleBadge,
-  })
-
-  describe('CircleBadge.Icon', () => {
-    behavesAsComponent({
-      Component: CircleBadge.Icon,
-      toRender: () => <CircleBadge.Icon icon={CheckIcon} />,
-    })
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CircleBadge variant="large" size={20} />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
   it('respects the inline prop', () => {
-    expect(render(<CircleBadge inline />)).toMatchSnapshot()
+    const {container} = HTMLRender(<CircleBadge inline />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   it('respects the variant prop', () => {
-    expect(render(<CircleBadge variant="large" />)).toMatchSnapshot()
+    const {container} = HTMLRender(<CircleBadge variant="large" />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   it('uses the size prop to override the variant prop', () => {
-    expect(render(<CircleBadge variant="large" size={20} />)).toMatchSnapshot()
+    const {container} = HTMLRender(<CircleBadge variant="large" size={20} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   it('applies title', () => {
-    expect(
-      render(
-        <CircleBadge as="a" title="primer logo">
-          {imgInput}
-        </CircleBadge>,
-      ).props['title'],
-    ).toEqual('primer logo')
+    const {container} = HTMLRender(
+      <CircleBadge as="a" title="primer logo">
+        {imgInput}
+      </CircleBadge>,
+    )
+    expect(container.firstChild).toHaveAttribute('title', 'primer logo')
   })
 
   it('preserves child class names', () => {
@@ -60,4 +39,11 @@ describe('CircleBadge', () => {
     )
     expect(getByRole('img')).toHaveClass('primer')
   })
+
+  describe('CircleBadge.Icon', () => {
+    it('renders an icon', () => {
+      const {container} = HTMLRender(<CircleBadge.Icon icon={CheckIcon} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
 })