test(ui-react-utils): migrate old React-utils tests

packages/ui-react-utils/package.json

@@ -23,7 +23,8 @@
   "license": "MIT",
   "devDependencies": {
     "@instructure/ui-babel-preset": "8.53.2",
-    "@instructure/ui-test-utils": "8.53.2"
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",

packages/ui-react-utils/src/__tests__/ComponentIdentifier.test.tsx → packages/ui-react-utils/src/__new-tests__/ComponentIdentifier.test.tsx

@@ -24,10 +24,21 @@
 
 import React, { Component, ReactNode } from 'react'
 import PropTypes from 'prop-types'
-import { mount, expect, stub } from '@instructure/ui-test-utils'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
 import { ComponentIdentifier } from '../ComponentIdentifier'
 
-describe('ComponentIdentifier', async () => {
+describe('ComponentIdentifier', () => {
+  beforeAll(() => {
+    // Mocking console warnings to prevent test output pollution
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
+
   class Trigger extends ComponentIdentifier<any> {
     static displayName = 'Trigger'
   }
@@ -53,46 +64,42 @@ describe('ComponentIdentifier', async () => {
     }
   }
 
-  it('should render only child', async () => {
+  it('should render only child', () => {
     let buttonRef: HTMLButtonElement
-    await mount(
+    render(
       <App>
         <Trigger>
           <button ref={(el) => (buttonRef = el!)}>Click Me</button>
         </Trigger>
       </App>
     )
 
-    expect(buttonRef!.textContent).to.equal('Click Me')
+    expect(buttonRef!.textContent).toEqual('Click Me')
   })
 
-  it('should not error when no children provided', async () => {
-    let error = false
-    try {
-      await mount(
+  it('should not error when no children provided', () => {
+    const renderApp = () =>
+      render(
         <App>
           <Trigger />
         </App>
       )
-    } catch (e) {
-      error = true
-    }
 
-    expect(error).to.be.false()
+    expect(renderApp).not.toThrow()
   })
 
-  it('should pass props', async () => {
+  it('should pass props', () => {
     let buttonRef: HTMLButtonElement | null
-    const onClick = stub()
-    await mount(
+    const onClick = jest.fn()
+    render(
       <App>
         <Trigger onClick={onClick}>
           <button ref={(el) => (buttonRef = el)}>Click Me</button>
         </Trigger>
       </App>
     )
 
-    await buttonRef!.click()
-    expect(onClick).to.have.been.called()
+    buttonRef!.click()
+    expect(onClick).toHaveBeenCalled()
   })
 })

packages/ui-react-utils/src/__tests__/DeterministicIdContext.test.tsx → packages/ui-react-utils/src/__new-tests__/DeterministicIdContext.test.tsx

@@ -23,10 +23,10 @@
  */
 
 import React from 'react'
-import ReactDOM from 'react-dom'
-import ReactTestUtils from 'react-dom/test-utils'
 
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
 import {
   withDeterministicId,
   DeterministicIdContextProvider,
@@ -39,7 +39,11 @@ class TestComponent extends React.Component<
   React.PropsWithChildren<WithDeterministicIdProps>
 > {
   render() {
-    return <div id={this.props.deterministicId!()}>{this.props.children}</div>
+    return (
+      <div data-testid="test-component" id={this.props.deterministicId!()}>
+        {this.props.children}
+      </div>
+    )
   }
 }
 
@@ -53,73 +57,70 @@ class WrapperComponent extends React.Component {
   }
 }
 
-const uniqueIds = (el: { getDOMNode: () => Element }) => {
-  const idList = Array.from(el.getDOMNode().children).map((el) => el.id)
-
+const uniqueIds = (el: Element) => {
+  const idList = Array.from(el.children).map((child) => child.id)
   return new Set(idList).size === idList.length
 }
 
 describe('DeterministicIdContext', () => {
-  it('can be found and tested with ReactTestUtils', async () => {
-    const rootNode = document.createElement('div')
-    document.body.appendChild(rootNode)
+  it('can be found and tested with ReactTestUtils', () => {
+    render(<WrapperComponent />)
+    const testComponent = screen.getByTestId('test-component')
 
-    // eslint-disable-next-line react/no-render-return-value
-    const rendered = ReactDOM.render(<WrapperComponent />, rootNode)
-    ReactTestUtils.findRenderedComponentWithType(
-      rendered as any,
-      (TestComponent as any).originalType
-    )
+    expect(testComponent).toBeInTheDocument()
+    expect(testComponent.id).toBeDefined()
   })
 
-  it('should generate unique ids without Provider wrapper', async () => {
-    const el = await mount(
-      <div>
-        <TestComponent></TestComponent>
-        <TestComponent></TestComponent>
-        <TestComponent></TestComponent>
-        <TestComponent></TestComponent>
-        <TestComponent></TestComponent>
+  it('should generate unique ids without Provider wrapper', () => {
+    render(
+      <div data-testid="test-components">
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
       </div>
     )
+    const el = screen.getByTestId('test-components')
 
-    expect(uniqueIds(el)).to.be.true()
+    expect(uniqueIds(el)).toBe(true)
   })
 
-  it('should generate unique ids when components are rendered both out and inside of provider', async () => {
-    const el = await mount(
-      <div>
+  it('should generate unique ids when components are rendered both out and inside of provider', () => {
+    render(
+      <div data-testid="test-components">
         <DeterministicIdContextProvider>
-          <TestComponent></TestComponent>
-          <TestComponent></TestComponent>
-          <TestComponent></TestComponent>
+          <TestComponent />
+          <TestComponent />
+          <TestComponent />
         </DeterministicIdContextProvider>
-        <TestComponent></TestComponent>
-        <TestComponent></TestComponent>
+        <TestComponent />
+        <TestComponent />
       </div>
     )
+    const el = screen.getByTestId('test-components')
 
-    expect(uniqueIds(el)).to.be.true()
+    expect(uniqueIds(el)).toBe(true)
   })
 
-  //skipping this test because it will fail either in strictmode or normal mode
-  it('should generate unique ids with provider only', async () => {
+  it('should generate unique ids with provider only', () => {
     const Wrapper = ({ children }: any) => {
       return (
         <DeterministicIdContextProvider
           instanceCounterMap={generateInstanceCounterMap()}
         >
-          <div id="wrapper">{children}</div>
+          <div data-testid="wrapper">{children}</div>
         </DeterministicIdContextProvider>
       )
     }
     const children = []
     for (let i = 0; i < 10; i++) {
-      children.push(<TestComponent></TestComponent>)
+      children.push(<TestComponent key={i} />)
     }
 
-    const el = await mount(<Wrapper>{children}</Wrapper>)
+    render(<Wrapper>{children}</Wrapper>)
+    const el = screen.getByTestId('wrapper')
 
-    expect(uniqueIds(el)).to.be.true()
+    expect(uniqueIds(el)).toBe(true)
   })
 })

packages/ui-react-utils/src/__tests__/callRenderProp.test.tsx → packages/ui-react-utils/src/__new-tests__/callRenderProp.test.tsx

@@ -24,60 +24,63 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import { expect, mount } from '@instructure/ui-test-utils'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
 import { callRenderProp } from '../callRenderProp'
 
-describe('callRenderProp', async () => {
-  /* eslint-disable mocha/no-synchronous-tests */
+describe('callRenderProp', () => {
   it('strings', () => {
-    expect(callRenderProp('foo')).to.equal('foo')
+    expect(callRenderProp('foo')).toEqual('foo')
   })
 
   it('numbers', () => {
-    expect(callRenderProp(2)).to.equal(2)
+    expect(callRenderProp(2)).toEqual(2)
   })
 
   it('arrays', () => {
     const prop = ['foo', 'bar', 'baz']
-    expect(callRenderProp(prop)).to.deep.equal(prop)
-    expect(callRenderProp([])).to.deep.equal([])
+
+    expect(callRenderProp(prop)).toStrictEqual(prop)
+    expect(callRenderProp([])).toStrictEqual([])
   })
 
   it('booleans', () => {
-    expect(callRenderProp(false)).to.equal(false)
+    expect(callRenderProp(false)).toEqual(false)
   })
 
   it('JSX literals', () => {
     const Foo = () => <div>hello</div>
-    expect(callRenderProp(<Foo />)).to.deep.equal(<Foo />)
+    expect(callRenderProp(<Foo />)).toStrictEqual(<Foo />)
   })
-  /* eslint-enable mocha/no-synchronous-tests */
 
-  it('React classes', async () => {
+  it('React classes', () => {
     class Foo extends React.Component {
       render() {
         return <div>hello</div>
       }
     }
 
     const Result = callRenderProp(Foo)
-    expect(Result).to.deep.equal(<Foo />)
+    expect(Result).toStrictEqual(<Foo />)
 
-    const subject = await mount(Result)
-    expect(subject.getDOMNode()).to.exist()
+    const { getByText } = render(Result)
+    expect(getByText('hello')).toBeInTheDocument()
   })
 
-  it('functions', async () => {
+  it('functions', () => {
     const Baz = function () {
       return 'some text'
     }
     const result = callRenderProp(Baz)
 
-    const subject = await mount(<div>{result}</div>)
+    const { getByText } = render(<div>{result}</div>)
 
-    expect(subject.getDOMNode()).to.have.text('some text')
+    expect(getByText('some text')).toBeInTheDocument()
   })
-  it('fat arrow functions', async () => {
+
+  it('fat arrow functions', () => {
     const Baz = () => 'some text'
 
     // in this test we are trying to test that it works with fat arrow functions,
@@ -91,23 +94,23 @@ describe('callRenderProp', async () => {
 
     const result = callRenderProp(Baz)
 
-    const subject = await mount(<div>{result}</div>)
+    const { getByText } = render(<div>{result}</div>)
 
-    expect(subject.getDOMNode()).to.have.text('some text')
+    expect(getByText('some text')).toBeInTheDocument()
   })
 
-  describe('passing props', async () => {
-    it('should pass props correctly to functions', async () => {
+  describe('passing props', () => {
+    it('should pass props correctly to functions', () => {
       const someFunc = ({ shape }: { shape: string }) => <div>{shape}</div>
 
       const result = callRenderProp(someFunc, { shape: 'rectangle' })
 
-      const subject = await mount(<div>{result}</div>)
+      const { getByText } = render(<div>{result}</div>)
 
-      expect(subject.getDOMNode()).to.have.text('rectangle')
+      expect(getByText('rectangle')).toBeInTheDocument()
     })
 
-    it('should pass props correctly to React classes', async () => {
+    it('should pass props correctly to React classes', () => {
       type FooProps = { shape?: string }
       class Foo extends React.Component<FooProps> {
         static propTypes = {
@@ -125,9 +128,9 @@ describe('callRenderProp', async () => {
 
       const result = callRenderProp(Foo, { shape: 'rectangle' })
 
-      const subject = await mount(<div>{result}</div>)
+      const { getByText } = render(<div>{result}</div>)
 
-      expect(subject.getDOMNode()).to.have.text('rectangle')
+      expect(getByText('rectangle')).toBeInTheDocument()
     })
   })
 })