feat: support react18 (#5046)

package.json

@@ -20,7 +20,7 @@
     "@types/react-is": "^17.0.3",
     "@types/react-virtualized": "^9.21.21",
     "@types/resize-observer-browser": "^0.1.7",
-    "@use-gesture/react": "^10.2.10",
+    "@use-gesture/react": "^10.2.12",
     "ahooks": "^3.1.14",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
@@ -43,15 +43,15 @@
     "@docsearch/react": "^3.0.0",
     "@jest/types": "27.5.1",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "^27.4.1",
     "@types/jest-axe": "3.5.3",
     "@types/lodash": "^4.14.180",
-    "@types/react": "^18.0.5",
+    "@types/react": "^18.0.9",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^18.0.1",
+    "@types/react-dom": "^18.0.3",
     "@types/react-helmet": "^6.1.5",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
@@ -86,9 +86,9 @@
     "prism-react-renderer": "^1.3.1",
     "prismjs": "^1.27.0",
     "qrcode.react": "^1.0.1",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "react-test-renderer": "^17.0.2",
     "react-virtualized": "^9.22.3",
@@ -103,7 +103,7 @@
     "webpack-stream": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "main": "./cjs/index.js",
   "module": "./es/index.js",

src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`ActionSheet basic usage 1`] = `
   >
     <div
       class="adm-mask"
-      style="background: rgba(0, 0, 0, 0.55); opacity: 0.02608179366075892; display: unset;"
+      style="background: rgba(0, 0, 0, 0.55); opacity: 1; display: unset;"
     >
       <div
         aria-label="遮罩层"
@@ -31,7 +31,7 @@ exports[`ActionSheet basic usage 1`] = `
     </div>
     <div
       class="adm-popup-body adm-popup-body-position-bottom"
-      style="transform: translate(0, 92.19667326069148%);"
+      style="transform: translate(0, 0%);"
     >
       <div
         class="adm-action-sheet"

src/components/action-sheet/tests/action-sheet.test.tsx

@@ -40,9 +40,16 @@ describe('ActionSheet', () => {
     )
     fireEvent.click(getByText('button'))
 
-    await waitFor(() => {
+    await waitFor(() =>
       expect(baseElement.querySelectorAll(`.${classPrefix}`)[0]).toBeVisible()
-    })
+    )
+
+    await waitFor(() =>
+      // end of animation
+      expect(baseElement.querySelectorAll('.adm-popup-body')[0]).toHaveStyle(
+        'transform: translate(0, 0%);'
+      )
+    )
 
     expect(baseElement).toMatchSnapshot()
   })
