Repository: ant-design/ant-design-mobile
Pull request #6218 (2023-06-26 06:27:23)

test: fix failed test

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6218?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage has no change and project coverage change: **`+0.12`** :tada:
> Comparison is base [(`dd78ba3`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/dd78ba36352de0b512172af87c37ce62c9afb63a?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.63% compared to head [(`fc60355`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6218?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.75%.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #6218      +/-   ##
==========================================
+ Coverage   90.63%   90.75%   +0.12%     
==========================================
  Files         304      304              
  Lines        6597     6597              
  Branches     1644     1644              
==========================================
+ Hits         5979     5987       +8     
+ Misses        567      562       -5     
+ Partials       51       48       -3     
```


[see 1 file with indirect coverage changes](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6218/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6218?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6218.surge.sh

Patch:
diff --git a/jest.config.js b/jest.config.js
index 9cf1772d7..9cf30a608 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  maxConcurrency: 1,
+  // maxConcurrency: 1,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   modulePathIgnorePatterns: ['<rootDir>/lib/', '<rootDir>/dist/'],
   moduleDirectories: ['node_modules', 'src/tests'],


Test patch:
diff --git a/src/components/image-viewer/tests/image-viewer.test.tsx b/src/components/image-viewer/tests/image-viewer.test.tsx
index a655cd8a9..0fa411ac0 100644
--- a/src/components/image-viewer/tests/image-viewer.test.tsx
+++ b/src/components/image-viewer/tests/image-viewer.test.tsx
@@ -166,7 +166,6 @@ describe('ImageViewer.Multi', () => {
     expect(renderer.getByText('3 / 4')).not.toBeNull()
     expect(renderer.container).toMatchSnapshot()
   })
-
   test('rendering with footer', () => {
     function App() {
       return (
@@ -180,7 +179,6 @@ describe('ImageViewer.Multi', () => {
     render(<App />)
     expect(screen.getByText('查看原图')).toBeInTheDocument()
   })
-
   test('`ImageViewer.Multi.show` should be work', async () => {
     render(
       <>
@@ -196,16 +194,16 @@ describe('ImageViewer.Multi', () => {
     fireEvent.click(screen.getByText('show'))
     const imgs = await screen.findAllByRole('img')
     expect(imgs[0]).toBeVisible()
-    await userEvent.click(imgs[0])
+    await act(async () => {
+      await userEvent.click(imgs[0])
+    })
     await waitFor(() => expect(imgs[0]).not.toBeVisible())
   })
-
   test('slide should be work', async () => {
     Object.defineProperty(window, 'innerWidth', {
       value: 300,
     })
     const onIndexChange = jest.fn()
-
     render(
       <button
         onClick={() => {
@@ -215,24 +213,30 @@ describe('ImageViewer.Multi', () => {
         show
       </button>
     )
-
     fireEvent.click(screen.getByText('show'))
     await screen.findAllByRole('img')
     const slides = document.querySelectorAll(`.${classPrefix}-slides`)[0]
     expect(screen.getByText('1 / 4')).toBeInTheDocument()
 
-    mockDrag(slides, [
-      {
-        clientX: 300,
-      },
-      {
-        clientX: 200,
-      },
-      {
-        clientX: 100,
-      },
-    ])
-    await waitFor(() => expect(onIndexChange).toBeCalledWith(1))
+    await act(async () => {
+      await mockDrag(
+        slides,
+        [
+          {
+            clientX: 300,
+          },
+          {
+            clientX: 200,
+          },
+          {
+            clientX: 100,
+          },
+        ],
+        5
+      )
+    })
+
+    expect(onIndexChange).toBeCalledWith(1)
     expect(screen.getByText('2 / 4')).toBeInTheDocument()
   })
 })
diff --git a/src/components/passcode-input/tests/passcode-input.test.tsx b/src/components/passcode-input/tests/passcode-input.test.tsx
index 31261ca82..ccd8e6602 100644
--- a/src/components/passcode-input/tests/passcode-input.test.tsx
+++ b/src/components/passcode-input/tests/passcode-input.test.tsx
@@ -69,7 +69,9 @@ describe('PasscodeInput', () => {
     render(<PasscodeInput plain />)
     const input = screen.getByRole('button', { name: '密码输入框' })
     fireEvent.focus(input)
-    await userEvent.keyboard('abc')
+    await act(async () => {
+      await userEvent.keyboard('abc')
+    })
     expect(input).toHaveTextContent('abc')
   })
 
@@ -91,7 +93,9 @@ describe('PasscodeInput', () => {
     const input = screen.getByRole('button', { name: '密码输入框' })
     fireEvent.focus(input)
     expect(onFocus).toBeCalled()
-    await userEvent.keyboard('abcde')
+    await act(async () => {
+      await userEvent.keyboard('abcde')
+    })
     expect(onFill).toBeCalled()
     expect(onChange).toBeCalledTimes(4)
     fireEvent.blur(input)
diff --git a/src/components/popup/tests/popup.test.tsx b/src/components/popup/tests/popup.test.tsx
index 549cf9baf..6565beb1f 100644
--- a/src/components/popup/tests/popup.test.tsx
+++ b/src/components/popup/tests/popup.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { render, mockDrag } from 'testing'
+import { render, mockDrag, act, waitFor } from 'testing'
 import Popup from '..'
 
 describe('Popup', () => {
-  test('top swipe should be closed', () => {
+  test('top swipe should be closed', async () => {
     const onClose = jest.fn()
     render(
       <Popup visible onClose={onClose} position='top' closeOnSwipe>
@@ -11,19 +11,19 @@ describe('Popup', () => {
       </Popup>
     )
 
-    mockDrag(
+    await mockDrag(
       document.querySelector('.adm-popup') as Element,
-      new Array(8).fill(0).map((_, i) => {
+      new Array(4).fill(0).map((_, i) => {
         return {
           clientY: 400 - 50 * i,
         }
-      })
+      }),
+      5
     )
-
     expect(onClose).toBeCalledTimes(1)
   })
 
-  test('bottom swipe should be closed', () => {
+  test('bottom swipe should be closed', async () => {
     const onClose = jest.fn()
     render(
       <Popup visible onClose={onClose} position='bottom' closeOnSwipe>
@@ -31,15 +31,15 @@ describe('Popup', () => {
       </Popup>
     )
 
-    mockDrag(
+    await mockDrag(
       document.querySelector('.adm-popup') as Element,
-      new Array(8).fill(0).map((_, i) => {
+      new Array(6).fill(0).map((_, i) => {
         return {
           clientY: 50 * i,
         }
-      })
+      }),
+      5
     )
-
     expect(onClose).toBeCalledTimes(1)
   })
 })
diff --git a/src/components/radio/tests/radio.test.tsx b/src/components/radio/tests/radio.test.tsx
index 40e8d9992..fa3b56fed 100644
--- a/src/components/radio/tests/radio.test.tsx
+++ b/src/components/radio/tests/radio.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, testA11y, userEvent, screen } from 'testing'
+import { fireEvent, render, testA11y, userEvent, screen, act } from 'testing'
 import Radio from '../'
 import { RadioGroupProps } from '../group'
 
@@ -30,7 +30,10 @@ describe('Radio', () => {
         1
       </Radio>
     )
-    await userEvent.tripleClick(screen.getByRole('radio'))
+
+    await act(async () => {
+      await userEvent.tripleClick(screen.getByRole('radio'))
+    })
     expect(onChange).toBeCalledTimes(1)
   })
 })
@@ -125,7 +128,9 @@ describe('Radio.Group', () => {
         <Radio value='2'>2</Radio>
       </Radio.Group>
     )
-    await userEvent.tripleClick(screen.getByRole('radio', { name: '1' }))
+    await act(async () => {
+      await userEvent.tripleClick(screen.getByRole('radio', { name: '1' }))
+    })
     expect(onChange).toBeCalledTimes(1)
   })
 })
diff --git a/src/components/search-bar/tests/search-bar.test.tsx b/src/components/search-bar/tests/search-bar.test.tsx
index f68cf4e11..53543ed29 100644
--- a/src/components/search-bar/tests/search-bar.test.tsx
+++ b/src/components/search-bar/tests/search-bar.test.tsx
@@ -53,7 +53,9 @@ describe('adm-search-bar', () => {
     render(<SearchBar showCancelButton />)
     const input = screen.getByRole('searchbox')
     fireEvent.focus(input)
-    await userEvent.type(input, '12')
+    await act(async () => {
+      await userEvent.type(input, '12')
+    })
     fireEvent.click(screen.getByText('取消'))
     expect(input).toHaveValue('')
   })
@@ -62,7 +64,9 @@ describe('adm-search-bar', () => {
     const onSearch = jest.fn()
     render(<SearchBar onSearch={onSearch} />)
     const input = screen.getByRole('searchbox')
-    await userEvent.type(input, '12{enter}')
+    await act(async () => {
+      await userEvent.type(input, '12{enter}')
+    })
     expect(onSearch).toBeCalledWith('12')
   })
 
@@ -80,7 +84,10 @@ describe('adm-search-bar', () => {
     expect(input).toHaveFocus()
     expect(onFocus).toBeCalled()
 
-    await userEvent.type(input, '12')
+    await act(async () => {
+      await userEvent.type(input, '12')
+    })
+
     act(() => {
       ref.current?.clear()
     })
diff --git a/src/components/swiper/tests/swiper.test.tsx b/src/components/swiper/tests/swiper.test.tsx
index a9b3298bd..ded1fa445 100644
--- a/src/components/swiper/tests/swiper.test.tsx
+++ b/src/components/swiper/tests/swiper.test.tsx
@@ -237,17 +237,21 @@ describe('Swiper', () => {
     )
 
     const el = $$(`.${classPrefix}-track`)[0]
-    mockDrag(el, [
-      { clientX: 50, clientY: 300 },
-      {
-        clientX: 50,
-        clientY: 200,
-      },
-      {
-        clientX: 60,
-        clientY: 50,
-      },
-    ])
+    await mockDrag(
+      el,
+      [
+        { clientX: 50, clientY: 300 },
+        {
+          clientX: 50,
+          clientY: 200,
+        },
+        {
+          clientX: 60,
+          clientY: 50,
+        },
+      ],
+      5
+    )
 
     expect($$(`.${classPrefix}-track-inner`)[0]).toHaveStyle(
       'transform: translate3d(0,-100%,0)'
diff --git a/src/tests/testing.tsx b/src/tests/testing.tsx
index d3d59cac1..06c5916e7 100644
--- a/src/tests/testing.tsx
+++ b/src/tests/testing.tsx
@@ -104,7 +104,7 @@ export { customRender as render }
 export const testA11y = async (ui: UI | Element) => {
   const container = React.isValidElement(ui) ? customRender(ui).container : ui
 
-  const results = await axe(container)
+  const results = await axe(container as Element)
 
   expect(results).toHaveNoViolations()
 }
@@ -116,7 +116,7 @@ export const actSleep = (time: number) => {
   return act(() => sleep(time))
 }
 
-export const mockDrag = (el: Element, options: any[]) => {
+export const mockDrag = async (el: Element, options: any[], time?: number) => {
   const [downOptions, ...moveOptions] = options
   fireEvent.mouseDown(el, {
     buttons: 1,
@@ -127,6 +127,10 @@ export const mockDrag = (el: Element, options: any[]) => {
       buttons: 1,
       ...item,
     })
+
+    if (time) {
+      await sleep(time)
+    }
   }
   fireEvent.mouseUp(el)
 }