test(ui-flex): migrate old Flex tests

Author: git-nandor

package-lock.json

@@ -32,9 +32,13 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "10.12.0",
     "@instructure/ui-babel-preset": "10.12.0",
     "@instructure/ui-test-utils": "10.12.0",
-    "@instructure/ui-themes": "10.12.0"
+    "@instructure/ui-themes": "10.12.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"

packages/ui-flex/package.json

@@ -23,34 +23,39 @@
  */
 
 import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 
-import { expect, mount, within, wait, stub } from '@instructure/ui-test-utils'
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
 import { Item } from '../index'
 
-describe('<Item />', async () => {
+describe('<Item />', () => {
   it('should render children', async () => {
-    const subject = await mount(<Item>Flex item 1</Item>)
-    const item = within(subject.getDOMNode())
-    expect(item.find(':contains(Flex item 1)')).to.exist()
+    const { container } = render(<Item>Flex item 1</Item>)
+    const item = container.querySelector('[class$="-flexItem"]')
+
+    expect(item).toBeInTheDocument()
+    expect(item).toHaveTextContent('Flex item 1')
   })
 
   it('should support an elementRef prop', async () => {
-    const elementRef = stub()
+    const elementRef = vi.fn()
 
-    const subject = await mount(
+    const { container } = render(
       <Item elementRef={elementRef}>Flex item 2</Item>
     )
+    const item = container.querySelector('[class$="-flexItem"]')
 
-    await wait(() => {
-      expect(elementRef).to.have.been.calledWith(subject.getDOMNode())
+    await waitFor(() => {
+      expect(elementRef).toHaveBeenCalledWith(item)
     })
   })
 
   it('should meet a11y standards', async () => {
-    const subject = await mount(<Item>Flex item 3</Item>)
-
-    const item = within(subject.getDOMNode())
+    const { container } = render(<Item>Flex item 3</Item>)
+    const axeCheck = await runAxeCheck(container)
 
-    expect(await item.accessible()).to.be.true()
+    expect(axeCheck).toBe(true)
   })
 })