Migrate Avatar and AvatarStack tests from Jest to Vitest

packages/react/jest.config.js

@@ -19,6 +19,8 @@ module.exports = {
     '<rootDir>/src/ActionList/',
     '<rootDir>/src/AnchoredOverlay/',
     '<rootDir>/src/Autocomplete/',
+    '<rootDir>/src/Avatar/',
+    '<rootDir>/src/AvatarStack/',
     '<rootDir>/src/Banner/',
     '<rootDir>/src/Blankslate/',
     '<rootDir>/src/Box/',

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

@@ -1,55 +1,48 @@
+import {describe, expect, it} from 'vitest'
+import {render, screen} from '@testing-library/react'
 import {Avatar} from '..'
+import {ThemeProvider} from '../ThemeProvider'
 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)
+    render(<Avatar src="primer.png" data-testid="avatar" />)
+    const avatar = screen.getByTestId('avatar')
+    expect(avatar).toHaveAttribute('width', size.toString())
+    expect(avatar).toHaveAttribute('height', size.toString())
   })
 
   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)
+    render(<Avatar size={40} src="primer.png" alt="github" data-testid="avatar" />)
+    const avatar = screen.getByTestId('avatar')
+    expect(avatar).toHaveAttribute('width', '40')
+    expect(avatar).toHaveAttribute('height', '40')
   })
 
   it('passes through the src prop', () => {
-    expect(render(<Avatar src="primer.png" alt="" />).props.src).toEqual('primer.png')
+    render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
+    const avatar = screen.getByTestId('avatar')
+    expect(avatar).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(
+      <ThemeProvider theme={theme}>
+        <Avatar src="primer.png" alt="" sx={{m: 2}} data-testid="avatar" />
+      </ThemeProvider>,
+    )
+    const avatar = screen.getByTestId('avatar')
+    expect(avatar).toHaveStyle(`margin: 8px`)
   })
 
   it('should support the `style` prop without overriding internal styles', () => {
-    HTMLRender(
+    render(
       <Avatar
         data-testid="avatar"
         src="primer.png"
@@ -59,9 +52,14 @@ describe('Avatar', () => {
       />,
     )
 
-    expect(screen.getByTestId('avatar')).toHaveStyle({
-      background: 'black',
-      ['--avatarSize-regular']: '20px',
-    })
+    const avatar = screen.getByTestId('avatar')
+
+    // Test that both the custom CSS property and the style prop are applied
+    expect(avatar).toHaveStyle('--avatarSize-regular: 20px')
+
+    // Check that style attribute contains both the custom property and the background
+    const styleAttr = avatar.getAttribute('style') || ''
+    expect(styleAttr).toContain('--avatarSize-regular: 20px')
+    expect(styleAttr).toContain('background: black')
   })
 })

packages/react/src/AvatarStack/AvatarStack.test.tsx

@@ -1,7 +1,6 @@
+import {describe, expect, it} from 'vitest'
+import {render} from '@testing-library/react'
 import {AvatarStack} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 const avatarComp = (
   <AvatarStack>
@@ -21,17 +20,7 @@ const rightAvatarComp = (
   </AvatarStack>
 )
 
-describe('Avatar', () => {
-  behavesAsComponent({
-    Component: AvatarStack,
-    toRender: () => avatarComp,
-    options: {skipAs: true},
-  })
-
-  checkExports('AvatarStack', {
-    default: AvatarStack,
-  })
-
+describe('AvatarStack', () => {
   it('should support `className` on the outermost element', () => {
     const Element = () => (
       <AvatarStack className={'test-class-name'}>
@@ -41,26 +30,21 @@ describe('Avatar', () => {
         <img src="https://avatars.githubusercontent.com/github" alt="" />
       </AvatarStack>
     )
-    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(avatarComp)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('respects alignRight props', () => {
-    expect(render(rightAvatarComp)).toMatchSnapshot()
+    const {container} = render(rightAvatarComp)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   it('should have a tabindex of 0 if there are no interactive children', () => {
-    const {container} = HTMLRender(avatarComp)
+    const {container} = render(avatarComp)
     expect(container.querySelector('[tabindex="0"]')).toBeInTheDocument()
   })
 
   it('should not have a tabindex if there are interactive children', () => {
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack>
         <button type="button">Click me</button>
       </AvatarStack>,
@@ -69,7 +53,7 @@ describe('Avatar', () => {
   })
 
   it('should not have a tabindex if disableExpand is true', () => {
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack disableExpand>
         <img src="https://avatars.githubusercontent.com/primer" alt="" />
         <img src="https://avatars.githubusercontent.com/github" alt="" />
@@ -80,12 +64,12 @@ describe('Avatar', () => {
 
   it('should support `style` prop on the outermost element', () => {
     const style = {backgroundColor: 'red'}
-    const {container} = HTMLRender(
+    const {container} = render(
       <AvatarStack style={style}>
         <img src="https://avatars.githubusercontent.com/primer" alt="" />
         <img src="https://avatars.githubusercontent.com/github" alt="" />
       </AvatarStack>,
     )
-    expect(container.firstChild).toHaveStyle('background-color: red')
+    expect(container.firstChild).toHaveStyle('background-color: rgb(255, 0, 0)')
   })
 })

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

@@ -1,42 +1,36 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar respects alignRight props 1`] = `
+exports[`AvatarStack > respects alignRight props 1`] = `
 <span
-  className="pc-AvatarStack--three-plus pc-AvatarStack--right AvatarStack"
+  class="pc-AvatarStack--three-plus pc-AvatarStack--right prc-AvatarStack-AvatarStack-LcJ4R"
   data-align-right=""
   data-avatar-count="3+"
   data-responsive=""
-  style={
-    {
-      "--stackSize-narrow": "20px",
-      "--stackSize-regular": "20px",
-      "--stackSize-wide": "20px",
-    }
-  }
+  style="--stackSize-narrow: 20px; --stackSize-regular: 20px; --stackSize-wide: 20px;"
 >
   <div
-    className="pc-AvatarStackBody AvatarStackBody"
-    tabIndex={0}
+    class="pc-AvatarStackBody prc-AvatarStack-AvatarStackBody-LVwsN"
+    tabindex="0"
   >
 
     <img
       alt=""
-      className="pc-AvatarItem AvatarItem"
+      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
       src="https://avatars.githubusercontent.com/primer"
     />
     <img
       alt=""
-      className="pc-AvatarItem AvatarItem"
+      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
       src="https://avatars.githubusercontent.com/github"
     />
     <img
       alt=""
-      className="pc-AvatarItem AvatarItem"
+      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
       src="https://avatars.githubusercontent.com/primer"
     />
     <img
       alt=""
-      className="pc-AvatarItem AvatarItem"
+      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
       src="https://avatars.githubusercontent.com/github"
     />
   </div>

packages/react/vitest.config.browser.mts

@@ -32,6 +32,8 @@ export default defineConfig({
       'src/ActionList/**/*.test.?(c|m)[jt]s?(x)',
       'src/AnchoredOverlay/**/*.test.?(c|m)[jt]s?(x)',
       'src/Autocomplete/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Avatar/**/*.test.?(c|m)[jt]s?(x)',
+      'src/AvatarStack/**/*.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)',