refactor: update tests from Jest to Vitest

packages/react/jest.config.js

@@ -18,6 +18,7 @@ module.exports = {
     '<rootDir>/src/ActionBar/',
     '<rootDir>/src/ActionList/',
     '<rootDir>/src/AnchoredOverlay/',
+    '<rootDir>/src/Avatar/',
     '<rootDir>/src/Banner/',
     '<rootDir>/src/Blankslate/',
     '<rootDir>/src/Box/',
@@ -31,7 +32,10 @@ module.exports = {
     '<rootDir>/src/FeatureFlags/',
     '<rootDir>/src/Flash/',
     '<rootDir>/src/FormControl/__tests__/FormControl.Validation.test.tsx',
+    '<rootDir>/src/Header/',
+    '<rootDir>/src/Hidden/',
     '<rootDir>/src/InlineMessage/',
+    '<rootDir>/src/Label/',
     '<rootDir>/src/NavList/',
     '<rootDir>/src/Octicon/',
     '<rootDir>/src/Pagehead/',

packages/react/src/Avatar/Avatar.test.tsx

@@ -1,55 +1,56 @@
-import {Avatar} from '..'
+import {render, screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+import Avatar from '../Avatar'
 import theme from '../theme'
-import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, screen} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('Avatar', () => {
-  behavesAsComponent({
-    Component: Avatar,
-    options: {
-      skipAs: true,
-    },
-  })
-
-  checkExports('Avatar', {
-    default: Avatar,
-  })
-
   it('should support `className` on the outermost element', () => {
     const Element = () => <Avatar src="primer.png" className={'test-class-name'} />
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Avatar src="primer.png" />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders small by default', () => {
     const size = 20
-    const result = render(<Avatar src="primer.png" />)
-    expect(result.props.width).toEqual(size)
-    expect(result.props.height).toEqual(size)
+    const {container} = render(<Avatar src="primer.png" />)
+    expect(container.firstChild).toHaveStyle({
+      width: `${size}px`,
+      height: `${size}px`,
+    })
   })
 
   it('respects the size prop', () => {
-    const result = render(<Avatar size={40} src="primer.png" alt="github" />)
-    expect(result.props.width).toEqual(40)
-    expect(result.props.height).toEqual(40)
+    const size = 40
+    const {container} = render(<Avatar size={size} src="primer.png" alt="github" />)
+    expect(container.firstChild).toHaveStyle({
+      width: `${size}px`,
+      height: `${size}px`,
+    })
   })
 
   it('passes through the src prop', () => {
-    expect(render(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
+    const {container} = render(<Avatar src="primer.png" alt="" />)
+    expect(container.firstChild).toHaveAttribute('src', 'primer.png')
   })
 
   it('respects margin props', () => {
-    expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
+    render(<Avatar data-testid="avatar" src="primer.png" alt="" sx={{m: 2}} />)
+    const avatar = screen.getByTestId('avatar')
+    const classes = avatar.className.split(' ')
+    const sxClassName = classes[1]
+    const cssRule: CSSStyleRule | undefined = Array.from(document.styleSheets)
+      .flatMap(sheet => {
+        return Array.from(sheet.cssRules)
+      })
+      .find((cssRule): cssRule is CSSStyleRule => {
+        return cssRule instanceof CSSStyleRule && cssRule.selectorText === `.${sxClassName}`
+      })
+
+    expect(cssRule).toBeDefined()
+    expect(cssRule!.style.margin).toBe(`${theme.space[2]}`)
   })
 
   it('should support the `style` prop without overriding internal styles', () => {
-    HTMLRender(
+    render(
       <Avatar
         data-testid="avatar"
         src="primer.png"
@@ -59,9 +60,7 @@ describe('Avatar', () => {
       />,
     )
 
-    expect(screen.getByTestId('avatar')).toHaveStyle({
-      background: 'black',
-      ['--avatarSize-regular']: '20px',
-    })
+    expect(screen.getByTestId('avatar').style.background).toBe('black')
+    expect(screen.getByTestId('avatar').style.getPropertyValue('--avatarSize-regular')).toBe('20px')
   })
 })

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

@@ -1,64 +1,40 @@
-import {Header} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
+import {render} from '@testing-library/react'
+import {describe, it, expect} from 'vitest'
+import Header from '../Header'
 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')
+    expect(render(<Header />).container.firstElementChild?.tagName).toEqual('HEADER')
+    expect(render(<Header.Link />).container.firstElementChild?.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

@@ -1,7 +1,7 @@
 import {render} from '@testing-library/react'
-import {Hidden} from '.'
+import {describe, it, expect, afterAll, beforeAll} from 'vitest'
+import {Hidden} from '../Hidden'
 import MatchMediaMock from 'jest-matchmedia-mock'
-import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 
 let matchMedia: MatchMediaMock
 describe('Hidden', () => {
@@ -13,21 +13,6 @@ describe('Hidden', () => {
     matchMedia.clear()
   })
 
-  behavesAsComponent({
-    Component: Hidden,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <Hidden when={'narrow'}>
-        <div>Hidden when narrow</div>
-      </Hidden>
-    ),
-  })
-
-  checkExports('Hidden', {
-    default: Hidden,
-    Hidden,
-  })
-
   it('renders `when` prop as expected', () => {
     const {container} = render(
       <Hidden when={'narrow'}>
@@ -65,6 +50,3 @@ describe('Hidden', () => {
     )
   })
 })
-
-checkStoriesForAxeViolations('Hidden.features', '../Hidden/')
-checkStoriesForAxeViolations('Hidden.examples', '../Hidden/')

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Hidden renders \`when\` prop as expected 1`] = `
+exports[`Hidden > renders \`when\` prop as expected 1`] = `
 <div>
   <div
-    class="Hidden"
+    class="_Hidden_f0jw3_1"
     style="--hiddenDisplay-narrow: none;"
   >
     <div>

packages/react/src/Label/Label.test.tsx

@@ -1,34 +1,29 @@
 import {render} from '@testing-library/react'
-import axe from 'axe-core'
-import type {LabelColorOptions} from '../Label'
-import Label, {variants} from '../Label'
+import {describe, expect, it} from 'vitest'
+import Label from '../Label'
 
 describe('Label', () => {
   it('should support `className` on the outermost element', () => {
     const Element = () => <Label className={'test-class-name'} />
     expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
+
   it('renders text node child', () => {
     const container = render(<Label>Default</Label>)
     const label = container.baseElement
-    expect(label.textContent).toEqual('Default')
+    expect(label.textContent?.trim()).toEqual('Default')
   })
+
   it('default size is rendered as "small"', () => {
     const {getByText} = render(<Label>Default</Label>)
 
     // Expect the label to have the default size
     expect(getByText('Default')).toHaveAttribute('data-size', 'small')
   })
+
   it('default variant is rendered as "default"', () => {
     const {getByText} = render(<Label>Default</Label>)
 
     expect(getByText('Default')).toHaveAttribute('data-variant', 'default')
   })
-  it('should have no axe violations', async () => {
-    for (const variant in variants) {
-      const {container} = render(<Label variant={variant as LabelColorOptions}>Default</Label>)
-      const results = await axe.run(container)
-      expect(results).toHaveNoViolations()
-    }
-  })
 })

packages/react/vitest.config.browser.mts

@@ -21,6 +21,7 @@ export default defineConfig({
       'src/ActionBar/**/*.test.?(c|m)[jt]s?(x)',
       'src/ActionList/**/*.test.?(c|m)[jt]s?(x)',
       'src/AnchoredOverlay/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Avatar/**/*.test.?(c|m)[jt]s?(x)',
       'src/Banner/**/*.test.?(c|m)[jt]s?(x)',
       'src/Blankslate/**/*.test.?(c|m)[jt]s?(x)',
       'src/Box/**/*.test.?(c|m)[jt]s?(x)',
@@ -34,7 +35,10 @@ export default defineConfig({
       'src/FeatureFlags/**/*.test.?(c|m)[jt]s?(x)',
       'src/Flash/**/*.test.?(c|m)[jt]s?(x)',
       'src/FormControl/__tests__/FormControl.Validation.test.tsx',
+      'src/Header/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Hidden/**/*.test.?(c|m)[jt]s?(x)',
       'src/InlineMessage/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Label/**/*.test.?(c|m)[jt]s?(x)',
       'src/NavList/**/*.test.?(c|m)[jt]s?(x)',
       'src/Octicon/**/*.test.?(c|m)[jt]s?(x)',
       'src/Pagehead/**/*.test.?(c|m)[jt]s?(x)',