@@ -154,11 +161,12 @@ describe('ActionSheet', () => {
     )
     fireEvent.click(getByText('button'))
 
-    await waitFor(() =>
+    await waitFor(() => {
       fireEvent.click(baseElement.querySelectorAll(`.adm-mask-aria-button`)[0])
-    )
-    await sleep(1000)
-    expect(baseElement.querySelectorAll(`.${classPrefix}`)[0]).toBeVisible()
+    })
+    await waitFor(() => {
+      expect(baseElement.querySelectorAll(`.${classPrefix}`)[0]).toBeVisible()
+    })
   })
 
   test('action click shound be called', async () => {

src/components/button/tests/button.test.tsx

@@ -1,5 +1,5 @@
 import React, { createRef } from 'react'
-import { render, testA11y, screen, fireEvent, sleep, act } from 'testing'
+import { render, testA11y, screen, fireEvent, sleep, waitFor } from 'testing'
 import Button from '../'
 import type { ButtonRef } from '..'
 
@@ -134,18 +134,19 @@ describe('Button', () => {
   })
 
   test('renders with async onClick and auto loading', async () => {
-    await act(async () => {
-      const { getByText } = render(
-        <Button
-          loading='auto'
-          loadingText='加载中'
-          onClick={async () => {
-            await sleep(300)
-          }}
-        >
-          Button
-        </Button>
-      )
+    const { getByText } = render(
+      <Button
+        loading='auto'
+        loadingText='加载中'
+        onClick={async () => {
+          await sleep(300)
+        }}
+      >
+        Button
+      </Button>
+    )
+
+    await waitFor(async () => {
       fireEvent.click(getByText('Button'))
       await sleep(100)
       screen.getByText('加载中')

src/components/floating-bubble/floating-bubble.tsx

@@ -93,7 +93,7 @@ export const FloatingBubble: FC<FloatingBubbleProps> = p => {
       // the component won't trigger drag logic if the user just clicked on the component.
       filterTaps: true,
       // set constraints to the user gesture
-      bounds: boundaryRef,
+      bounds: boundaryRef as any, // Temp fix. Seems to be a bug with use-gesture.
       from: () => [x.get(), y.get()],
     }
   )

src/components/floating-panel/floating-panel.tsx

@@ -109,7 +109,9 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
         from: () => [0, y.get()],
         pointer: { touch: true },
         target: elementRef,
-        eventOptions: supportsPassive ? { passive: false } : false,
+        eventOptions: supportsPassive
+          ? { passive: false }
+          : (false as unknown as AddEventListenerOptions),
       }
     )
 

src/components/form/tests/form.test.tsx

@@ -46,8 +46,9 @@ describe('Form', () => {
 
     console.error = jest.fn()
 
+    fireEvent.click(getByText('submit'))
     await waitFor(() => {
-      fireEvent.click(getByText('submit'))
+      expect($$(`.${classPrefix}-item-feedback-error`).length).toBeTruthy()
     })
 
     expect($$(`.${classPrefix}-item-feedback-error`).length).toBeTruthy()
@@ -59,11 +60,11 @@ describe('Form', () => {
       target: { value: 'address' },
     })
 
+    fireEvent.click(getByText('submit'))
+    expect(console.error).toBeCalledTimes(0)
     await waitFor(() => {
-      fireEvent.click(getByText('submit'))
+      expect(fn.mock.calls[0][0]).toEqual({ name: 'name', address: 'address' })
     })
-    expect(console.error).toBeCalledTimes(0)
-    expect(fn.mock.calls[0][0]).toEqual({ name: 'name', address: 'address' })
   })
 
   test('renders with horizontal layout', async () => {
@@ -152,11 +153,11 @@ describe('Form', () => {
       </Form>
     )
 
+    fireEvent.submit(getByTestId('form'))
+
     await waitFor(() => {
-      fireEvent.submit(getByTestId('form'))
+      expect(getByTestId('form')).toHaveTextContent(`'test' is required`)
     })
-
-    expect(getByTestId('form')).toHaveTextContent(`'test' is required`)
   })
 
   test("`shouldUpdate` shouldn't work with render props", async () => {

src/components/image-uploader/tests/image-uploader.test.tsx

@@ -69,7 +69,7 @@ describe('ImageUploader', () => {
     await render(<App />)
 
     const input = await mockInputFile()
-    expect(input.files?.[0]).toBe(mockImg)
+    expect(input.files?.[0]).toStrictEqual(mockImg)
     expect($$(`.${classPrefix}-cell-image`).length).toBe(2)
   })
 
@@ -151,7 +151,7 @@ describe('ImageUploader', () => {
 
     fireEvent.click($$(`.${classPrefix}-cell-delete`)[0])
     await waitFor(() => fireEvent.click(getByText('确定')))
-    expect($$(`.${classPrefix}-cell-image`).length).toBe(0)
+    await waitFor(() => expect($$(`.${classPrefix}-cell-image`).length).toBe(0))
   })
 
   test('custom upload button', async () => {

src/components/picker-view/wheel.tsx

@@ -135,7 +135,9 @@ export const Wheel = memo<Props>(
         from: () => [0, y.get()],
         preventDefault: true,
         target: props.mouseWheel ? rootRef : undefined,
-        eventOptions: supportsPassive ? { passive: false } : false,
+        eventOptions: supportsPassive
+          ? { passive: false }
+          : (false as unknown as AddEventListenerOptions),
       }
     )
 

src/components/pull-to-refresh/pull-to-refresh.tsx

@@ -155,7 +155,9 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
       axis: 'y',
       target: elementRef,
       enabled: !props.disabled,
-      eventOptions: supportsPassive ? { passive: false } : false,
+      eventOptions: supportsPassive
+        ? { passive: false }
+        : (false as unknown as AddEventListenerOptions),
     }
   )
 

src/components/stepper/tests/stepper.test.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { Stepper } from '../stepper'
 
 describe('stepper', () => {
-  test('control works', () => {
+  test('control works', async () => {
     const onChange = jest.fn()
 
     const Element = () => {
@@ -24,12 +24,12 @@ describe('stepper', () => {
     const { container } = render(<Element></Element>)
 
     // plus
-    container.getElementsByTagName('button')[1].click()
+    await waitFor(() => container.getElementsByTagName('button')[1].click())
     expect(onChange).toHaveBeenLastCalledWith(2)
 
     // plus
     container.getElementsByTagName('button')[1].click()
-    expect(container.getElementsByTagName('input')[0].value).toBe('2')
+    expect(onChange).toBeCalledTimes(1)
 
     const input = container.getElementsByTagName('input')[0]
 
@@ -68,18 +68,18 @@ describe('stepper', () => {
     })
   })
 
-  test('step works', () => {
+  test('step works', async () => {
     const onChange = jest.fn()
     const { container } = render(
       <Stepper defaultValue={0} step={100} onChange={onChange} />
     )
     // minus
-    container.getElementsByTagName('button')[0].click()
-    expect(onChange).toHaveBeenLastCalledWith(-100)
+    await waitFor(() => container.getElementsByTagName('button')[0].click())
+    expect(onChange.mock.calls[0][0]).toBe(-100)
 
     // plus
-    container.getElementsByTagName('button')[1].click()
-    expect(onChange).toHaveBeenLastCalledWith(0)
+    await waitFor(() => container.getElementsByTagName('button')[1].click())
+    expect(onChange.mock.calls[1][0]).toBe(0)
   })
 
   test('digits works', () => {
@@ -103,14 +103,13 @@ describe('stepper', () => {
 
     // max
     for (let i = 1; i <= 11; i++) {
-      container.getElementsByTagName('button')[1].click()
-
+      await waitFor(() => container.getElementsByTagName('button')[1].click())
       expect((onChange.mock as any).lastCall[0]).toBeLessThanOrEqual(0.2)
     }
 
     // min
     for (let i = 20; i >= -1; i--) {
-      container.getElementsByTagName('button')[0].click()
+      await waitFor(() => container.getElementsByTagName('button')[0].click())
       expect((onChange.mock as any).lastCall[0]).toBeGreaterThanOrEqual(0)
     }
 

src/components/switch/tests/switch.test.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { fireEvent, render, testA11y, waitFor } from 'testing'
 import Switch from '..'
+import { sleep } from '../../../utils/sleep'
 
 const classPrefix = `adm-switch`
 
@@ -59,7 +60,7 @@ describe('Switch', () => {
         return new Promise(resolve => {
           setTimeout(() => {
             resolve()
-          }, 1000)
+          }, 500)
         })
       }
       return <Switch beforeChange={() => beforeChange()} data-testid='switch' />
@@ -69,6 +70,7 @@ describe('Switch', () => {
     fireEvent.click(getByTestId('switch'))
     expect(getByTestId('switch')).toHaveClass(`${classPrefix}-disabled`)
 
+    await sleep(500)
     await waitFor(() => {
       expect(getByTestId('switch')).toHaveClass(`${classPrefix}-checked`)
     })

src/components/toast/methods.tsx

@@ -6,14 +6,14 @@ import React, {
   useState,
 } from 'react'
 import { resolveContainer } from '../../utils/get-container'
-import ReactDOM from 'react-dom'
 import { InternalToast, ToastProps } from './toast'
 import { mergeProps } from '../../utils/with-default-props'
+import { render, unmount as reactUnmount } from '../../utils/render'
 
 const containers = [] as HTMLDivElement[]
 
 function unmount(container: HTMLDivElement) {
-  const unmountResult = ReactDOM.unmountComponentAtNode(container)
+  const unmountResult = reactUnmount(container)
   if (unmountResult && container.parentNode) {
     container.parentNode.removeChild(container)
   }
@@ -83,7 +83,7 @@ export function show(p: ToastShowProps | string) {
   })
 
   const ref = createRef<ToastShowRef>()
-  ReactDOM.render(<TempToast ref={ref} />, container)
+  render(<TempToast ref={ref} />, container)
   return {
     close: () => {
       ref.current?.close()

src/utils/render-to-body.ts

@@ -1,15 +1,15 @@
-import ReactDOM from 'react-dom'
 import { ReactElement } from 'react'
+import { render, unmount as reactUnmount } from './render'
 
 export function renderToBody(element: ReactElement) {
   const container = document.createElement('div')
   document.body.appendChild(container)
   function unmount() {
-    const unmountResult = ReactDOM.unmountComponentAtNode(container)
+    const unmountResult = reactUnmount(container)
     if (unmountResult && container.parentNode) {
       container.parentNode.removeChild(container)
     }
   }
-  ReactDOM.render(element, container)
+  render(element, container)
   return unmount
 }