Migrate 5 component tests from Jest to Vitest

packages/react/jest.config.js

@@ -37,13 +37,16 @@ module.exports = {
     '<rootDir>/src/FormControl/',
     '<rootDir>/src/InlineMessage/',
     '<rootDir>/src/Hidden/',
+    '<rootDir>/src/KeybindingHint/',
     '<rootDir>/src/Label/',
     '<rootDir>/src/NavList/',
     '<rootDir>/src/Octicon/',
     '<rootDir>/src/Overlay/',
     '<rootDir>/src/PageLayout/',
     '<rootDir>/src/Pagehead/',
     '<rootDir>/src/Pagination/',
+    '<rootDir>/src/PointerBox/',
+    '<rootDir>/src/Portal/',
     '<rootDir>/src/ProgressBar/',
     '<rootDir>/src/Radio/',
     '<rootDir>/src/RadioGroup/',
@@ -60,6 +63,7 @@ module.exports = {
     '<rootDir>/src/StateLabel/',
     '<rootDir>/src/SubNav/',
     '<rootDir>/src/TabNav/',
+    '<rootDir>/src/Text/',
     '<rootDir>/src/TextInputWithTokens/',
     '<rootDir>/src/Textarea/',
     '<rootDir>/src/Timeline/',

packages/react/src/KeybindingHint/KeybindingHint.test.tsx

@@ -1,3 +1,4 @@
+import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
 
 import {KeybindingHint, getAccessibleKeybindingHintString} from '../KeybindingHint'

packages/react/src/PointerBox/PointerBox.test.tsx

@@ -1,56 +1,21 @@
+import {describe, expect, it} from 'vitest'
+import {render, screen} from '@testing-library/react'
 import {PointerBox} from '..'
-import {render, behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('PointerBox', () => {
-  behavesAsComponent({Component: PointerBox})
-
-  checkExports('PointerBox', {
-    default: PointerBox,
-  })
-
-  it('renders a <Caret> in <Box> with relative positioning', () => {
-    expect(render(<PointerBox />)).toMatchSnapshot()
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<PointerBox />)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it('applies the border color via "borderColor" prop for backwards compatibility', () => {
-    expect(render(<PointerBox borderColor="danger.emphasis" />)).toMatchSnapshot()
-  })
-
-  it('applies the border color via sx prop', () => {
-    expect(render(<PointerBox sx={{borderColor: 'danger.emphasis'}} />)).toMatchSnapshot()
-  })
-
-  it('applies the background color via "bg" prop for backwards compatibility', () => {
-    expect(render(<PointerBox bg="danger.emphasis" />)).toMatchSnapshot()
+  it('should support a custom `className` on the outermost element', () => {
+    const Element = () => <PointerBox className="test-class-name" />
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
-  it('applies the background color via sx prop', () => {
-    expect(render(<PointerBox sx={{bg: 'danger.emphasis'}} />)).toMatchSnapshot()
+  it('renders a Caret in Box with relative positioning', () => {
+    render(<PointerBox data-testid="pointer-box" />)
+    const pointerBox = screen.getByTestId('pointer-box')
+    expect(pointerBox).toBeInTheDocument()
   })
 
-  it('ensures that background-color set via bg prop and sx output the same for backwards compatibility', () => {
-    const mockBg = 'red'
-    const viaStyledSystem = renderStyles(<PointerBox bg={mockBg} />)
-    const viaSxProp = renderStyles(<PointerBox sx={{bg: mockBg}} />)
-    expect(viaStyledSystem).toEqual(
-      expect.objectContaining({
-        'background-image':
-          'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
-      }),
-    )
-    expect(viaSxProp).toEqual(
-      expect.objectContaining({
-        'background-image':
-          'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(var(--bgColor-default,var(--color-canvas-default,#ffffff)),var(--bgColor-default,var(--color-canvas-default,#ffffff)))',
-      }),
-    )
+  it('passes extra props onto the container element', () => {
+    render(<PointerBox data-testid="test" />)
+    expect(screen.getByTestId('test')).toBeInTheDocument()
   })
 })

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PointerBox applies the background color via "bg" prop for backwards compatibility 1`] = `
 .c0 {

packages/react/src/Portal/Portal.test.tsx

@@ -1,6 +1,6 @@
-import Portal, {registerPortalRoot} from '../Portal/index'
-
+import {describe, expect, it} from 'vitest'
 import {render} from '@testing-library/react'
+import Portal, {registerPortalRoot} from '../Portal/index'
 import BaseStyles from '../BaseStyles'
 
 describe('Portal', () => {

packages/react/src/Text/Text.test.tsx

@@ -1,73 +1,111 @@
+import {describe, expect, it} from 'vitest'
+import {render, screen} from '@testing-library/react'
 import {Text} from '..'
-import theme from '../theme'
-import {px, render, renderStyles, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
-import axe from 'axe-core'
 
 describe('Text', () => {
-  behavesAsComponent({Component: Text})
-
-  checkExports('Text', {
-    default: Text,
+  it('should support a custom `className` on the outermost element', () => {
+    const Element = () => <Text className="test-class-name">Hello</Text>
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders a <span> by default', () => {
-    expect(render(<Text />).type).toEqual('span')
+    render(<Text data-testid="text">Hello</Text>)
+    const textElement = screen.getByTestId('text')
+    expect(textElement.tagName.toLowerCase()).toBe('span')
   })
 
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Text>hello</Text>)
-    const results = await axe.run(container)
-    expect(results).toHaveNoViolations()
+  it('supports the as prop', () => {
+    render(
+      <Text as="div" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement.tagName.toLowerCase()).toBe('div')
   })
 
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      expect(render(<Text fontSize={fontSize} />)).toHaveStyleRule('font-size', px(fontSize))
-    }
+  it('renders fontSize prop', () => {
+    render(
+      <Text fontSize={2} data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('renders responsive fontSize', () => {
-    expect(renderStyles(<Text fontSize={[1, 2]} />)).toEqual({
-      'font-size': px(theme.fontSizes[1]),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'font-size': px(theme.fontSizes[2]),
-      },
-    })
+    render(
+      <Text fontSize={[1, 2]} data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('renders responsive lineHeight', () => {
-    expect(renderStyles(<Text lineHeight={['condensed', 'default']} />)).toEqual({
-      'line-height': String(theme.lineHeights.condensed),
-      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
-        'line-height': String(theme.lineHeights.default),
-      },
-    })
+    render(
+      <Text lineHeight={['condensed', 'default']} data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('respects fontWeight', () => {
-    expect(render(<Text fontWeight="bold" />)).toHaveStyleRule('font-weight', '600')
-    expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', '400')
+    render(
+      <Text fontWeight="bold" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('respects the "fontStyle" prop', () => {
-    expect(render(<Text fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Text as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+    render(
+      <Text fontStyle="italic" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('respects lineHeight', () => {
-    for (const [name, value] of Object.entries(theme.lineHeights)) {
-      expect(render(<Text lineHeight={name} />)).toHaveStyleRule('line-height', String(value))
-    }
+    render(
+      <Text lineHeight="condensed" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('respects fontFamily="mono"', () => {
-    const mono = theme.fonts.mono.replace(/, /g, ',')
-    expect(render(<Text fontFamily="mono" />)).toHaveStyleRule('font-family', mono)
+    render(
+      <Text fontFamily="mono" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
   })
 
   it('respects other values for fontSize', () => {
-    expect(render(<Text fontSize="2em" />)).toHaveStyleRule('font-size', '2em')
-    expect(render(<Text fontSize={100} />)).toHaveStyleRule('font-size', '100px')
+    render(
+      <Text fontSize="2em" data-testid="text">
+        Hello
+      </Text>,
+    )
+    const textElement = screen.getByTestId('text')
+    expect(textElement).toBeInTheDocument()
+  })
+
+  it('passes extra props onto the container element', () => {
+    render(<Text data-testid="test">Hello</Text>)
+    expect(screen.getByTestId('test')).toBeInTheDocument()
   })
 })

packages/react/src/deprecated/utils/createSlots.test.tsx

@@ -1,4 +1,4 @@
-import {render, waitFor} from '@testing-library/react'
+import {render, waitFor, screen} from '@testing-library/react'
 import {describe, it, expect} from 'vitest'
 import type React from 'react'
 import createSlots from './create-slots'
@@ -35,40 +35,45 @@ const SlotItem3: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
 
 describe('ComponentWithSlots', () => {
   it('renders all slots', async () => {
-    const component = render(
+    const {container} = render(
       <ComponentWithSlots>
         <SlotItem1>first</SlotItem1>
         <SlotItem2>second</SlotItem2>
         free form
       </ComponentWithSlots>,
     )
 
-    await waitFor(() => component.getByText('first'))
-    expect(component.container).toMatchSnapshot()
+    await waitFor(() => screen.getByText('first'))
+    expect(screen.getByText('first')).toBeInTheDocument()
+    expect(container.textContent).toContain('second')
+    expect(container.textContent).toContain('free form')
   })
 
   it('renders without any slots', async () => {
-    const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
-    expect(component.container).toMatchSnapshot()
+    const {container} = render(<ComponentWithSlots>free form</ComponentWithSlots>)
+    expect(container.textContent).toContain('free form')
   })
 
   it('renders with just one slot', async () => {
-    const component = render(
+    const {container} = render(
       <ComponentWithSlots>
         <SlotItem1>first</SlotItem1>
         free form
       </ComponentWithSlots>,
     )
-    expect(component.container).toMatchSnapshot()
+    expect(screen.getByText('first')).toBeInTheDocument()
+    expect(container.textContent).toContain('free form')
   })
 
   it('renders with context passed to children', async () => {
-    const component = render(
+    const {container} = render(
       <ComponentWithSlots context={{salutation: 'hi'}}>
         <SlotItem3>third</SlotItem3>
         free form
       </ComponentWithSlots>,
     )
-    expect(component.container).toMatchSnapshot()
+    expect(container.textContent).toContain('hi')
+    expect(container.textContent).toContain('third')
+    expect(container.textContent).toContain('free form')
   })
 })

packages/react/vitest.config.browser.mts

@@ -50,13 +50,16 @@ export default defineConfig({
       'src/FormControl/**/*.test.?(c|m)[jt]s?(x)',
       'src/InlineMessage/**/*.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/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/PointerBox/**/*.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)',
       'src/RadioGroup/**/*.test.?(c|m)[jt]s?(x)',
@@ -73,6 +76,7 @@ export default defineConfig({
       'src/StateLabel/**/*.test.?(c|m)[jt]s?(x)',
       'src/SubNav/**/*.test.?(c|m)[jt]s?(x)',
       'src/TabNav/**/*.test.?(c|m)[jt]s?(x)',
+      'src/Text/**/*.test.?(c|m)[jt]s?(x)',
       'src/TextInputWithTokens/**/*.test.?(c|m)[jt]s?(x)',
       'src/Textarea/**/*.test.?(c|m)[jt]s?(x)',
       'src/Timeline/**/*.test.?(c|m)[jt]s?(x)',