Skip to content

Commit dcd6203

Browse files
gonzaloriestragonzaloriestra
authored
Merge pull request #6920 from Shopify/remove-react-testing
Remove @shopify/react-testing
2 parents 6bc57ef + 50fc288 commit dcd6203

15 files changed

Lines changed: 385 additions & 456 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,6 @@
310310
],
311311
"project": "**/*.{ts,tsx}!",
312312
"ignoreDependencies": [
313-
"@shopify/react-testing",
314313
"react-dom"
315314
]
316315
},

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@
2323
"react-transition-group": "^4.4.5"
2424
},
2525
"devDependencies": {
26-
"@shopify/react-testing": "^5.3.0",
2726
"@shopify/ui-extensions-test-utils": "3.26.0",
27+
"@testing-library/jest-dom": "^6.9.1",
28+
"@testing-library/react": "^16.3.2",
2829
"@types/react": "^18.2.0",
2930
"@types/react-dom": "^18.2.0",
3031
"@vitejs/plugin-react": "^5.1.4",

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Backdrop} from '.'
22
import React from 'react'
3-
import {render} from '@shopify/ui-extensions-test-utils'
3+
import {render, fireEvent} from '@testing-library/react'
44

55
describe('<Backdrop />', () => {
66
const defaultProps = {
@@ -11,33 +11,33 @@ describe('<Backdrop />', () => {
1111
describe('onClick()', () => {
1212
test('is called when the backdrop is clicked', () => {
1313
const spy = vi.fn()
14-
const backdrop = render(<Backdrop {...defaultProps} onClick={spy} />)
15-
backdrop.find('div')!.trigger('onClick')
14+
const {container} = render(<Backdrop {...defaultProps} onClick={spy} />)
15+
fireEvent.click(container.firstElementChild!)
1616
expect(spy).toHaveBeenCalled()
1717
})
1818
})
1919

2020
describe('onMouseDown', () => {
2121
test('calls setClosing()', () => {
2222
const spy = vi.fn()
23-
const backdrop = render(<Backdrop {...defaultProps} setClosing={spy} />)
24-
backdrop.find('div')!.trigger('onMouseDown')
23+
const {container} = render(<Backdrop {...defaultProps} setClosing={spy} />)
24+
fireEvent.mouseDown(container.firstElementChild!)
2525
expect(spy).toHaveBeenCalledWith(true)
2626
})
2727
})
2828

2929
describe('onMouseUp', () => {
3030
test('calls setClosing()', () => {
3131
const spy = vi.fn()
32-
const backdrop = render(<Backdrop {...defaultProps} setClosing={spy} />)
33-
backdrop.find('div')!.trigger('onMouseUp')
32+
const {container} = render(<Backdrop {...defaultProps} setClosing={spy} />)
33+
fireEvent.mouseUp(container.firstElementChild!)
3434
expect(spy).toHaveBeenCalledWith(false)
3535
})
3636

37-
test('calls setClosing()', () => {
37+
test('calls onClick()', () => {
3838
const spy = vi.fn()
39-
const backdrop = render(<Backdrop {...defaultProps} onClick={spy} />)
40-
backdrop.find('div')!.trigger('onMouseUp')
39+
const {container} = render(<Backdrop {...defaultProps} onClick={spy} />)
40+
fireEvent.mouseUp(container.firstElementChild!)
4141
expect(spy).toHaveBeenCalled()
4242
})
4343
})

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

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Tooltip} from '../Tooltip'
22
import React from 'react'
3-
import {mount} from '@shopify/react-testing'
4-
import {vi, test} from 'vitest'
3+
import {render, screen, fireEvent, act} from '@testing-library/react'
54

65
const handleClick = vi.fn()
76

@@ -16,33 +15,33 @@ const ComponentChildComponent = () => (
1615

1716
describe('<Tooltip />', () => {
1817
test.each([
19-
['onMouseEnter', 'onMouseLeave'],
20-
['onFocus', 'onBlur'],
21-
])('appears if hovered/focused/etc, hidden otherwise', (showEvent: any, hideEvent: any) => {
22-
const wrapper = mount(<TextChildComponent />)
18+
['mouseEnter', 'mouseLeave'],
19+
['focus', 'blur'],
20+
] as const)('appears if hovered/focused/etc, hidden otherwise', (showEvent, hideEvent) => {
21+
render(<TextChildComponent />)
2322

24-
wrapper.act(() => {
25-
wrapper.find('div')?.trigger(showEvent)
26-
})
23+
const trigger = screen.getByText('test')
2724

28-
let tooltip = wrapper.find('div', {role: 'tooltip'})
25+
act(() => {
26+
fireEvent[showEvent](trigger)
27+
})
2928

30-
expect(tooltip).not.toBeNull()
29+
expect(screen.queryByRole('tooltip')).toBeInTheDocument()
3130

32-
wrapper.act(() => {
33-
wrapper.find('div')?.trigger(hideEvent)
31+
act(() => {
32+
fireEvent[hideEvent](trigger)
3433
})
3534

36-
tooltip = wrapper.find('div', {role: 'tooltip'})
37-
38-
expect(tooltip).toBeNull()
35+
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
3936
})
4037

4138
test('hitting enter triggers content onClick', () => {
42-
const wrapper = mount(<ComponentChildComponent />)
39+
render(<ComponentChildComponent />)
40+
41+
const trigger = screen.getByText('Button').closest('div[tabindex]')!
4342

44-
wrapper.act(() => {
45-
wrapper.find('div')?.trigger('onKeyUp', {key: 'Enter'})
43+
act(() => {
44+
fireEvent.keyUp(trigger, {key: 'Enter'})
4645
})
4746

4847
expect(handleClick).toHaveBeenCalled()

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

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import {AppHomeRow, ExtensionRow} from './components'
2-
31
import {Extensions} from './Extensions.js'
42
import {DefaultProviders} from 'tests/DefaultProviders'
53
import React from 'react'
64
import {ExtensionServerClient} from '@shopify/ui-extensions-server-kit'
75
import {mockExtension} from '@shopify/ui-extensions-server-kit/testing'
86
import {render, withProviders} from '@shopify/ui-extensions-test-utils'
7+
import {screen} from '@testing-library/react'
98

109
vi.mock('./components', () => ({
11-
ExtensionRow: () => null,
10+
ExtensionRow: ({uuid}: any) => <div data-testid={`extension-row-${uuid}`} />,
1211
PostPurchaseRow: () => null,
13-
AppHomeRow: () => null,
12+
AppHomeRow: () => <div data-testid="app-home-row" />,
1413
Row: () => null,
1514
}))
1615

@@ -26,34 +25,34 @@ describe('<Extensions/>', () => {
2625
})
2726

2827
test('renders a blank slate if there is no data', async () => {
29-
const container = render(<Extensions />, withProviders(DefaultProviders))
28+
render(<Extensions />, withProviders(DefaultProviders))
3029

31-
expect(container).not.toContainReactComponent('table')
32-
expect(container).not.toContainReactComponent(AppHomeRow)
33-
expect(container).not.toContainReactComponent(ExtensionRow)
30+
expect(screen.queryByRole('table')).not.toBeInTheDocument()
31+
expect(screen.queryByTestId('app-home-row')).not.toBeInTheDocument()
32+
expect(screen.queryByTestId(/extension-row-/)).not.toBeInTheDocument()
3433
})
3534

3635
test('renders <AppHomeRow/>', async () => {
3736
const extensions = [mockExtension()]
3837

39-
const container = render(<Extensions />, withProviders(DefaultProviders), {
38+
render(<Extensions />, withProviders(DefaultProviders), {
4039
state: {extensions, store: 'shop1.myshopify.io', app: {url: 'mock.url', title: 'Mock App Title'}},
4140
})
4241

43-
expect(container).toContainReactComponent(AppHomeRow)
42+
expect(screen.getByTestId('app-home-row')).toBeInTheDocument()
4443
})
4544

4645
test('renders an <ExtensionRow/> for each Extension', async () => {
4746
const extension1 = mockExtension()
4847
const extension2 = mockExtension()
4948
const extensions = [extension1, extension2]
5049

51-
const container = render(<Extensions />, withProviders(DefaultProviders), {
50+
render(<Extensions />, withProviders(DefaultProviders), {
5251
state: {extensions, store: 'shop1.myshopify.io'},
5352
})
5453

55-
expect(container).toContainReactComponentTimes(ExtensionRow, extensions.length)
56-
expect(container).toContainReactComponent(ExtensionRow, {uuid: extension1.uuid})
57-
expect(container).toContainReactComponent(ExtensionRow, {uuid: extension2.uuid})
54+
expect(screen.getAllByTestId(/extension-row-/)).toHaveLength(extensions.length)
55+
expect(screen.getByTestId(`extension-row-${extension1.uuid}`)).toBeInTheDocument()
56+
expect(screen.getByTestId(`extension-row-${extension2.uuid}`)).toBeInTheDocument()
5857
})
5958
})

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

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,86 @@
11
import {AppHomeRow} from '.'
2-
import {PreviewLink, QRCodeModal} from '..'
32
import {DefaultProviders} from 'tests/DefaultProviders'
4-
import {Button} from '@/components'
53
import React from 'react'
6-
74
import {render, withProviders} from '@shopify/ui-extensions-test-utils'
5+
import {screen, fireEvent} from '@testing-library/react'
86

9-
vi.mock('..', () => ({
10-
NotApplicable: () => null,
11-
PreviewLink: () => null,
12-
QRCodeModal: () => null,
13-
Row: (props: any) => props.children,
7+
const {QRCodeModalMock, PreviewLinkMock} = vi.hoisted(() => ({
8+
QRCodeModalMock: vi.fn(),
9+
PreviewLinkMock: vi.fn(),
1410
}))
1511

16-
vi.mock('@/components', () => ({
17-
Button: (props: any) => props.children,
12+
vi.mock('..', () => ({
13+
NotApplicable: () => null,
14+
PreviewLink: (props: any) => {
15+
PreviewLinkMock(props)
16+
return null
17+
},
18+
QRCodeModal: (props: any) => {
19+
QRCodeModalMock(props)
20+
return <div data-testid="qr-code-modal" onClick={props.onClose} />
21+
},
22+
Row: ({children}: any) => <tr>{children}</tr>,
1823
}))
1924

2025
describe('<AppHomeRow/>', () => {
2126
const defaultState = {
2227
app: {url: 'mock.url', title: 'Mock App Title'},
2328
}
2429

30+
beforeEach(() => {
31+
QRCodeModalMock.mockClear()
32+
PreviewLinkMock.mockClear()
33+
})
34+
2535
test('renders a <QRCodeModal/>, closed by default', () => {
26-
const container = render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
36+
render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
2737

28-
expect(container).toContainReactComponent(QRCodeModal, {code: undefined})
38+
expect(QRCodeModalMock).toHaveBeenLastCalledWith(expect.objectContaining({code: undefined}))
2939
})
3040

3141
test('Opens and closes the <QRCodeModal/> ', () => {
32-
const container = render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
42+
render(<AppHomeRow />, withProviders(DefaultProviders), {state: defaultState})
3343

34-
container.act(() => {
35-
container.find(Button)?.trigger('onClick')
36-
})
44+
fireEvent.click(screen.getByText('View mobile'))
3745

38-
expect(container).toContainReactComponent(QRCodeModal, {
39-
code: {
40-
url: defaultState.app.url,
41-
type: 'home',
42-
title: defaultState.app.title,
43-
},
44-
})
46+
expect(QRCodeModalMock).toHaveBeenLastCalledWith(
47+
expect.objectContaining({
48+
code: {
49+
url: defaultState.app.url,
50+
type: 'home',
51+
title: defaultState.app.title,
52+
},
53+
}),
54+
)
4555

46-
container.act(() => {
47-
container.find(QRCodeModal)?.trigger('onClose')
48-
})
56+
fireEvent.click(screen.getByTestId('qr-code-modal'))
4957

50-
expect(container).toContainReactComponent(QRCodeModal, {code: undefined})
58+
expect(QRCodeModalMock).toHaveBeenLastCalledWith(expect.objectContaining({code: undefined}))
5159
})
5260

5361
test("renders a <PreviewLink/> with the resource url set to the app's handle if the surface has been set to 'admin'", () => {
5462
const appState = {
5563
app: {url: 'mock.url', title: 'Mock App Title', handle: 'my-app-handle'},
5664
}
57-
const container = render(<AppHomeRow />, withProviders(DefaultProviders), {
65+
render(<AppHomeRow />, withProviders(DefaultProviders), {
5866
state: appState,
5967
client: {options: {surface: 'admin'}},
6068
})
6169

62-
expect(container).toContainReactComponent(PreviewLink, {resourceUrl: '/admin/apps/my-app-handle'})
70+
expect(PreviewLinkMock).toHaveBeenLastCalledWith(
71+
expect.objectContaining({resourceUrl: '/admin/apps/my-app-handle'}),
72+
)
6373
})
6474

6575
test("renders a <PreviewLink/> without a resource url if the surface has not been set to 'admin'", () => {
6676
const appState = {
6777
app: {url: 'mock.url', title: 'Mock App Title', handle: 'my-app-handle'},
6878
}
69-
const container = render(<AppHomeRow />, withProviders(DefaultProviders), {
79+
render(<AppHomeRow />, withProviders(DefaultProviders), {
7080
state: appState,
7181
client: {options: {surface: 'checkout'}},
7282
})
7383

74-
expect(container).toContainReactComponent(PreviewLink, {resourceUrl: undefined})
84+
expect(PreviewLinkMock).toHaveBeenLastCalledWith(expect.objectContaining({resourceUrl: undefined}))
7585
})
7686
})

0 commit comments

Comments
 (0)