Remove @shopify/react-testing

Author: gonzaloriestra

package.json

@@ -310,7 +310,6 @@
         ],
         "project": "**/*.{ts,tsx}!",
         "ignoreDependencies": [
-          "@shopify/react-testing",
           "react-dom"
         ]
       },

packages/ui-extensions-dev-console/package.json

@@ -23,8 +23,9 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@shopify/react-testing": "^5.3.0",
     "@shopify/ui-extensions-test-utils": "3.26.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^5.1.4",

packages/ui-extensions-dev-console/src/components/Modal/components/Backdrop/Backdrop.test.tsx

@@ -1,6 +1,6 @@
 import {Backdrop} from '.'
 import React from 'react'
-import {render} from '@shopify/ui-extensions-test-utils'
+import {render, fireEvent} from '@testing-library/react'
 
 describe('<Backdrop />', () => {
   const defaultProps = {
@@ -11,33 +11,33 @@ describe('<Backdrop />', () => {
   describe('onClick()', () => {
     test('is called when the backdrop is clicked', () => {
       const spy = vi.fn()
-      const backdrop = render(<Backdrop {...defaultProps} onClick={spy} />)
-      backdrop.find('div')!.trigger('onClick')
+      const {container} = render(<Backdrop {...defaultProps} onClick={spy} />)
+      fireEvent.click(container.firstElementChild!)
       expect(spy).toHaveBeenCalled()
     })
   })
 
   describe('onMouseDown', () => {
     test('calls setClosing()', () => {
       const spy = vi.fn()
-      const backdrop = render(<Backdrop {...defaultProps} setClosing={spy} />)
-      backdrop.find('div')!.trigger('onMouseDown')
+      const {container} = render(<Backdrop {...defaultProps} setClosing={spy} />)
+      fireEvent.mouseDown(container.firstElementChild!)
       expect(spy).toHaveBeenCalledWith(true)
     })
   })
 
   describe('onMouseUp', () => {
     test('calls setClosing()', () => {
       const spy = vi.fn()
-      const backdrop = render(<Backdrop {...defaultProps} setClosing={spy} />)
-      backdrop.find('div')!.trigger('onMouseUp')
+      const {container} = render(<Backdrop {...defaultProps} setClosing={spy} />)
+      fireEvent.mouseUp(container.firstElementChild!)
       expect(spy).toHaveBeenCalledWith(false)
     })
 
-    test('calls setClosing()', () => {
+    test('calls onClick()', () => {
       const spy = vi.fn()
-      const backdrop = render(<Backdrop {...defaultProps} onClick={spy} />)
-      backdrop.find('div')!.trigger('onMouseUp')
+      const {container} = render(<Backdrop {...defaultProps} onClick={spy} />)
+      fireEvent.mouseUp(container.firstElementChild!)
       expect(spy).toHaveBeenCalled()
     })
   })

packages/ui-extensions-dev-console/src/components/Tooltip/tests/Tooltip.test.tsx

@@ -1,7 +1,6 @@
 import {Tooltip} from '../Tooltip'
 import React from 'react'
-import {mount} from '@shopify/react-testing'
-import {vi, test} from 'vitest'
+import {render, screen, fireEvent, act} from '@testing-library/react'
 
 const handleClick = vi.fn()
 
@@ -16,33 +15,33 @@ const ComponentChildComponent = () => (
 
 describe('<Tooltip />', () => {
   test.each([
-    ['onMouseEnter', 'onMouseLeave'],
-    ['onFocus', 'onBlur'],
-  ])('appears if hovered/focused/etc, hidden otherwise', (showEvent: any, hideEvent: any) => {
-    const wrapper = mount(<TextChildComponent />)
+    ['mouseEnter', 'mouseLeave'],
+    ['focus', 'blur'],
+  ] as const)('appears if hovered/focused/etc, hidden otherwise', (showEvent, hideEvent) => {
+    render(<TextChildComponent />)
 
-    wrapper.act(() => {
-      wrapper.find('div')?.trigger(showEvent)
-    })
+    const trigger = screen.getByText('test')
 
-    let tooltip = wrapper.find('div', {role: 'tooltip'})
+    act(() => {
+      fireEvent[showEvent](trigger)
+    })
 
-    expect(tooltip).not.toBeNull()
+    expect(screen.queryByRole('tooltip')).toBeInTheDocument()
 
-    wrapper.act(() => {
-      wrapper.find('div')?.trigger(hideEvent)
+    act(() => {
+      fireEvent[hideEvent](trigger)
     })
 
-    tooltip = wrapper.find('div', {role: 'tooltip'})
-
-    expect(tooltip).toBeNull()
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
   })
 
   test('hitting enter triggers content onClick', () => {
-    const wrapper = mount(<ComponentChildComponent />)
+    render(<ComponentChildComponent />)
+
+    const trigger = screen.getByText('Button').closest('div[tabindex]')!
 
-    wrapper.act(() => {
-      wrapper.find('div')?.trigger('onKeyUp', {key: 'Enter'})
+    act(() => {
+      fireEvent.keyUp(trigger, {key: 'Enter'})
     })
 
     expect(handleClick).toHaveBeenCalled()

packages/ui-extensions-dev-console/src/sections/Extensions/Extensions.test.tsx

@@ -1,16 +1,15 @@
-import {AppHomeRow, ExtensionRow} from './components'
-
 import {Extensions} from './Extensions.js'
 import {DefaultProviders} from 'tests/DefaultProviders'
 import React from 'react'
 import {ExtensionServerClient} from '@shopify/ui-extensions-server-kit'
 import {mockExtension} from '@shopify/ui-extensions-server-kit/testing'
 import {render, withProviders} from '@shopify/ui-extensions-test-utils'
+import {screen} from '@testing-library/react'
 
 vi.mock('./components', () => ({
-  ExtensionRow: () => null,
+  ExtensionRow: ({uuid}: any) => <div data-testid={`extension-row-${uuid}`} />,
   PostPurchaseRow: () => null,
-  AppHomeRow: () => null,
+  AppHomeRow: () => <div data-testid="app-home-row" />,
   Row: () => null,
 }))
 
@@ -26,34 +25,34 @@ describe('<Extensions/>', () => {
   })
 
   test('renders a blank slate if there is no data', async () => {
-    const container = render(<Extensions />, withProviders(DefaultProviders))
+    render(<Extensions />, withProviders(DefaultProviders))
 
-    expect(container).not.toContainReactComponent('table')
-    expect(container).not.toContainReactComponent(AppHomeRow)
-    expect(container).not.toContainReactComponent(ExtensionRow)
+    expect(screen.queryByRole('table')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('app-home-row')).not.toBeInTheDocument()
+    expect(screen.queryByTestId(/extension-row-/)).not.toBeInTheDocument()
   })
 
   test('renders <AppHomeRow/>', async () => {
     const extensions = [mockExtension()]
 
-    const container = render(<Extensions />, withProviders(DefaultProviders), {
+    render(<Extensions />, withProviders(DefaultProviders), {
       state: {extensions, store: 'shop1.myshopify.io', app: {url: 'mock.url', title: 'Mock App Title'}},
     })
 
-    expect(container).toContainReactComponent(AppHomeRow)
+    expect(screen.getByTestId('app-home-row')).toBeInTheDocument()
   })
 
   test('renders an <ExtensionRow/> for each Extension', async () => {
     const extension1 = mockExtension()
     const extension2 = mockExtension()
     const extensions = [extension1, extension2]
 
-    const container = render(<Extensions />, withProviders(DefaultProviders), {
+    render(<Extensions />, withProviders(DefaultProviders), {
       state: {extensions, store: 'shop1.myshopify.io'},
     })
 
-    expect(container).toContainReactComponentTimes(ExtensionRow, extensions.length)
-    expect(container).toContainReactComponent(ExtensionRow, {uuid: extension1.uuid})
-    expect(container).toContainReactComponent(ExtensionRow, {uuid: extension2.uuid})
+    expect(screen.getAllByTestId(/extension-row-/)).toHaveLength(extensions.length)
+    expect(screen.getByTestId(`extension-row-${extension1.uuid}`)).toBeInTheDocument()
+    expect(screen.getByTestId(`extension-row-${extension2.uuid}`)).toBeInTheDocument()
   })
 })

packages/ui-extensions-dev-console/src/sections/Extensions/components/AppHomeRow/AppHomeRow.test.tsx

@@ -1,76 +1,86 @@
 import {AppHomeRow} from '.'
-import {PreviewLink, QRCodeModal} from '..'
 import {DefaultProviders} from 'tests/DefaultProviders'
-import {Button} from '@/components'
 import React from 'react'
-
 import {render, withProviders} from '@shopify/ui-extensions-test-utils'
+import {screen, fireEvent} from '@testing-library/react'
 
-vi.mock('..', () => ({
-  NotApplicable: () => null,
-  PreviewLink: () => null,
-  QRCodeModal: () => null,
-  Row: (props: any) => props.children,
+const {QRCodeModalMock, PreviewLinkMock} = vi.hoisted(() => ({
+  QRCodeModalMock: vi.fn(),
+  PreviewLinkMock: vi.fn(),
 }))
 
-vi.mock('@/components', () => ({
-  Button: (props: any) => props.children,
+vi.mock('..', () => ({
+  NotApplicable: () => null,
+  PreviewLink: (props: any) => {
+    PreviewLinkMock(props)
+    return null
+  },
+  QRCodeModal: (props: any) => {
+    QRCodeModalMock(props)
+    return <div data-testid="qr-code-modal" onClick={props.onClose} />
+  },
+  Row: ({children}: any) => <tr>{children}</tr>,
 }))
 
 describe('<AppHomeRow/>', () => {
   const defaultState = {
     app: {url: 'mock.url', title: 'Mock App Title'},
   }
 
+  beforeEach(() => {
+    QRCodeModalMock.mockClear()
+    PreviewLinkMock.mockClear()
+  })
+
   test('renders a <QRCodeModal/>, closed by default', () => {
-    const container = render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
+    render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
 
-    expect(container).toContainReactComponent(QRCodeModal, {code: undefined})
+    expect(QRCodeModalMock).toHaveBeenLastCalledWith(expect.objectContaining({code: undefined}))
   })
 
   test('Opens and closes the <QRCodeModal/> ', () => {
-    const container = render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
+    render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
 
-    container.act(() => {
-      container.find(Button)?.trigger('onClick')
-    })
+    fireEvent.click(screen.getByText('View mobile'))
 
-    expect(container).toContainReactComponent(QRCodeModal, {
-      code: {
-        url: defaultState.app.url,
-        type: 'home',
-        title: defaultState.app.title,
-      },
-    })
+    expect(QRCodeModalMock).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        code: {
+          url: defaultState.app.url,
+          type: 'home',
+          title: defaultState.app.title,
+        },
+      }),
+    )
 
-    container.act(() => {
-      container.find(QRCodeModal)?.trigger('onClose')
-    })
+    fireEvent.click(screen.getByTestId('qr-code-modal'))
 
-    expect(container).toContainReactComponent(QRCodeModal, {code: undefined})
+    expect(QRCodeModalMock).toHaveBeenLastCalledWith(expect.objectContaining({code: undefined}))
   })
 
   test("renders a <PreviewLink/> with the resource url set to the app's handle if the surface has been set to 'admin'", () => {
     const appState = {
       app: {url: 'mock.url', title: 'Mock App Title', handle: 'my-app-handle'},
     }
-    const container = render(<AppHomeRow />, withProviders(DefaultProviders), {
+    render(<AppHomeRow />, withProviders(DefaultProviders), {
       state: appState,
       client: {options: {surface: 'admin'}},
     })
 
-    expect(container).toContainReactComponent(PreviewLink, {resourceUrl: '/admin/apps/my-app-handle'})
+    expect(PreviewLinkMock).toHaveBeenLastCalledWith(
+      expect.objectContaining({resourceUrl: '/admin/apps/my-app-handle'}),
+    )
   })
 
   test("renders a <PreviewLink/> without a resource url if the surface has not been set to 'admin'", () => {
     const appState = {
       app: {url: 'mock.url', title: 'Mock App Title', handle: 'my-app-handle'},
     }
-    const container = render(<AppHomeRow />, withProviders(DefaultProviders), {
+    render(<AppHomeRow />, withProviders(DefaultProviders), {
       state: appState,
       client: {options: {surface: 'checkout'}},
     })
 
-    expect(container).toContainReactComponent(PreviewLink, {resourceUrl: undefined})
+    expect(PreviewLinkMock).toHaveBeenLastCalledWith(expect.objectContaining({resourceUrl: undefined}))
   })
 })